Fix(a11y/tabs) : move focusable element from <li> to <a>

[XinaICBF]

issue: 2171
issue: 2354
This PR addresses accessibility issues in the Tabs widget.

• Moves focus from
• elements to elements.
• Resolves the "nested interactive controls" warning raised by accessibility testing tools.
• Aligns with WAI-ARIA Authoring Practices for tabs.

[linux-foundation-easycla]

• ✅login: XinaICBF / name: xinaICBF / (317922a)
• ✅login: XinaICBF / name: xinaICBF / (317922a, a1e23ad)

The committers listed above are authorized under a signed CLA.

[mgol]

Thanks for the PR. However, the changes here are quite breaking, as the tabs property is publicly available and I don't think we can change what it points to.

You can also see tests are failing.

Are you willing to address these issues?

[XinaICBF]

Hi, the current jQuery UI Tabs markup uses:

<ul role="tablist">
  <li role="tab">
    <a href="#...">...</a>
  </li>
</ul>

This triggers a "nested interactive controls" accessibility warning because the <a> is inside a <li role="tab">.

A better approach, as shown in this Microsoft Teams example, is to use:

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#..." aria-controls="..." aria-selected="true">...</a>
  </li>
</ul>

This moves the interactive role and focus handling to the <a> element and avoids nesting issues.

I’ll explore this solution over the weekend and see what I can do.
Thanks!

[mgol]

I added some comments with my thoughts to #2365. If you'd like to continue working on it, please take them into account.