fix(jump-links): apply aria-label to list

[bennypowers]

Adds aria-labelledby to jump links internal list

Related issues

• closes [fix] pfe-jump-links heading accessibility issue #1765

What has changed and why

• Adds aria-labelledby to jump links internal list

Testing instructions

• Test case 1
  1. navigate to /components/jump-links/demo
  2. use screenreader to navigate jump-links nav
  3. list should be labelled by the slotted heading
• Test case 2
  1. same as case 1, but at mobile breakpoint

NOTE TO testers: in my testing using VO and FF, the header text was repeated list STANDARD SECTION standard section 5 items. Edgium and safari did not repeat, so i suppose that's a UA thing.

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)
• Apple mobile device (such as the iPhone X)
• Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• Tests have been updated to cover these changes.
• Browser testing passed.
• Changelog updated.
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording:
• Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[changeset-bot]

🦋 Changeset detected

Latest commit: 96206e7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/pfe-jump-links	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kelsS]

Hey @bennypowers, upon initial review the code looks good! I will test with a screen reader shortly and report back.

[bennypowers]

Thank you @kelsS I'll set the PR to auto-merge upon your approval

[netlify]

✔️ Deploy Preview for patternfly-elements ready!

🔨 Explore the source changes: 96206e7

🔍 Inspect the deploy log: https://app.netlify.com/sites/patternfly-elements/deploys/622910b4a0e82e000937f95d

😎 Browse the preview: https://deploy-preview-1882--patternfly-elements.netlify.app

[github-actions]

🏮 Lighthouse report for the changes in this PR:

🔴 🟢 🟢 🟠 ⚪️ https://deploy-preview-1882--patternfly-elements.netlify.app/kitchen-sink/

🔦 Lighthouse Report for https://deploy-preview-1882--patternfly-elements.netlify.app/kitchen-sink/

🔬 View Detailed results 🧾

Category	Score
🔴 Performance	26
🟢 Accessibility	92
🟢 Best practices	100
🟠 SEO	83

💥 Assertion Failures

Audit	Result	Docs
Reduce JavaScript execution time	0.01 (expected >=0.9)	📗
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
Avoid an excessive DOM size	0.11 (expected >=0.9)	📗
First Contentful Paint	0.79 (expected >=0.9)	📗
First Meaningful Paint	0.08 (expected >=0.9)	📗
Image elements do not have [alt] attributes	0 (expected >=0.9)	📗
Largest Contentful Paint	0.05 (expected >=0.9)	📗
Minimize main-thread work	0 (expected >=0.9)	📗
Max Potential First Input Delay	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.03 (expected >=0.9)	📗
Reduce unused JavaScript	1 (expected <=0)	📗
Uses efficient cache policy on static assets	2 (expected <=0)	📗
Document does not have a valid rel=canonical	0 (expected >=0.9)	📗
Time to Interactive	0.16 (expected >=0.9)	📗
undefined	0.92 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Styles

🔦 Lighthouse Report for Styles

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	90
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
First Contentful Paint	0.66 (expected >=0.9)	📗
First Meaningful Paint	0.85 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Largest Contentful Paint	0.85 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Minify JavaScript	1 (expected <=0)	📗
undefined	0.9 (expected >=1)	📗

🟠 🟢 🟢 🟢 ⚪️ Accordion

🔦 Lighthouse Report for Accordion

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	65
🟢 Accessibility	97
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Reduce JavaScript execution time	0.77 (expected >=0.9)	📗
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.77 (expected >=0.9)	📗
Largest Contentful Paint	0.76 (expected >=0.9)	📗
Minimize main-thread work	0.66 (expected >=0.9)	📗
Max Potential First Input Delay	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.58 (expected >=0.9)	📗
Uses efficient cache policy on static assets	1 (expected <=0)	📗
undefined	0.97 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Autocomplete

🔦 Lighthouse Report for Autocomplete

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.63 (expected >=0.9)	📗

🟠 🟢 🟢 🟢 ⚪️ Avatar

🔦 Lighthouse Report for Avatar

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	85
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Largest Contentful Paint	0.67 (expected >=0.9)	📗
Serve images in next-gen formats	1 (expected <=0)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Preload Largest Contentful Paint image	0.56 (expected >=0.9)	📗
Speed Index	0.65 (expected >=0.9)	📗
Serve static assets with an efficient cache policy	1 (expected <=0)	📗
Efficiently encode images	1 (expected <=0)	📗

