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

[ic-page-header] storybook accessibility plug in complaining of two elements with role="banner" #1908

Closed
GCHQ-Developer-530 opened this issue May 23, 2024 · 3 comments
Assignees
Labels
type: bug 🐛 Something isn't working
Milestone

Comments

@GCHQ-Developer-530
Copy link
Contributor

GCHQ-Developer-530 commented May 23, 2024

Summary of the bug

On storybook examples of page header with top nav, the built in storybook accessibility plug in is failing due to two elements having a banner role and all roles should be unique.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

  1. Go to page-header sticky-with-content-and-footer example
  2. Click on accessibility plug in in the drawer
  3. See the error

alternatively the error can be replicated on our https://design.sis.gov.uk/top-navigation-page-header-pattern/
If you do a full page scan using the 'axe Dev Tools' browser plugin, it appears as a moderate issue.
If you do an Accessibility Assessment using the IBM Equal Access Accessibility Checker it also appears.

📸 Screenshots or code

Screenshot 2024-05-23 at 14 38 12

🧐 Expected behaviour

It should only have one banner.

Additional info

Weirdly page header doesn't have a banner role. This doesn't fail accessibility insights fast pass either so it's hard to tell if it's a weird quirk of storybook or not.

@GCHQ-Developer-530 GCHQ-Developer-530 added the type: bug 🐛 Something isn't working label May 23, 2024
@MI6-255 MI6-255 added this to the PI 8 V.2 milestone Jul 3, 2024
@gd2910
Copy link
Contributor

gd2910 commented Jul 4, 2024

Investigate ways around this, consider https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role

Or conditional role on IcPageHeader when in conjunction with IcTopNavigation

@gd2910
Copy link
Contributor

gd2910 commented Jul 4, 2024

Test IcTopnavigation and IcPageHeader layout patterns to recreate issue.

@MI6-255
Copy link
Contributor

MI6-255 commented Jul 10, 2024

Take banner off Page Header and find a role to replace it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug 🐛 Something isn't working
Projects
Development

When branches are created from issues, their pull requests are automatically linked.

3 participants