New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Component "RangeInput.jsx" in the AdvancedExample page is completely inaccessible #130

Open

OwenEdwards opened this issue Oct 6, 2021 · 1 comment

Labels

a11y

Member

OwenEdwards commented Oct 6, 2021

The RangeInput.jsx component (https://github.com/videojs/videojs.com/blob/main/src/components/RangeInput.jsx) creates a range slider made out of <span>s and <div>s which is not accessible for keyboard-only users, and does not have any markup to label its name, role, and state/value for screen reader users:

<div class="RangeInput__Wrapper-sc-1cg2h3q-0 fyFmFx">
  <div class="RangeInput__Labels-sc-1cg2h3q-1 gyjvOD">
    <span>Volume</span>
    <span>39</span>
  </div>
  <div class="css-vwoj9o">
    <div class="css-v50dlc" style="width: 39%;"></div>
    <div class="css-inwnox" style="top: 0%; left: 39%;"></div>
  </div>
</div>

The text was updated successfully, but these errors were encountered:

OwenEdwards added the a11y label

Member

gkatsev commented Oct 13, 2021

Thanks for looking at this @OwenEdwards, it used to be an input element (https://github.com/videojs/videojs.com/pull/51/files#diff-54f365e81aca3df342aebdf40990d609f3380c435c13d66f80e3555e64432e8aR82) but then @mmcc changed in the website rewrite 😜

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment