feat(VerticalNavigation): improve accessibility

[neilmispelaar]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR will enhance the accessibility (#a11y) of the VerticalNavigation component by adding the following:

• Structural list markup (ul li) for each vertical navigation element
• Adds visually hidden text (but accessible to screen readers and assistive technologies) that identifies the current page that the user is on

Problem we are solving

The VerticalNavigation element in its current state fails the following WCAG success criteria:

• SC 1.4.1: Use of Color (Level A)
• SC 1.3.1: Info and Relationships (Level A)

Use of Color

When the VerticalNavigation component determines that a page is "active" (i.e. the current page) it applies styles to the link to signify that the current page is active. This is shown below:

This is great UX. However, if you are using a screenreader or assistive technology, you don't "see" these styles and so you miss out on this important information.

Adding hidden text that tells the user they are on the "Current page" addresses this deficiency.

https://www.w3.org/WAI/tutorials/menus/structure/#indicate-the-current-item

Info and Relationships

Visually, and structurally, I would submit that the VerticalNavigation component creates a list of links. However, the markup does not demonstrate this structure, as the links are just added to the markup sequentially.

By adding HTML list markup ul and li this addresses SC 1.3.1 and enhances the accessibility of the markup.

https://www.w3.org/WAI/tutorials/menus/structure/#unordered-list

Potential concern

To identify the current page, I added in a visually hidden text "Current Page:" before the link label. The text is English.

Developers creating websites or web applications that are in a different language would then have English text within their projects. At least the text would be hidden visually, but wouldn't make too much sense in other languages.

Perhaps a future enhancement would be to either have the text user definable, or have some sort of prop mechanism that specifies the languages and then the string is pulled from a lookup table.

Screenshot

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

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

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Dec 26, 2023 11:50am

[benjamincanac]

Thanks 😊