You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
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?
What is your product and what release date are you targeting?
Any other information?
The text was updated successfully, but these errors were encountered: