"4.1.2 Name, Role, Value" violations for tab headers in certain situations

[sjhowell]

Brief description

Different "4.1.2 Name, Role, Value" violations for tab headers are reported in certain situations by the "IBM Equal Access Accessibility Checker" plugin.

Environment

• Operating system: Windows and Mac
• Browser: Firefox and Chrome
• Automated testing tool and ruleset: IBM Accessibility Equal Access Toolkit
• Assistive technology used to verify: IBM Accessibility Equal Access Toolkit

Detailed description

Our products have a shared UI framework into which our pages "plug in" as React components. The UI framework provides general landing page, header, menu, and navigation functionality. It supports the option of having a "tabbed header" which is a header containing two or more tab headers eg:

Because this is part of a general framework, the headers come from one repository, and the content of the "tabs" come from another. In fact, the content is done simply by specifying a route on the Node server which will serve the content for the "tab page", via the onClick for each Tab, thus:

<Tabs
  onSelectionChange={
    selectedIdx => app.setRoute(tabsWithInfo[selectedIdx].url)
  }
  selected={selectedTabIdx}
>
  {
    tabsWithInfo.map((tab, idx) => (
      <Tab
        key={tab.url}
        tabIndex={idx}
        label={tab.name}
        onClick={() => app.setRoute(tab.url + queryString)}
      />
    ))
  }
</Tabs>

The normal usage of the Carbon React Tab is that it would be given "children" nodes which represent the content of the associated tab page. However, because this cannot be done in our situation (due to the separation of headers and tab content into different repos), the concept above of using the "onClick" to change the route for the lower content of the page is used.

This is obviously not a situation that the Carbon React components have been intended to cope with (so this is arguably an enhancement request more than a defect). As such, Carbon React still creates some of the content that it would if there WERE tab pages, as this leads to accessibility violations

So, for example, the HTML for the page ends up with this kind of thing for the tabs:

<li role="presentation" class="bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected"><button type="button" role="tab" aria-selected="true" aria-controls="tab-1__panel" id="tab-1" class="bx--tabs--scrollable__nav-link" href="#" tabindex="0">Merge</button></li>

which results in the IBM Accessibility Equal Access Toolkit reporting this violation:

Then, further to this, "empty/blank" tab pages are created for each tab, which have no content in them. such as this:

<div role="tabpanel" class="bx--tab-content"></div>

which results in the IBM Accessibility Equal Access Toolkit reporting this violation:

• What version of the Carbon Design System are you using? 7.25.0
• What did you expect to happen? If no tab content is provided for a Tab component, Carbon React should omit the aria-controls for that tab and should not create a div for the tab
• What happened instead? Accessibility violation occurred
• What WCAG 2.1 checkpoint does the issue violate? "4.1.2 Name, Role, Value"

Steps to reproduce the issue

• Add a Tabs component to your HTML page
• Add two or more Tab components beneath it but without them having any child content
• Render the page
• Observe the a11y violations raised by the IBM Accessibility Equal Access Toolkit