From e20113d076bb5076caf25d3bcac705bfdaafdf7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Thu, 6 Oct 2022 14:00:43 -0300
Subject: [PATCH] feat(a11y): improve sound volume controller

* Add a screen-reader only span with information about sound
* Add title on input with the state of volume
---
 src/components/VolumeController/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VolumeController/index.tsx b/src/components/VolumeController/index.tsx
index 6eec53bb..607ad471 100644
--- a/src/components/VolumeController/index.tsx
+++ b/src/components/VolumeController/index.tsx
@@ -28,11 +28,12 @@ export const VolumeController: React.FC<IVolumeController> = ({
 
   return (
     <Container isActive={isActive}>
+      <span className="sr-only">{soundName} volume controller</span>
       <input
         className="slider-input absolute top-0 left-0"
         type="range"
         name={`${soundName}-volume-controller`}
-        title={`${soundName} Volume Controller`}
+        title={`${soundName} volume in ${Number(rangeValue / 10).toFixed(1)}%`}
         min="20"
         max="1000"
         value={rangeValue}