fix a11y issue with aria describedby attribute in the audio component

Author: poojagunturu96

src/js/audio-player.tsx

@@ -11,10 +11,13 @@ audioWrappers.forEach((wrapper: HTMLElement, index: number) => {
 
   const audioElem = wrapper.querySelector('audio') as HTMLAudioElement;
 
+  const titleElemId = `${wrapper.querySelector('.audio__title')?.id}`;
+
   const { btnOnly, size, outline, playIcon } = wrapper.dataset;
 
   const props = {
     id: `audio-player-${index}`,
+    titleId: titleElemId,
     btnOnly: btnOnly !== undefined,
     outline: outline !== undefined,
     audio: audioElem,
@@ -24,7 +27,6 @@ audioWrappers.forEach((wrapper: HTMLElement, index: number) => {
 
   render(<AudioPlayer {...props} />, root);
 
-  wrapper.style.display = 'none';
-
-  wrapper.parentNode?.insertBefore(root, wrapper.nextSibling);
+  audioElem.style.display = 'none';
+  audioElem.parentNode?.insertBefore(root, audioElem.nextSibling);
 });

src/js/components/audio.tsx

@@ -23,6 +23,7 @@ type AudioPlayerState = {
 
 interface AudioPlayerProps {
   id: string;
+  titleId: string;
   audio: HTMLAudioElement;
   btnOnly?: boolean;
   playIcon?: string;
@@ -35,7 +36,7 @@ class AudioPlayer extends Component<AudioPlayerProps, AudioPlayerState> {
 
   constructor(props: AudioPlayerProps) {
     super(props);
-
+    console.log(props);
     this.state = {
       playing: false,
       duration: props.audio.duration,
@@ -115,18 +116,28 @@ class AudioPlayer extends Component<AudioPlayerProps, AudioPlayerState> {
   };
 
   render(
-    { id, btnOnly, outline, playIcon = 'play', size }: AudioPlayerProps,
+    {
+      id,
+      titleId,
+      btnOnly,
+      outline,
+      playIcon = 'play',
+      size
+    }: AudioPlayerProps,
     { duration, currentTime, muted, playing }: AudioPlayerState
   ) {
     const btnClasses = `button button--primary ${
       size && `button--${size}`
     } ${outline && 'button--outline'}`;
 
+    const ariaDescribedby =
+      titleId && titleId != 'undefined' ? { 'aria-describedby': titleId } : {};
+
     const playBtn = (
       <button
         class={btnClasses}
         aria-label={playing ? 'Pause' : 'Listen'}
-        aria-describedby="midd-audio-title-1"
+        {...ariaDescribedby}
         onClick={this.handleBtnClick}
       >
         <span class="audio__button-text mr-2">

src/templates/paragraphs/audio.twig

@@ -1,18 +1,19 @@
-<div class="audio {{ paragraph ? "paragraph--audio": ""}}">
+{% set titleId = random(1234) %}
+<div class="audio {{ paragraph ? "paragraph--audio": ""}} js-audio">
   {% if panopto %}
     <div class="audio__embed">
       <iframe aria-label="Audio player" src="https://midd.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=f9b9f6b5-f52c-40f8-962b-db0b6b214532&v=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>
     </div>
   {% else %}
-    <div class="js-audio">
+    <div class="">
       <audio controls>
         <source src="https://www.middlebury.edu/institute/sites/www.middlebury.edu.institute/files/2018-02/Ace_Your_Interview_v2.mp3" type="audio/mpeg">
       </audio>
     </div>
   {% endif %}
   <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>
+    <h3 class="audio__title" id="midd-audio-title-{{titleId}}">Audio title</h3>
+    <p class="audio__text" id="midd-audio-text-{{titleId}}">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: random(1234) } %}
   </div>
 </div>