search

hashicorp / flight

Archived. The flight repo now lives in the design-system monorepo
https://github.com/hashicorp/design-system
11 stars 4 forks source link

Improve nav a11y #374

Closed amyrlam closed 2 years ago

amyrlam commented 2 years ago

I originally did this on another repo https://github.com/hashicorp/design-system-components/pull/122/commits/ba268b5023943d1e55067083c470ce3880687c31, but thought it would make more sense to bring here first.

The existing nav does give a visual indicator of what tab you are on. We should adjust this to improve our a11y. For example, having the white border bottom be persistent.

Gif showing that clicking "Design" or "Engineering" tab, you see a bottom border on hover, but not on route URL change: links

Reference: https://www.w3.org/WAI/tutorials/menus/styling/

I would suggest we use something like https://structure.hashicorp.vercel.app/?path=/story/components-tabnav--index so that we aren't building something from scratch. Also, a good chance to try out using Structure to gain more insight into the challenges. (Note: Structure TabNav appears to work, but it's not 100% dynamic so would need to test it out first.)

I know @MelSumner @heatherlarsen worked on this originally so tagging you to see if you have any preferences / context I may not be aware of. And @didoo as we discussed on the design-system-components PR. And anyone else can feel free to chime in.

Dhaulagiri commented 2 years ago

It's unlikely we'll be prioritizing much in the way of updates for the website given our intentions to migrate this into the design system website this year.

I would suggest we use something like https://structure.hashicorp.vercel.app/?path=/story/components-tabnav--index so that we aren't building something from scratch. Also, a good chance to try out using Structure to gain more insight into the challenges. (Note: Structure TabNav appears to work, but it's not 100% dynamic so would need to test it out first.)

Structure's style doesn't match the docs here so I don't think it would make sense to use it here (among other reasons), but if we wanted to learn pain points from it we could find other ways to experiment with it/chat with folks who have used it.

amyrlam commented 2 years ago

Yeap, I made this issue cause I proposed this change on design-system-components for a11y, and this was mentioned as a reference. So I wanted to float the idea here first, as this was (from what I remember) used as an example to follow.

amyrlam commented 2 years ago

closing as won't do. melanie fixed this on design-system-components home nav