[a11y]: HeaderPanel requires an aria-label but Accessibility Checker complains if you have one.

[kglickman]

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

1.23.0

React version

16.14.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

The tool is complaining about the aria-label in the HeaderPanel. If we remove it, the error goes away but we get an annoying error from checkPropTypes in the console saying it's required.
Warning: Failed prop type: HeaderPanel requires one of the following props: aria-label, aria-labelledby

WCAG 2.1 Violation

No response

Reproduction/example

Reproducible in the story book

Steps to reproduce

Look at the Accessibility section in the this url https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-actions-and-right-panel
https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-actions-and-right-panel

Code of Conduct

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

[btepe]

We ran into the same issue. Using an aria-label without a role is not allowed. What is missing here is either an aria-role attribute on the div element used for the HeaderPanel or using a semantic HTML element instead of the generic div. I would suggest using an aside element.

@kglickman Until this is implemented in the library, we can set the aria-role="complementary". This seems like the most appropriate role according to MDN web docs.

[kglickman]

I don't feel like either an "aside" element or a role of "complementary" are appropriate for a header. We would be silencing the Accessibility Checker but making the page more difficult to understand.

[btepe]

@kglickman Perhaps the role and element I suggested are not the best choice, which ones would you suggest using?

When you look at the Carbon docs on the right header panel, it states that the right panel is an optional panel that shows additional system level actions or content associated with a system icon in the header. This means that it can contain a variety of interactive elements and plain information, so it isn't necessarily part of the navigation as are the other elements in the header. To me using a nav element doesn't seem like the right choice because of this.

[kglickman]

We removed the aria label and the Accessibility Checker doesn't report an error anymore. This defect is about the prop being required, causing stacks in the console.

[tw15egan]

Needs to be backported to V10

[tw15egan]

Closed via #14517 , will be included in the next version of v10