You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
Detailed description
Element location:
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.
Steps to reproduce the issue
Open this link: https://vue.carbondesignsystem.com/?path=/story/components-cvuishell--header-base-with-actions-and-right-panels
Install IBM’s Accessibility checker extension for Firefox.
Run IBM’s Accessibility checker scan (See screenshot below for more details).
Additional information
The text was updated successfully, but these errors were encountered: