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

[ACC-632][BpkCalendarGrid]: Fix accessibility issue - grid has no accessible name #3752

Merged

Conversation

Supremeyh
Copy link
Contributor

@Supremeyh Supremeyh commented Feb 20, 2025

Context

The BpkCalendarGrid have some accessibility issues. This causes some high severity issues on the Opex report in AQA.

  • WAI-ARIA grid role doesn't have an accessible name
  • User interface component doesn't have an accessible name

Snapshots

Test in storybook for BpkCalendarGrid changes

Before After

Test in consumer month view page, the issues decreased

Before After

Change description

  • Add aria-label with formatMonth(month) to BpkCalendarGrid
  • Pass through formatMonth to BpkCalendarGrid and BpkScrollableCalendarGrid

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

@Supremeyh Supremeyh self-assigned this Feb 20, 2025
@Supremeyh Supremeyh added patch Patch production bug Accessibility labels Feb 20, 2025
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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 bf6cecc

@Supremeyh Supremeyh marked this pull request as ready for review February 20, 2025 10:34
@jronald01 jronald01 merged commit 7e71b87 into main Feb 20, 2025
8 checks passed
@jronald01 jronald01 deleted the pg/acc-543_fix_bpkcalendar_grid_has_no_accessible_name branch February 20, 2025 11:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility patch Patch production bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants