[Bug][SF][1.29.10][Input][A11y][Expected Fixed Time: ASAP] In JAWS browse mode, focus appears on the clear graphic icon and it is announced as 'clear graphic' in the search input field
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 285
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 59
Description
Describe the bug
With JAWS, when a user navigates with the keyboard to the input field and types something, then switches to VPC mode and uses the arrow key to navigate in the search input field -> Observe that the clear icon appears in the input field and is announced as 'clear graphic' which is incorrect.
Isolated Example
https://sap.github.io/ui5-webcomponents-react/v1/?path=/story/inputs-input--with-suggestion-item
Reproduction steps
Switch showClearIcon to true.
With JAWS, when a user navigates with the keyboard to the input field and types something, then switches to VPC mode and uses the arrow key to navigate in the search input field -> Observe that the clear icon appears in the input field and is announced as 'clear graphic' which is incorrect.
Expected Behaviour
Ensure that the focus should not appear on the clear graphic icon and it should not read in VPC mode
Screenshots or Videos
UI5 Web Components for React Version
1.29.10
UI5 Web Components Version
1.24.4
Browser
Edge
Operating System
No response
Additional Context
No response
Relevant log output
No response
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked isolated Input example and reproduce the behavior with showClearIcon enabled, JAWS, Edge, and VPC mode. Trace the Input component's focus behavior and verify that keyboard navigation no longer exposes or announces the clear icon.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100