🟢 🟢 🟢 🟢 ⚪️ Badge

🔦 Lighthouse Report for Badge

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.73 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.65 (expected >=0.9)	📗
Minify JavaScript	1 (expected <=0)	📗

🟠 🟢 🟢 🟢 ⚪️ Band

🔦 Lighthouse Report for Band

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	83
🟢 Accessibility	96
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Largest Contentful Paint	0.86 (expected >=0.9)	📗
Max Potential First Input Delay	0.08 (expected >=0.9)	📗
Serve images in next-gen formats	1 (expected <=0)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Defer offscreen images	1 (expected <=0)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.65 (expected >=0.9)	📗
Efficiently encode images	1 (expected <=0)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Button

🔦 Lighthouse Report for Button

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	96
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.65 (expected >=0.9)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Card

🔦 Lighthouse Report for Card

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Largest Contentful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Defer offscreen images	2 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗
Image elements do not have explicit width and height	0 (expected >=0.9)	📗
Properly size images	2 (expected <=0)	📗

🟠 🟢 🟢 🟢 ⚪️ Clipboard

🔦 Lighthouse Report for Clipboard

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	88
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Max Potential First Input Delay	0.53 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗
Uses efficient cache policy on static assets	1 (expected <=0)	📗

🟠 🟢 🟢 🟢 ⚪️ Codeblock

🔦 Lighthouse Report for Codeblock

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	89
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Avoid an excessive DOM size	0.53 (expected >=0.9)	📗
First Contentful Paint	0.68 (expected >=0.9)	📗
First Meaningful Paint	0.85 (expected >=0.9)	📗
Largest Contentful Paint	0.87 (expected >=0.9)	📗
Max Potential First Input Delay	0.76 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.66 (expected >=0.9)	📗
Minify JavaScript	1 (expected <=0)	📗

🟢 🟢 🟢 🟢 ⚪️ Collapse

🔦 Lighthouse Report for Collapse

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	90
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.66 (expected >=0.9)	📗
First Meaningful Paint	0.86 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.65 (expected >=0.9)	📗

🟠 🟢 🟢 🟢 ⚪️ Cta

🔦 Lighthouse Report for Cta

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	78
🟢 Accessibility	96
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Background and foreground colors do not have a sufficient contrast ratio.	0 (expected >=0.9)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.83 (expected >=0.9)	📗
Largest Contentful Paint	0.85 (expected >=0.9)	📗
Max Potential First Input Delay	0.08 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.62 (expected >=0.9)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Datetime

🔦 Lighthouse Report for Datetime

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.66 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Dropdown

🔦 Lighthouse Report for Dropdown

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.67 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Health Index

🔦 Lighthouse Report for Health Index

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	90
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Max Potential First Input Delay	0.84 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.64 (expected >=0.9)	📗

🔴 🟢 🟠 🟢 ⚪️ Icon

🔦 Lighthouse Report for Icon

🔬 View Detailed results 🧾

Category	Score
🔴 Performance	46
🟢 Accessibility	100
🟠 Best practices	87
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Reduce JavaScript execution time	0 (expected >=0.9)	📗
Avoid an excessive DOM size	0 (expected >=0.9)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Issues were logged in the Issues panel in Chrome Devtools	0 (expected >=0.9)	📗
Minimize main-thread work	0 (expected >=0.9)	📗
Max Potential First Input Delay	0 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.03 (expected >=0.9)	📗
Serve static assets with an efficient cache policy	475 (expected <=0)	📗
Time to Interactive	0.15 (expected >=0.9)	📗

🟠 🟢 🟢 🟢 ⚪️ Icon Panel

🔦 Lighthouse Report for Icon Panel

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	89
🟢 Accessibility	95
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Max Potential First Input Delay	0.62 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.67 (expected >=0.9)	📗
Uses efficient cache policy on static assets	6 (expected <=0)	📗
undefined	0.95 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Jump Links

🔦 Lighthouse Report for Jump Links

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	96
🟢 Best practices	93
🟢 SEO	91

💥 Assertion Failures

