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

fix(search): search button has a default aria label #7154

Merged
merged 4 commits into from
Jan 22, 2025
Merged

Conversation

mihai-albu-sage
Copy link
Contributor

@mihai-albu-sage mihai-albu-sage commented Jan 14, 2025

fixes: #7147

Proposed behaviour

When a button includes an aria-label attribute, screen readers prioritize the aria-label text over any visible content inside the button. This means the aria-label effectively replaces the visible text for accessibility purposes. If no aria-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 the searchButtonAriaLabel 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 the searchButtonAriaLabel 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 of search button instead of the button's text.

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

removed default value, if there is no value for searchButtonAriaLabel we use searchButtonText

fixes: #7147
@mihai-albu-sage mihai-albu-sage merged commit 1f7d7f5 into master Jan 22, 2025
28 checks passed
@mihai-albu-sage mihai-albu-sage deleted the FE-7036 branch January 22, 2025 10:29
@carbonci
Copy link
Collaborator

🎉 This PR is included in version 146.4.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

Search Button has a default aria label
5 participants