feat: add better aria labels

src/components/menu/item/item.tsx

@@ -29,6 +29,7 @@ export function Item({
         className={styles.item}
         disabled={disabled}
         {...(href ? { href, target: '_blank' } : {})}
+        aria-label={label}
       >
         <span className={styles.label}>
           <span className={styles.icon}>{icon}</span> {label}

src/components/sound/range/range.tsx

@@ -4,16 +4,17 @@ import styles from './range.module.css';
 
 interface RangeProps {
   id: string;
+  label: string;
 }
 
-export function Range({ id }: RangeProps) {
+export function Range({ id, label }: RangeProps) {
   const setVolume = useSoundStore(state => state.setVolume);
   const volume = useSoundStore(state => state.sounds[id].volume);
   const isSelected = useSoundStore(state => state.sounds[id].isSelected);
 
   return (
     <input
-      aria-labelledby={id}
+      aria-label={`${label} sound volume`}
       autoComplete="off"
       className={styles.range}
       disabled={!isSelected}

src/components/sound/sound.tsx

@@ -105,7 +105,7 @@ export function Sound({
       <div className={styles.label} id={id}>
         {label}
       </div>
-      <Range id={id} />
+      <Range id={id} label={label} />
     </div>
   );
 }