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.

Sign up for GitHub

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

Jump to bottom

[BD-9484][BpkInfoBannerExpandable] Fix an a11y issue #3751

Merged
merged 7 commits into from
Feb 20, 2025
Merged

[BD-9484][BpkInfoBannerExpandable] Fix an a11y issue #3751

merged 7 commits into from
Feb 20, 2025

Conversation

wuyq0808
Copy link
Contributor

@wuyq0808 wuyq0808 commented Feb 19, 2025 •
edited
Loading

Context

Fix a11y issue - element with button role can not be operable via keyboard

We identified this issue in hotels day-view:

Changes

  1. Change the toggle button from <button> to <div> and not clickable.
  2. Change the expendable header to a <button>.
  3. Style adjustments to maintain the original appearance.

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
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • 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

@wuyq0808 wuyq0808 added the minor Non breaking change label Feb 19, 2025
@wuyq0808 wuyq0808 changed the title Fix an a11y issue in BpkInfoBannerExpandable [BD-][BpkInfoBannerExpandable] Fix an a11y issue Feb 19, 2025
@wuyq0808 wuyq0808 changed the title [BD-][BpkInfoBannerExpandable] Fix an a11y issue [BpkInfoBannerExpandable] Fix an a11y issue Feb 19, 2025
@skyscanner-backpack-bot
Copy link

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

gert-janvercauteren
gert-janvercauteren reviewed Feb 19, 2025
View reviewed changes
packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Outdated
@@ -189,8 +178,12 @@ const BpkInfoBannerInner = ({
{...rest}
>
<section className={sectionClassNames} role="presentation">
<div
<BannerHeader
role={isExpandable ? 'button' : undefined}
Copy link
Contributor

@gert-janvercauteren gert-janvercauteren Feb 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

role button is not needed on a button, you might want to set type="button" when expandable :D

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Feb 19, 2025 •
edited
Loading

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 bcd9c44

@skyscanner-backpack-bot
Copy link

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

gert-janvercauteren
gert-janvercauteren reviewed Feb 20, 2025
View reviewed changes
Copy link
Contributor

@gert-janvercauteren gert-janvercauteren left a comment

Choose a reason for hiding this comment

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

Reviewed with keyboard and screen reader. Let me know if I can support on testing

packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Outdated
className={getClassName('bpk-info-banner__toggle-button')}
aria-label={props.label}
aria-expanded={props.expanded}
title={props.label}
Copy link
Contributor

Choose a reason for hiding this comment

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

We should remove the 'title' now that it's no longer a button

Copy link
Contributor Author

@wuyq0808 wuyq0808 Feb 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Good catch, thanks for reviewing!

packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Outdated
{props.expanded ? <CollapseIcon/> : <ExpandIcon/> }
</div>
</button>
{props.expanded ? <CollapseIcon /> : <ExpandIcon />}
Copy link
Contributor

Choose a reason for hiding this comment

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

We can add a Icon text or add altText to the icon to have 'view more' added.

Copy link
Contributor Author

@wuyq0808 wuyq0808 Feb 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Added as visually-hidden text so it is read in screen reader. Tried alt in icon but it's not read after the header message.

packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Outdated
<div
role={isExpandable ? 'button' : undefined}
<BannerHeader
aria-label={isExpandable ? toggleButtonLabel : undefined}
Copy link
Contributor

Choose a reason for hiding this comment

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

We shouldn't set the aria-label here, as it will override the visible text. (Look at the prev. comment)

Ideally the button screen reader should read:
{visible text}, {toggleButtonLabel}, <expanded|collapsed>, button

We also need to review the 'aria-controls' for this expand/collapse behaviour:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls

gert-janvercauteren
gert-janvercauteren reviewed Feb 20, 2025
View reviewed changes
packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Outdated
@@ -189,8 +178,11 @@ const BpkInfoBannerInner = ({
{...rest}
>
<section className={sectionClassNames} role="presentation">
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: This probably can be a div, and remove the role :D

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, removed it.

move view more label into the toggle button; add aria-controls; chang…
2420ec0 
…e section to div and remove role; remove deprecated comments
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@wuyq0808 wuyq0808 changed the title [BpkInfoBannerExpandable] Fix an a11y issue [BD-9484][BpkInfoBannerExpandable] Fix an a11y issue Feb 20, 2025
@wuyq0808 wuyq0808 marked this pull request as ready for review February 20, 2025 09:23
@skyscanner-backpack-bot
Copy link

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

mungodewar
mungodewar approved these changes Feb 20, 2025
View reviewed changes
Copy link
Contributor

@mungodewar mungodewar left a comment

Choose a reason for hiding this comment

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

LGTM

@mungodewar mungodewar merged commit 9fb1934 into main Feb 20, 2025
8 checks passed
@mungodewar mungodewar deleted the a11y-fix-bpk-info-banner-expandable branch February 20, 2025 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gert-janvercauteren gert-janvercauteren gert-janvercauteren left review comments

@mungodewar mungodewar mungodewar approved these changes

Assignees
No one assigned
Labels
Accessibility minor Non breaking change
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@wuyq0808 @gert-janvercauteren @mungodewar