search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

"expanded" and "collapsed" states not announced by screen-reader when using `ui-select` #2392

Closed rama1990br closed 3 years ago

rama1990br commented 4 years ago

Describe the bug: "expanded" and "collapsed" states not announced by screen-reader when using ui-select

Expected behavior: The "expanded" and "collapsed" states should be announced by the screen-reader as seen in the screenshot below. This happens if the aria-expanded attribute is added to the ui-select element which is set based on the "expanded" or "collapsed" states of the select box. https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/Select.js image

Steps to reproduce the behavior: Go to https://sap.github.io/ui5-webcomponents/playground/components/Select/ Start up the screenreader (NVDA/Jaws) Tab to the select box under "Basic Select" and open the select box. The screen-reader does not read out "expanded" and "collapsed" when the select box is opened and closed respectively.

rama1990br commented 4 years ago

I have filed this issue for SuccessFactors, so can the "SF" label please be added to this issue?

jdichev commented 4 years ago

Hello, this issue will be looked into as part of the team's next sprint. Internal reference: 4904

dobrinyonkov commented 3 years ago

Hello @rama1990br,

the provided screenshot is from the example of a combobox, which is different from the one for select - Collapsible Dropdown Listbox.

According to this best-practices page the Collapsible Dropdown Listbox should be implemented as button with aria-expanded="true/false" aria-haspopup="true/false/TOKEN_VALUE" which is how the ui5-select in the ui5-webcomponents is currently implemented.

The issue here is that when aria-haspopup is set to a native button it’s role is promoted to BUTTONMENU (https://github.com/w3c/core-aam/issues/51) and is read out as button menu but the aria-expanded value is no longer read out by JAWS (https://github.com/FreedomScientific/VFO-standards-support/issues/358).

You can test in this html only example https://cdpn.io/stevef/debug/QXoEpx

We plan to change the ui5-select to use a native HTML select which will provide native accessibility behavior. See: https://github.com/SAP/ui5-webcomponents/issues/2485

Kind Regards, Dobrin