Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - SearchInput - result implementation lacks context #11398

Open
thatblindgeye opened this issue Jan 9, 2025 · 0 comments
Open

Bug - SearchInput - result implementation lacks context #11398

thatblindgeye opened this issue Jan 9, 2025 · 0 comments

Comments

@thatblindgeye
Copy link
Contributor

Describe the problem
When the resultCount prop is used, the rendered badge lacks context for what the number/string is for when navigated via AT. The match with result count example displays "3" in a badge, but when announced via VoiceOver it may not be clear what "3" means. A similar issue arrises in the "Match with navigable options" example.

Ideally either a React node could be passed to the resultCount prop, so that screen reader text could be suffixed onto the result amount (e.g. <span>3 <span className="pf-v6-u-screen-reader">results</span></span>, or another prop is introduced to customize the word/phrase that comes after the resultCount that we render inside that screen reader class ourselves.

Note that once this is resolved in React, we should open a followup in Core to update any TextInputGroup > search input group examples to match markup.

How do you reproduce the problem?
Go to either of the above example and navigate/interact with VoiceOver. Notice after typing in the input and navigating to the result count, it isn't totally clear what "three" or "one slash three" means.

Expected behavior
More context is provided by the result count.

Is this issue blocking you?
List the workaround if there is one.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs triage
Development

No branches or pull requests

1 participant