fix(search): search button has a default aria label #7154
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fixes: #7147
Proposed behaviour
When a button includes an
aria-label
attribute, screen readers prioritize thearia-label
text over any visible content inside the button. This means thearia-label
effectively replaces the visible text for accessibility purposes. If noaria-label
attribute is present, it defaults to reading the button's visible text or any accessible content within it.With this in mind, I’ve removed the default value of
"search button"
for thesearchButtonAriaLabel
prop and opted to use the button’s visible text instead.This approach ensures that, in the absence of a specified value for
searchButtonAriaLabel
, the screen reader will read the button text by default. However, if a more explicit description is required, developers can set thesearchButtonAriaLabel
prop, and the screen reader will prioritize that instead.Current behaviour
Currently if we do not provide a value for
searchButtonAriaLabel
the screen readers will read out the default value ofsearch button
instead of the button's text.Checklist
d.ts
file added or updated if requiredQA
Additional context
Testing instructions