Chrome version Please confirm that the following version information is correct.
Chrome version: 87.0.4280.66 Operating system: Linux Version: Ubuntu 20.04 Channel: Stable Flash version:
Details for problems with API: Please enter a one-line summary: aria-orientation is ignored on input[type="range"] Which component does this fall under?
Not sure - I don't know Do you have a reduced test case? Yes - Please attach the file here No file chosen Remove Attach another file Max. attachments: 10.0 MB No - I realize that it is harder to resolve problems that lack test cases Does this feature work correctly in other browsers? Tip: Use browserstack.com to compare behavior on different browser versions.
No - I can reproduce the problem in another browser Details of interop issue Please describe what the behavior is on other browsers and link to any existing bugs.
Same behavior in Firefox Steps to reproduce the problem:
- Render
- Focus element What is the expected behavior?
- JAWS announces it as "up/down slider"
- the accessibility panel in devtools computes "orientation" to "vertical" What went wrong?
- JAWS announces it as "left/right slider"
- the accessibility panel in devtools computes "orientation" to "horizontal" Attach a file Did this work before?
Not applicable or don't know Any other comments? Live reproduction: https://poqq4.csb.app/
The reproduction is a minimal version of a component implementing https://www.w3.org/TR/wai-aria-practices-1.1/examples/slider/slider-2.html. But instead of a div we're piggy-backing on the native input so that the component is operable in VoiceOver. Full component can be inspected on https://deploy-preview-23902--material-ui.netlify.app/components/slider/#vertical-sliders
Workaround:
If I style the input with appearance: slider-verical the computed orientation is "vertical" as expected.