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

[DTO-5004][BpkInfoBanner] Remove Alert Role #3142

Merged
merged 2 commits into from
Jan 9, 2024
Merged

[DTO-5004][BpkInfoBanner] Remove Alert Role #3142

merged 2 commits into from
Jan 9, 2024

Conversation

Iain530
Copy link
Member

@Iain530 Iain530 commented Jan 4, 2024

Currently when an info banner is render on a page, the screenreader will immediately switch to reading out the title text. This happens because we treat the info banner as an alert for screen readers. The documentation says the alert role shouldn’t be used for elements rendered on page load. Since this component is used more as a styling container than an alert dialog it should only be read in the normal page flow.

Bug caused by alert role (sound on)

RPReplay_Final1701948086.2.MP4

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@Iain530 Iain530 added the patch Patch production bug label Jan 4, 2024
@@ -189,7 +188,7 @@ const BpkInfoBannerInner = ({
show={show}
{...rest}
>
<section className={sectionClassNames} role="alert">
<section className={sectionClassNames} role="presentation">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

presentation seemed like the most sensible value to me here as it removes it as a landmark which this probably. These banners are probably to be used as part of a section of the page and not contain a whole section themselves? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

Copy link

github-actions bot commented Jan 4, 2024

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against c4a9b86

Copy link

github-actions bot commented Jan 4, 2024

Visit https://backpack.github.io/storybook-prs/3142 to see this build running in a browser.

@Iain530 Iain530 requested a review from olliecurtis January 9, 2024 10:09
Copy link

github-actions bot commented Jan 9, 2024

Visit https://backpack.github.io/storybook-prs/3142 to see this build running in a browser.

@olliecurtis olliecurtis merged commit c946189 into main Jan 9, 2024
9 checks passed
@olliecurtis olliecurtis deleted the DTO-5004 branch January 9, 2024 10:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Patch production bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants