From 98e5021f561458465a544e2b86194e7f52a62169 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 24 Apr 2024 16:04:18 +0330
Subject: [PATCH] feat: add better aria labels

---
 src/components/menu/item/item.tsx    | 1 +
 src/components/sound/range/range.tsx | 5 +++--
 src/components/sound/sound.tsx       | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/menu/item/item.tsx b/src/components/menu/item/item.tsx
index c36c941..01c4508 100644
--- a/src/components/menu/item/item.tsx
+++ b/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}
diff --git a/src/components/sound/range/range.tsx b/src/components/sound/range/range.tsx
index 249eef0..ec6c6b6 100644
--- a/src/components/sound/range/range.tsx
+++ b/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}
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index eb7f08b..5d526eb 100644
--- a/src/components/sound/sound.tsx
+++ b/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>
   );
 }