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

[SF] ViewSettingsDialog: A11y focusing issue #4373

Closed Vir-Mittal closed 2 years ago

Vir-Mittal commented 2 years ago

Describe the bug

  1. In Windows OS, when using NVDA screen reader and using arrow keys to switch between radio button options in the ViewSettingsDialog component, the focus doesn't change, which in MacOS, the focus changes.
  2. In MacOS, when using VoiceOver and using arrow keys to switch between radio button options in the ViewSettingsDialog component, the focus changes, but the item name is not read out.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-viewsettingsdialog--default-story
  2. Turn on NVDA
  3. Open the dialog
  4. Use arrow keys to change the selected options

Expected behavior Using the arrow keys should change which option is focused and that option should be announced clearly on all operating systems.

UI5 Web Components for React Information @ui5/webcomponents version: "0.31.21" @ui5/webcomponents-react version: "0.131.23" @ui5/webcomponents-fiori version: "0.31.21" Operating System: Windows and MacOS Browser: Chrome

Additional context For SAP Successfactors

MarcusNotheis commented 2 years ago

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

niyap commented 2 years ago

Hello @SAP/ui5-webcomponents-topic-b,

After an analysis from my side, the faced issue is reproducible, because the NVDA mode is changed from "Focus" to "Browse" by itself. If you change the mode to "Focus" manually and then follow the described steps, the issue will not be reproducible anymore. I am forwarding the incident to you for further analysis, because with JAWS as a screen reader, that does not happen. The mode is not changed automatically and the issue is not reproducible. Also, I checked the ViewSettingsDialog control in OpenUI5 using NVDA and the issue is not reproducible there.

So, please check why the mode of NVDA is automatically changed when the ui5-view-settings-dialog component is open. If the issue is caused by the screen reader and we could not do anything, in order to fix it, then the users have to change the NVDA mode to "Focus" using Insert + Space in order to make it possible moving the focus to the second option and the necessary information to be read out.

Could you please look over?

Kind Regards, Niya

unazko commented 2 years ago

Hello @SAP/ui5-webcomponents-topic-p,

The issue is reproducible for the standalone ui5-list component on the following URL: https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-list--default-story and with the latest versions as well: https://codesandbox.io/s/happy-cdn-f6m6e?file=/src/App.js

Steps to reproduce: 1) Open one of the provided links 2) Start NVDA 3) Tab into the list items 4) Try to navigate with arrow up/down keyboard keys

For issue analysis please refer to @niyap's message.

Best Regards, Boyan

nnaydenow commented 2 years ago

Hello colleagues,

I'm adding this quote from the documentation of NVDA screen reader where automatically switching is described:

https://www.nvaccess.org/files/nvda/documentation/userGuide.html#BrowseMode

Sometimes, you will need to interact directly with controls in these documents. For example, you will need to do this for editable text fields and lists so that you can type characters and use the cursor keys to work with the control. You do this by switching to focus mode, where almost all keys are passed to the control. When in Browse mode, by default, NVDA will automatically switch to focus mode if you tab to or click on a particular control that requires it. Conversely, tabbing to or clicking on a control that does not require focus mode will switch back to browse mode. You can also press enter or space to switch to focus mode on controls that require it. Pressing escape will switch back to browse mode. In addition, you can manually force focus mode, after which it will remain in effect until you choose to disable it.

As it is described in the documentation this behaviour is automatically controlled by the screen reader and you have to force it to be a "Focus" mode.

Regards, Nayden