[Input]: keyboard navigation issue for input suggestion in JAWS
Describe the bug
[Input]: keyboard navigation issue for input suggestion in JAWS -Can not navigate to all item in input suggestions with keyboard in JAWS. Focus is stuck on one item after navigating few items and JAWS is announcing background element.
Isolated Example
No response
Reproduction steps
- Open JAWS 2024
- Go to https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-input--docs
- Go to "Input with customizable SuggestionItem" section
- enter "a" in input box
- Start navigating to suggestion items with keyboard
Observed that focus is stuck on 7th item and JAWS started announcing background element.
Expected Behaviour
All items should be navigable through keyboard in JAWS. Focus should not be lost.
Screenshots or Videos
No response
UI5 Web Components for React Version
1.29.3
UI5 Web Components Version
1.24.0
Browser
Chrome, Edge
Operating System
Windows 11
Additional Context
No response
Relevant log output
No response
Organization
SuccessFactors
Declaration
- [X] I’m not disclosing any internal or sensitive information.
Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.
Dear @SAP/ui5-webcomponents-topic-rl ,
I could reproduce this issue when JAWS is running. Follow the steps reported by @pankajpandey01. When navigating through the suggestion items with the arrow keys, the navigation gets stuck at "Iceland" and item "Moldova" is never reached. If JAWS is not running, the issue is not reproduced when navigating with the arrow keys.
I also tested on 1.124 and the 2.0.0-rc.6 and normal suggestions (not custom). The issue there is even more severe, as the navigation through items gets stuck at the first suggestion item. Again it is only reproduceable when JAWS is running and reading the items.
For reference - the problem does not exist in combo-box.
Kind regards, Nikoleta Terzieva
I could not reproduce the issue with NVDA reader on Windows.
There are several issues to be fixed herehere:
- The role of the list should be changed to listbox and the listitem roles to option. This is to be done in both 2.0 and 1.24. For 2.0 we should like in: https://github.com/SAP/ui5-webcomponents/pull/9611 .For 1.24 accessible-role attribute for the list and listitem should be set
- Unfortunately the above adjustment does not solve the issue, because the most severe problem is that the list item receives a tabindex="0" which really confuses JAWS and it switches modes until getting stuck. The tabindex="0" should not be set. I tried setting the
forced-tab-indexbut this did not worked so I started overwritingeffectiveTabIndexof theListItemBasein all our types of suggestion items and it seems that this might work, but it was a lot of effort and I did not have the capacity to finish it. Removing the tabindex will resolve the issue for both versions. Should be applied to all items - groups, suggestions.
Kind Regards, Elena
main is merged, waiting for #10304 https://github.com/SAP/ui5-webcomponents/pull/10355
:tada: This issue has been resolved in version v2.6.0-rc.0 :tada:
The release is available on v2.6.0-rc.0
Your semantic-release bot :package::rocket: