Merge pull request #691 from samvera-labs/a11y-fixes

Fix a11y issues found with Siteimprove, WAVE, and Axe
samvera-labs · Oct 29, 2024 · 17d10f2 · 17d10f2
2 parents 9afc7c7 + abe6ba9
commit 17d10f2
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 16 deletions.
diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSTrackScrubber.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSTrackScrubber.js
@@ -281,10 +281,7 @@ class VideoJSTrackScrubber extends Button {
     let [currentTimeDisplay, _, durationDisplay] = trackScrubberRef.current.children;
 
     // Set the elapsed time percentage in the progress bar of track scrubber
-    document.documentElement.style.setProperty(
-      '--range-scrubber',
-      `calc(${playedPercentage}%)`
-    );
+    this.setTrackScrubberValue(playedPercentage, currentTime);
 
     // Update the track duration
     durationDisplay.innerHTML = timeToHHmmss(this.currentTrackRef.current.duration);
@@ -346,11 +343,7 @@ class VideoJSTrackScrubber extends Button {
         Math.max(0, 100 * (trackoffset / currentTrackRef.current.duration))
       );
 
-      // Set the elapsed time in the scrubber progress bar
-      document.documentElement.style.setProperty(
-        '--range-scrubber',
-        `calc(${trackpercent}%)`
-      );
+      this.setTrackScrubberValue(trackpercent, trackoffset);
 
       /**
        * Only add the currentTrack's start time for a single source items as this is
@@ -366,6 +359,25 @@ class VideoJSTrackScrubber extends Button {
     }
   };
 
+  /**
+   * Set the elapsed time percentage and time as aria-now in the 
+   * progress bar of track scrubber
+   * @param {Number} trackpercent 
+   * @param {Number} trackoffset 
+   */
+  setTrackScrubberValue = (trackpercent, trackoffset) => {
+    document.documentElement.style.setProperty(
+      '--range-scrubber',
+      `calc(${trackpercent}%)`
+    );
+    const { trackScrubberRef } = this.options;
+    if (trackScrubberRef.current && trackScrubberRef.current.children) {
+      // Attach mouse pointer events to track scrubber progress bar
+      let [_, progressBar, __] = trackScrubberRef.current.children;
+      progressBar.setAttribute('aria-valuenow', trackoffset);
+    }
+  };
+
   /**
    * Convert pointer position on track scrubber to a time value
    * @param {Event} e pointer event for user interaction

diff --git a/src/components/StructuredNavigation/NavUtils/List.js b/src/components/StructuredNavigation/NavUtils/List.js
@@ -18,7 +18,7 @@ const List = (({ items, sectionRef, structureContainerRef }) => {
     <ul
       data-testid="list"
       className="ramp--structured-nav__list"
-      role="presentation"
+      role="list"
     >
       {items.map((item, index) => {
         return <ListItem

diff --git a/src/components/StructuredNavigation/NavUtils/ListItem.js b/src/components/StructuredNavigation/NavUtils/ListItem.js
@@ -99,8 +99,7 @@ const ListItem = ({
           : <>
             {isTitle
               ?
-              (<span className="ramp--structured-nav__item-title"
-                role="listitem"
+              (<span className='ramp--structured-nav__item-title'
                 aria-label={label}
               >
                 {label}
@@ -111,14 +110,15 @@ const ListItem = ({
                   {isClickable ? (
                     <>
                       {isEmpty && <LockedSVGIcon />}
-                      <a role="listitem"
+                      <a role='link'
+                        className='ramp--structured-nav__item-link'
                         href={homepage && homepage != '' ? homepage : id}
                         onClick={handleClick}>
                         {`${itemIndex}. `}{label} {duration.length > 0 ? ` (${duration})` : ''}
                       </a>
                     </>
                   ) : (
-                    <span role="listitem" aria-label={label}>{label}</span>
+                    <span aria-label={label}>{label}</span>
                   )}
                 </Fragment>
               )
@@ -133,6 +133,7 @@ const ListItem = ({
       <li
         data-testid="list-item"
         ref={liRef}
+        role="listitem"
         className={cx(
           'ramp--structured-nav__list-item',
           isSectionHeading ? 'section-list-item' : '',

diff --git a/src/components/StructuredNavigation/NavUtils/SectionHeading.js b/src/components/StructuredNavigation/NavUtils/SectionHeading.js
@@ -71,6 +71,8 @@ const SectionHeading = ({
   const collapsibleButton = () => {
     return (
       <button className='collapse-expand-button'
+        aria-expanded={!sectionIsCollapsed ? 'true' : 'false'}
+        aria-label={`${!sectionIsCollapsed ? 'Collapse' : 'Expand'} ${label} section`}
         data-testid='section-collapse-icon' onClick={toggleOpen}>
         <i className={cx(
           'arrow', !sectionIsCollapsed ? 'up' : 'down')}></i>
@@ -95,7 +97,6 @@ const SectionHeading = ({
           )}>
           <span className="ramp--structured-nav__title"
             aria-label={label}
-            role="listitem"
           >
             {isRoot ? '' : `${itemIndex}. `}
             {label}

diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss
@@ -156,6 +156,11 @@ ul.ramp--structured-nav__list {
     border-top: 1px solid $primaryLight;
   }
 
+  // Remove padding when line-height is set
+  li:has(.ramp--structured-nav__item-link) {
+    padding-bottom: 0;
+  }
+
   li {
     display: block;
     padding: 0 0 0.5rem 1em;
@@ -164,6 +169,11 @@ ul.ramp--structured-nav__list {
       vertical-align: middle;
     }
 
+    // Set line-height to create clickable space around link
+    .ramp--structured-nav__item-link {
+      line-height: 1.65em;
+    }
+
     ul {
       padding-left: 0.5em;
     }

diff --git a/src/components/Transcript/Transcript.js b/src/components/Transcript/Transcript.js
@@ -229,7 +229,7 @@ const TranscriptList = memo(({
 
   if (transcriptInfo.tError) {
     return (
-      <p key="no-transcript" id="no-transcript" data-testid="no-transcript" role="note">
+      <p key="no-transcript" id="no-transcript" data-testid="no-transcript" role="listitem">
         {transcriptInfo.tError}
       </p>
     );
@@ -371,6 +371,7 @@ const Transcript = ({ playerID, manifestUrl, showNotes = false, search = {}, tra
           className={cx('transcript_content', transcript ? '' : 'static')}
           data-testid={`transcript_content_${transcriptInfo.tType}`}
           role="list"
+          tabIndex={0}
           aria-label="Attached Transcript content"
           ref={transcriptContainerRef}
         >