feat(avt): a11y status page and a11y status table component

[alisonjoseph]

Closes #3851
Closes #3848
Closes #3849

Building off work started in #3735 (should be able to close that now)

Changelog

• New Accessibility status page /components/overview/accessibility-status
  • Note: added "not available" to screen reader tag list
  • Update nav link
  • Add redirect to new url
• Update structure of data inside components.json
  • Add screen reader testing data
  • Add parent component data (to link to docs pages)
  • Add all components from testing data
  • Add overview data, to allow us to list more components that don't appear with thumbnails on overview page (would we want a 1:1 match with thumbnails at some point?)
• New A11yStatus component
• New A11ySTatusTag component
• Add A11yStatus component to all component a11y pages

Testing

New page

• https://carbondesignsystem-git-a11y-status-carbon-design-system.vercel.app/components/overview/accessibility-status

Component filtered on individual component a11y pages

• https://carbondesignsystem-git-a11y-status-carbon-design-system.vercel.app/components/accordion/accessibility#accessibility-testing-status
• https://carbondesignsystem-git-a11y-status-carbon-design-system.vercel.app/components/dropdown/accessibility#accessibility-testing-status

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 2, 2024 5:49pm

[thyhmdo]

Looking great!! Just a few minor things

---

This is on me, but I'm looking to change the text to:

Learn more about tag and test meaning
View all component accessibility status

---

Change to with the lower case of "tags"

---

I noticed that this one variant page "View all component..." link takes me to the "Accessibility tag status" table instead of all the "All component accessibility status" section.
While the multiple variant page takes me to half of "Accessibility test categories" table?

[alisonjoseph]

@thyhmdo just pushed a fix. The anchor links weren't working correctly because of the tooltip within the title.

[thyhmdo]

Looks great!

[guidari]

LGTM! Awesome work! 🚀

[guidari]

@alisonjoseph One question.

When I try to access this component "Aspect Ratio" I get an 404. I know it is because we don't have a page in the website for the component so the error is totally right. But just to make sure, should we cover that somehow or that's okay?
Might hard to filter these.
Link to access

[alisonjoseph]

@guidari ah good catch, I'll fix that, Going to have it link to the Grid docs page.

[andreancardona]

adding comment here - padding needed for links

[alisonjoseph]

fixed @andreancardona

[andreancardona]

🔥

[mbgower]

@thyhmdo Obviously kinda late for this comment, but I was a little surprised to see these appearing at the top of the accessibility tab.
Historically they've been near the bottom. i guess I was focused on terminology and hadn't seen the intended location on the Accessibility tab in prior work -- or maybe I thought it was going to positioned in the right margin on the main page or something?

I did want to flag that it's a little odd that these are implemented with an H3, since the page structure is now wonky:
H3 Accessibility testing status
H2 What Carbon provides
H3 Keyboard interactions
...
H2 Development considerations

I don't think the status deserves an H2 -- its not on par with the other typical H2s:

• What Carbon provides
• Design recommendations
• Development considerations

IMO, it conceptually probably makes the most sense under Development considerations.

[thyhmdo]

@thyhmdo Obviously kinda late for this comment, but I was a little surprised to see these appearing at the top of the accessibility tab. Historically they've been near the bottom. i guess I was focused on terminology and hadn't seen the intended location on the Accessibility tab in prior work -- or maybe I thought it was going to positioned in the right margin on the main page or something?

I did want to flag that it's a little odd that these are implemented with an H3, since the page structure is now wonky: H3 Accessibility testing status H2 What Carbon provides H3 Keyboard interactions ... H2 Development considerations

I don't think the status deserves an H2 -- its not on par with the other typical H2s:

• What Carbon provides
• Design recommendations
• Development considerations

IMO, it conceptually probably makes the most sense under Development considerations.

Hey @mbgower thanks for the feedback and noted. We probably can change the order of it in the future. We also moved away from the margin space because of the condensed space, this will soon be reflected on tiles on the Usage tab work instead.