Audit	Result	Docs
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Defer offscreen images	1 (expected <=0)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗
Tap targets are not sized appropriately	0.03 (expected >=0.9)	📗
Image elements do not have explicit width and height	0 (expected >=0.9)	📗
Uses efficient cache policy on static assets	1 (expected <=0)	📗
undefined	0.96 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Markdown

🔦 Lighthouse Report for Markdown

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.65 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Modal

🔦 Lighthouse Report for Modal

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.64 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Number

🔦 Lighthouse Report for Number

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.76 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.67 (expected >=0.9)	📗
Minify JavaScript	1 (expected <=0)	📗

🟢 🟢 🟢 🟢 ⚪️ Page Status

🔦 Lighthouse Report for Page Status

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	92
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.73 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.69 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Primary Detail

🔦 Lighthouse Report for Primary Detail

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	92
🟢 Best practices	93
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
ARIA IDs are not unique	0 (expected >=0.9)	📗
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
Browser errors were logged to the console	0 (expected >=0.9)	📗
First Contentful Paint	0.7 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗
undefined	0.92 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Progress Indicator

🔦 Lighthouse Report for Progress Indicator

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Speed Index	0.65 (expected >=0.9)	📗

🟠 🟢 🟢 🟢 ⚪️ Progress Steps

🔦 Lighthouse Report for Progress Steps

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	79
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	98

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.84 (expected >=0.9)	📗
Largest Contentful Paint	0.85 (expected >=0.9)	📗
Max Potential First Input Delay	0.1 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.63 (expected >=0.9)	📗
Tap targets are not sized appropriately	0.83 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Readtime

🔦 Lighthouse Report for Readtime

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	90
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.87 (expected >=0.9)	📗
Largest Contentful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.64 (expected >=0.9)	📗

🟢 🟢 🟢 🟢 ⚪️ Select

🔦 Lighthouse Report for Select

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
First Contentful Paint	0.72 (expected >=0.9)	📗
First Meaningful Paint	0.89 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗

🟠 🟢 🟢 🟢 ⚪️ Tabs

🔦 Lighthouse Report for Tabs

🔬 View Detailed results 🧾

Category	Score
🟠 Performance	74
🟢 Accessibility	92
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
ARIA IDs are not unique	0 (expected >=0.9)	📗
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.69 (expected >=0.9)	📗
First Meaningful Paint	0.8 (expected >=0.9)	📗
Heading elements are not in a sequentially-descending order	0 (expected >=0.9)	📗
Largest Contentful Paint	0.82 (expected >=0.9)	📗
Minimize main-thread work	0.78 (expected >=0.9)	📗
Max Potential First Input Delay	0.02 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.62 (expected >=0.9)	📗
Uses efficient cache policy on static assets	3 (expected <=0)	📗
undefined	0.92 (expected >=1)	📗

🟢 🟢 🟢 🟢 ⚪️ Toast

🔦 Lighthouse Report for Toast

🔬 View Detailed results 🧾

Category	Score
🟢 Performance	91
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100

💥 Assertion Failures

Audit	Result	Docs
Remove duplicate modules in JavaScript bundles	1 (expected <=0)	📗
First Contentful Paint	0.71 (expected >=0.9)	📗
First Meaningful Paint	0.88 (expected >=0.9)	📗
Avoid non-composited animations	0 (expected >=0.9)	📗
Eliminate render-blocking resources	1 (expected <=0)	📗
Speed Index	0.66 (expected >=0.9)	📗

[zeroedin]

This looks good to me as far as the code changes. I tested a bit with mac voiceover as a screen-reader and seemed to work, but I have limited skillset there.

[kelsS]

Hey @bennypowers upon reviewing the changes I have found a lot of a11y issues. This component needs to be refactored with some a11y remediation. I have a ticket to do that and want to work on it. Should I make the changes in this PR? How should we handle a possibly major refactor for this element?

[kelsS]

@bennypowers currently the component is only functional and useful to sighted mouse users without the remediation.

[bennypowers]

Yeah this PR is the place for it. If the changes are going to be substantive let's try to plan them out a little first, so we can minimize back-and-forth in review

[kelsS]

Thank you @kelsS I'll set the PR to auto-merge upon your approval

I am approving this PR because it looks good to me as defined. I will create issues for the things I discovered while testing this PR.

[kelsS]

LGTM