Every tablist on the page has the same accName

[aardrian]

Describe the bug

When navigating the tabs on the page, each tablist has the same accessible name. When announced by a screen reader a user may not immediately understand on which tablist they have landed.

Steps to reproduce the bug

1. Fire up your preferred screen reader.
2. Navigate to the Resources page.
3. Choose any tablist.
4. Observe it is announced as "tabs example" (or "tabs example tab control" or similar depending on your screen reader).

Expected Behavior

• A tablist's accName would correspond to the preceding heading.

Actual Behavior

• Every tablist's accName is "tabs example".

Related code

Each tablist is made up of this elided HTML:

<div role="tablist" aria-orientation="vertical" aria-label="tabs example" […] tabindex="0" […]>

You can confirm there are 12 on this page by searching (Ctrl + F in browser dev tools) with this XPath:

//div[@role="tablist"][@aria-label="tabs example"]

Additional Context

The code as shown is problematic under the following WCAG 2.1 Success Criterion:

• 2.4.6 Headings and Labels (because the control name is not descriptive)

Consider using aria-labelledby to reference the preceding heading.

I suggest this over aria-label because aria-label does not auto-translate consistently.

You will also need to add id values to the headings (or the <span>s in the headings owing to the hidden link) for this to work.

The resultant code might look like this:

<h3 class="[…] BlockTitleText">
    […]
    <span […] id="H3_people">
        People
    </span>
</h3>
[…]
<div role="tablist" aria-labelledby="H3_people" […]>

This would announce as "People tab control" in NVDA ("tab control" comes for free from using role="tablist").