search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
608 stars 178 forks source link

Accessibility issue on cv-header-panel #1421

Closed isaquebenatti closed 1 month ago

isaquebenatti commented 1 year ago

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 commented 1 year ago

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.

github-actions[bot] commented 3 months ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.

github-actions[bot] commented 1 month ago

This issue has been closed because it has received no activity for 28 days.