oxidecomputer / console

Oxide Web Console
https://console-preview.oxide.computer
Mozilla Public License 2.0
124 stars 10 forks source link

SVG icons should have accessible text #2322

Open david-crespo opened 1 month ago

david-crespo commented 1 month ago

They could probably come from @oxide/design-system with built-in default names matching their component names.

image
charliepark commented 1 month ago

Just to log some notes on this, I explored this for a bit this week and was working on a refactor of icons in the design-system repo (here). Crespo noted that these files are actually generated by this executable markdown file. Next would be to explore in Figma, to see what attributes we can add to the SVGs themselves, or, if that's too painful, to see about updating that executable .md file.

Two quick notes: as the icons are used "decoratively", we should be able to set them to have role="presentation", and can hide them with aria-hidden. Everywhere we have them, we either have text announcing, say, the page title, or are using them in a button (like CopyToClipboard) that has its own aria label.