fix(tab-overflow): improve tab navigation experience and support custom aria labels

[blaabaer]

<sp-tab-overflow> is an optional add-on to the Tabs component that adds a [<] and [>] button to help scroll, if there are so many tabs that they overflow off the page. These buttons are currently Keyboard-Navigable, and capture tab focus before the TabGroup itself.

These buttons should be removed from keyboard navigation for the following reasons:

• Keyboard navigators can already use their arrow keys to navigate through the entire TabGroup
• Every time keyboard navigation enters the TabGroup component, it will always initially focus the very first Tab, regardless of whether it is currently rendered on or off the page.

Therefore, it is superfluous to have these buttons part of the tab navigation journey.

In addition, these buttons were not labeled. This PR gives them default aria-labels and allows overrides. These default labels are "Scroll to previous tabs" and "Scroll to next tabs" - specifically avoided left/right language in case of Right-To-Left locales.

Related issue(s)

• Fixes [Bug][a11y]: Tabs overflow component has action buttons that don't necessarily need keyboard focus #3270

Motivation and context

• Improves Keyboard Accessibility by removing UI that is not relevant to Keyboard Navigation experience.
• Improves Screenreader Accessibility by labeling interactive components.

How has this been tested?

• On Storybook and on the Docs website:
  1. Navigate to "Tabs Overflow"
  2. Observe that the Overflow buttons are no longer keyboard navigable, and arrow-key + spacebar navigation works correctly to move between tabs.
  3. Inspect the Overflow buttons and observe that they have default labels: "Scroll to previous tabs" and "Scroll to next tabs".

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions]

Branch preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.97	0.98	0.97
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	242.306 kB	229.009 kB	227.694 kB 🏆
Scripts	61.053 kB	54.66 kB	54.582 kB 🏆
Stylesheet	48.725 kB	42.46 kB	41.252 kB 🏆
Document	5.816 kB	5.177 kB	5.148 kB 🏆
Third Party	126.712 kB	126.712 kB	126.712 kB

Request Count

Category	Latest	Main	Branch
Total	43	43	43
Scripts	35	35	35
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

[github-actions]

Tachometer results

Chrome

tabs permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	423 kB	101.74ms - 103.12ms	-	unsure 🔍 -2% - +1% -2.41ms - +1.02ms
branch	414 kB	101.56ms - 104.70ms	unsure 🔍 -1% - +2% -1.02ms - +2.41ms	-

top-nav permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	429 kB	75.76ms - 77.12ms	-	unsure 🔍 -3% - +1% -2.19ms - +0.63ms
branch	420 kB	75.98ms - 78.46ms	unsure 🔍 -1% - +3% -0.63ms - +2.19ms	-

Firefox

tabs permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	423 kB	210.45ms - 217.27ms	-	unsure 🔍 -1% - +3% -2.93ms - +6.69ms
branch	414 kB	208.60ms - 215.36ms	unsure 🔍 -3% - +1% -6.69ms - +2.93ms	-

top-nav permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	429 kB	155.83ms - 164.01ms	-	unsure 🔍 -3% - +5% -4.20ms - +7.88ms
branch	420 kB	153.63ms - 162.53ms	unsure 🔍 -5% - +3% -7.88ms - +4.20ms	-

[Westbrook]

Thanks for tackling this! Gonna catch up to main and if everything stays green, LGTM.