[a11y]: Switcheritem tag giving accessibility error

[Mahalakshmivignesh]

Package

@carbon/react

Browser

Chrome

Operating System

No response

Package version

1.58.1

React version

No response

Automated testing tool and ruleset

IBM Equal accessibility checker

Assistive technology

No response

Description

Hi all, element with only aria-label is giving accessibility error . the corresponding tag generated by the carbon has role as generic. Error - The ARIA attributes “aria-label” are not valid for the element with implicit ARIA role “generic” . The switcher item i am using is without href link. Hence, i believe, the role is assigned as generic. I tried to assign the role explicitly for the switcher item. but it is not an accepted property of the switcher item tag.

WCAG 2.1 Violation

No response

Reproduction/example

Unable to recreate the issue with the template

Steps to reproduce

Declare a header container with header panel code sample given below:

<HeaderPanel
                        expanded={isSideNavExpanded}
                        href="#test"
                    >
                        <Switcher aria-label="Switcher Container">
                            <SwitcherItem aria-label="user">
                                "user01"
                            </SwitcherItem>
                        </Switcher>
                    </HeaderPanel>

Suggested Severity

None

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[alisonjoseph]

Looks like the issue you are seeing is because aria-label doesn't match the link text. `

these values needs to match`

[Mahalakshmivignesh]

Hi, this is not resolving the issue when the switcher tag doesnt have href link. From the error it seems that the tag generated for the switcher item is expecting a role. but when there is no href, the role is generic. for a generic role, aria-label cant be added. so we shud

1. able to add role for the tag generated by switcher tag. or
2. able to remove the aria-label from the switcher tag when href is not provided

@2nikhiltom would you be able to take a look at this? You're probably most familiar due to your work on https://github.com/carbon-design-system/carbon/pull/16043

[2nikhiltom]

Hey ! I have two observations

1 ) It is evident from the docs that a SwitcherItem is always expected to have a link/href to redirect somewhere when clicked

https://carbondesignsystem.com/components/UI-shell-right-panel/usage/

@Mahalakshmivignesh : Could you please help us understand the useCase of code you shared i.e SwitcherItem without a href

<HeaderPanel
                        expanded={isSideNavExpanded}
                        href="#test"
                    >
                        <Switcher aria-label="Switcher Container">
                            <SwitcherItem aria-label="user">
                                "user01"
                            </SwitcherItem>
                        </Switcher>
                    </HeaderPanel>

2) Also I feel we can add a role='link' to the SwitcherItem component

[Mahalakshmivignesh]

@2nikhiltom - In my case, it is. display only field & there is no link associated with it. On clicking the header button , the switcher field shud display the username and there is no link attached to that.

[Mahalakshmivignesh]

Error screenshot -

[Mahalakshmivignesh]

the href attribute is optional for the switcher tag. If in any case, we don't supply the href, the role not getting assigned and i also cant add the role attribute to the switcheritem/switcher tag.

[2nikhiltom]

Hi @Mahalakshmivignesh ,

1) SwitcherItem is always expected to have a link (href) to redirect somewhere when clicked. In your example, it displays a username without a link. A workaround is to pass an empty link (#), I personally would not recommended it but it bypasses the accessibility error

• Also under the hood, SwitcherItem uses PolymorphicProps logic, and the as prop allows specifying any HTML element or React component to render the Link component

• In your case, you could use something like this

<SwitcherItem as={React.node}>{user.name}</SwitcherItem>

• Here is an stackblitz_example

2) Something like Profile menu could also be used instead

@tay1orjones | @laurenmrice Any thoughts on this ?