Add appropriate aria label to slider in audio component to improve ac…

…cessibility, for #604
middlebury · Aug 26, 2024 · c77591c · c77591c
1 parent ad4136f
commit c77591c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/js/components/slider.tsx b/src/js/components/slider.tsx
@@ -61,7 +61,7 @@ class Slider extends Component<SliderProps> {
 
     return (
       <div class="slider">
-        <label htmlFor={id} class="slider__label">
+        <label htmlFor={id} id={`${id}-label`} class="slider__label">
           {label}
         </label>
         <div
@@ -73,6 +73,7 @@ class Slider extends Component<SliderProps> {
             id={id}
             class="slider__handle"
             role="slider"
+            aria-labelledby={`${id}-label`}
             style={{
               width: sliderLeft + '%'
             }}

diff --git a/src/templates/paragraphs/audio.twig b/src/templates/paragraphs/audio.twig
@@ -13,6 +13,6 @@
   <div class="audio__body">
     <h3 class="audio__title" id="midd-audio-title-1">Audio title</h3>
     <p class="audio__text" id="midd-audio-text-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis commodi placeat, perferendis ratione vitae officiis vero. Commodi ullam fugiat expedita qui veritatis adipisci minus quod neque! Voluptatum tempora iure quo.</p>
-    {% include 'partials/transcript.twig' with { id: 999 } %}
+    {% include 'partials/transcript.twig' with { id: random(1234) } %}
   </div>
 </div>