Open mkernohanbc opened 1 month ago
For commonly-used SVG icons that we implement (or have already implemented) as React components, we should explore adding support for:
<title>
aria-hidden
aria-labelledby
Without these, I suspect we risk allowing accessibility violations to creep in as we reuse these icon components.
In terms of basic implementation, I think this looks something like:
title
<svg>
aria-hidden="true"
@ty2k I'm happy to take a first pass at implementing this myself, but would appreciate your thoughts on whether my assumptions here are valid?
POC for this fix: https://github.com/bcgov/design-system/compare/main...436-svg-accessible-titles-aria-hidden
mkernohanbc
commented
1 month ago mkernohanbc
commented
1 month ago
For commonly-used SVG icons that we implement (or have already implemented) as React components, we should explore adding support for:
<title>attributearia-hiddenand/oraria-labelledbyWithout these, I suspect we risk allowing accessibility violations to creep in as we reuse these icon components.
In terms of basic implementation, I think this looks something like:
titleprop to populate<title>attribute on the<svg>elementaria-hidden="true"if no title is provided@ty2k I'm happy to take a first pass at implementing this myself, but would appreciate your thoughts on whether my assumptions here are valid?