backpack icon indicating copy to clipboard operation
backpack copied to clipboard

[CLOV-145][BpkNavigationTabGroup] Adjust Accessibility behaviour

Open gert-janvercauteren opened this issue 8 months ago • 3 comments

BpkNavigationTabGroup

After reviewing this component's behaviour, we have concluded that when using href on items in the list, we should not mark them as tablist/tab. When a traveller activates one of the links in the component, navigation will take place, which does not match the behaviour we signpost when using the tablist role.

This PR addresses this concern and makes the component more compliant.

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 [Clover-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

gert-janvercauteren avatar Apr 22 '25 07:04 gert-janvercauteren

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

Warnings
:warning:

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?

:warning:

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 :no_entry_sign: dangerJS against 649aeef85ae7fe1fd332c16b63eee0c1a1e27eb2

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