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

Accessibility issue on cv-header-panel #1421

Open
isaquebenatti opened this issue Feb 23, 2023 · 1 comment
Open

Accessibility issue on cv-header-panel #1421

isaquebenatti opened this issue Feb 23, 2023 · 1 comment

Comments

@isaquebenatti
Copy link

Detailed description

Describe in detail the issue you're having.
I’m having accessibility issues using Header with right panel component. When I run the IBM’s Accessibility checker scan in my project I’m getting the error: Element “a” should not be focusable within the subtree of an element with an ‘aria-hidden’ attribute with value ‘true’. So I checked carbon’s website/storybook and I got the same issue.

Element location:

<a
  class="cv-switcher-item-link bx--switcher__item-link bx--switcher__item-link--selected"
  href="javascript:void(0)">

In addition to this issue, I noticed that the navigation may also be incorrect. I can navigate inside the right panel even it is not expanded using the tab.

Is this a feature request (new component, new icon), a bug, or a general issue?
Bug(Accessibility)

Is this issue related to a specific component?
cv-header-panel

What did you expect to happen? What happened instead? What would you like to see changed?
I expected the IBM’s Accessibility checker scan display this component as compliant. Element “a” should not be focusable within the subtree of an element with an ‘aria-hidden’ attribute with value ‘true’ and I can navigate inside the right panel even it is not expanded using the tab. I'd like to use links on this component and not navigate inside the right panel when it is collapsed.

What browser are you working in?
Firefox browser - 110.0 (64-bit) - MacOS Ventura 13.2.1

What version of the Carbon Design System are you using?
Carbon version: "@carbon/vue": "^2.45.1"

Any pressing ship or release dates we should be aware of?
Yes, the release date is March 31st.

Steps to reproduce the issue

  1. Step one
    Open this link: https://vue.carbondesignsystem.com/?path=/story/components-cvuishell--header-base-with-actions-and-right-panels
  2. Step two
    Install IBM’s Accessibility checker extension for Firefox.
    Run IBM’s Accessibility checker scan (See screenshot below for more details).

Additional information

image

@davidnixon
Copy link
Collaborator

This was originally written against Vue 2 components but is a good candidate for a new accessibility test. See guidance on how to add a test and resolve any issues found.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants