samvera-labs / ramp

Interactive, IIIF powered audio/video media player React components library. Styleguidist Docs: https://samvera-labs.github.io/ramp/

https://ramp.avalonmediasystem.org/

30 stars 5 forks source link

Track scrubber missing aria-valuenow attribute #622

Closed elynema closed 1 week ago

elynema commented 3 months ago

Description

The SiteImprove accessibility checker browser plugin is indicating that there is an element with role="slider" that is missing the aria-valuenow attribute on the media object page. Looking at where that role occurs in the code, I believe that is in the Track scrubber. It does not appear to have an aria-valuenow attribute even when expanded.

I'm not seeing this issue show up in the SiteImprove site scanner or in WAVE, so it could be a false positive?

Done Looks Like

[ ] Evaluate whether this is someone requiring a change or fix
[ ] The missing value does appear in other places in Avalon; we can look to that for other examples

elynema commented 1 week ago

Not seeing the error for the track scrubber missing an ARIA attribute anymore, so that seems to be resolved.

@Dananji When I ran the SiteImprove tool against this page: https://avalon-dev.dlib.indiana.edu/media_objects/r207tp32d, I'm getting 2 errors that occur multiple times. One is about spacing around buttons / links, which I think is WCAG 2.2. The other is about hidden elements having focusable content. That sounds like part of WCAG 2.1.

Are you seeing this in your browser? I did try navigating the page via keyboard and also let a screenreader flow through the page, and it didn't seem like the cursor was navigating to anything hidden.

Dananji commented 1 week ago

@elynema Yes, I'm seeing these only in SiteImprove. And I tested another item that is public on both avalon-dev and on Ramp demo-site, the errors are only reported in avalon-dev. And the elements it's complaining about are the VideoJS error display modal and the captions setting modal, which are native to VideoJS.

elynema commented 1 week ago

@Dananji It makes sense why the spacing issues might not show up on the demo site, as the player is larger in that context. But I don't understand how the focus errors that refer to video.js components can show up in avalon-dev but not in Ramp.

Is there a difference in version of React or version of video.js or Bootstrap styling that could somehow cause the difference?

I took a peek at the HTML code for the captions settings modal. I see it has tab-index="-1" on the surrounding

where arid-hidden is applied on both avalon-dev and Ramp demo site. And the code appears the same between the 2 at first glance (I didn't do a diff). So I'm not sure what SiteImprove is complaining about.