[SF_ACC][Input]: Incorrect tabbing order in Input with suggestions

ksblklu commented 1 year ago

Bug Description

When use keyboard arrow keys to navigate the input suggestions, the clear icon was first read before the suggestions item. Also the inactive suggestion item is not read by screen reader.

Affected Component

ui5-input

Expected Behaviour

Once expands the input combobox and press arrow key -> Focus should move to "No matches" and it should announce by screenreader.

Isolated Example

No response

Steps to Reproduce

Go to https://codesandbox.io/p/sandbox/compassionate-snowflake-t48gy4?file=/src/App.tsx:44,28
Type any text in input field
Observe there were 1 suggestion item rendered below the input
Use arrow key navigate to the "No matches" suggestion item, with JAWS 2022.
The "clear icon" was read, and the suggestion item was not read by screen reader

Log Output, Stack Trace or Screenshots

Priority

Medium

UI5 Web Components Version

1.17.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

SuccessFactors

Declaration

[X] I’m not disclosing any internal or sensitive information.

elenastoyanovaa commented 1 year ago

Hello @ksblklu ,

The recommended testing environment is always latest JAWS (apart from pre-release versions). So you need to test with JAWS 2023 latest patch.

I was unable to open your testing sample as it says: "Unable to start the microVM" I have tested with the suggestions sample https://sap.github.io/ui5-webcomponents/nightly/playground/?path=/story/main-input--suggestions

Typed something - letter A
Arrow Down to suggestions
First list item is read out

Tested with JAWS 2023 and Chrome latest.

By analyzing your issue description I could assume three things:

Virtual Cursor is switched on, but it shouldn't be. Please check in which mode you are testing or your JAWS settings
The issue comes from the outdated version of JAWS.
There is some custom coding involving a custom suggestions popover or keyboard interaction, but I am unable to see your code as it is not opening

Nevertheless, the issue is not reproducible in the storybook sample, with the latest JAWS so I am closing this issue. If you update JAWS and still see the issue, please reopen the issue, provide another example or point to a storybook sample with detailed information about the steps to reproduce.

Kind Regards, Elena

ksblklu commented 10 months ago

Hi @elenastoyanovaa I checked the code sandbox example, it should be accessible now, and I tested it again with an inactive suggestionItem, still the inactive suggestion item was not read by NVDA/JAWS, could you please help check it? Thanks a lot.

ilhan007 commented 10 months ago

Hi colleagues @elenastoyanovaa @SAP/ui5-webcomponents-topic-rl can you re-check the issue with the latest information provided by the author.

elenastoyanovaa commented 10 months ago

Hello,

The inactive items are not read by design. They do not have a meaning to the screenreader user as they are options that could not be chosen. The sample you provided is not well construct as you are trying to show a message to a user by using suggestion items. Several points should be made here:

When there are no suggestions after input, we provide a message that no suggestions are found - in English: "No Results". So this information is provided to the screen reader users. Unfortunately, by adding this dummy item, which is not an actual item you interfere with this functionality as the input thinks that it has 1 suggestion available.
In order to provide messages to a user you can simply use a value state information.
You can also use a toast to show a message for a while
Suggestions are not a correct choice to inform users

Kind Regards, Elena

SAP / ui5-webcomponents