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

[IRN-5693][BpkModal] Support dialog a11y label when no header #3767

Merged
merged 3 commits into from
Mar 12, 2025
Merged

[IRN-5693][BpkModal] Support dialog a11y label when no header #3767

merged 3 commits into from
Mar 12, 2025

Conversation

steviehailey-skyscanner
Copy link
Contributor

@steviehailey-skyscanner steviehailey-skyscanner commented Mar 11, 2025 •
edited
Loading

Screenshots

No visual change

image

a11y DOM Before - role dialog with no a11y label

image

a11y DOM After - role dialog now has a11y label

image

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 11, 2025 •
edited
Loading

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?
⚠️

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 cf4de5d

steviehailey-skyscanner
steviehailey-skyscanner commented Mar 11, 2025
View reviewed changes
packages/bpk-component-modal/src/BpkModalInner.tsx
@@ -125,6 +127,7 @@ const BpkModalInner = ({
tabIndex={-1}
role="dialog"
aria-labelledby={showHeader ? headingId : undefined}
aria-label={!showHeader ? ariaLabel : undefined}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Could skip this guard but seems sensible to protect the consumer from providing a title and aria label
(also considered using title as guard but showHeader is more consistent with other guards)

steviehailey-skyscanner
steviehailey-skyscanner commented Mar 11, 2025
View reviewed changes
packages/bpk-component-modal/src/BpkModalInner.tsx
@@ -62,6 +63,7 @@ export type ModalStyle = (typeof MODAL_STYLING)[keyof typeof MODAL_STYLING];

const BpkModalInner = ({
accessoryView = null,
ariaLabel,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Considered piggy-backing on the existing title prop since not used in a "no header" scenario this feels cleaner and simpler from consumer PoV (and not much extra code logic on our part)

steviehailey-skyscanner
steviehailey-skyscanner commented Mar 11, 2025
View reviewed changes
examples/bpk-component-modal/examples.tsx
@@ -230,8 +230,7 @@ const NestedExample = (isOpen: boolean) => (

const NoHeaderExample = (isOpen: boolean) => (
<ModalContainer
title="Modal title"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Existing demo passed 2 unused fields - removed

steviehailey-skyscanner
steviehailey-skyscanner commented Mar 11, 2025
View reviewed changes
examples/bpk-component-modal/examples.tsx
@@ -230,8 +230,7 @@ const NestedExample = (isOpen: boolean) => (

const NoHeaderExample = (isOpen: boolean) => (
<ModalContainer
title="Modal title"
closeLabel="Close modal"
ariaLabel="Modal title"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Use new field in "no header" demo

@steviehailey-skyscanner steviehailey-skyscanner added the minor Non breaking change label Mar 11, 2025
steviehailey-skyscanner
steviehailey-skyscanner commented Mar 11, 2025
View reviewed changes
packages/bpk-component-modal/src/BpkModalInner-test.tsx
);

expect(screen.queryAllByRole('heading')).toHaveLength(0);
expect(screen.getByRole('dialog')).toHaveAttribute('aria-label', 'Modal title');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Test new logic

steviehailey-skyscanner
steviehailey-skyscanner commented Mar 11, 2025
View reviewed changes
packages/bpk-component-modal/src/BpkModalInner-test.tsx
);

expect(screen.getByRole('heading')).toHaveTextContent('Actual title');
expect(screen.getByRole('dialog')).toHaveAccessibleName('Actual title');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Verify favours title if aria label also provided when not required

@skyscanner-backpack-bot
Copy link

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

@steviehailey-skyscanner steviehailey-skyscanner marked this pull request as ready for review March 11, 2025 15:49
metalix2
metalix2 approved these changes Mar 12, 2025
View reviewed changes
Copy link
Contributor

@metalix2 metalix2 left a comment

Choose a reason for hiding this comment

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

Great stuff! Thanks @steviehailey-skyscanner

@metalix2 metalix2 merged commit e36769d into main Mar 12, 2025
8 of 9 checks passed
@metalix2 metalix2 deleted the IRN-5693 branch March 12, 2025 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@metalix2 metalix2 metalix2 approved these changes

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

Successfully merging this pull request may close these issues.
2 participants
@steviehailey-skyscanner @metalix2