Add accessible titles and aria-hidden support to React icon components #436
Comments
|
POC for this fix: main...436-svg-accessible-titles-aria-hidden |
mkernohanbc
added a commit
that referenced
this issue
Aug 9, 2024
* basic scaffold of alert component * roughing out component functionality * theming * function to get icon based on theme * add success and error icons * export and import new icons * styling * close button * CSS comments * remove icon from props * add children block * refining children slot, add examples * clean up imports * rename component to InlineAlert * add gap rule for children * icon refinement and storybook cleanup * clean up prop names * fix mangled SVG paths and naming * fix SvgExclamationCircleIcon path * aria labelling * remove non-functional aria labels, see #436 * add alertRole prop to set role attribute * add inline alert examples to vite kitchen sink * flex-grow main content container * fleshing out vite example * fleshing out storybook docs * set default ARIA role to "note" * storybook docs * make description field optional * storybook docs * change showIcon to hideIcon * storybook docs * fix button spacing * clean up examples on vite * alternative implementation of ARIA roles * fix icon and close button alignment * move icons into new subfolder and update imports in other components * TagGroup - add warning icon to error message (#429) * add warning icon to taggroup error message * min-width error icon * Select - expose description field (#431) * expose description field on select component * add errorMessage to argTypes in storybook * fix icon import in TagGroup from #429 * typo in vite example * add ID and aria-labelledby to alert title * styling and props cleanup * add onClose handling * children slot and docs update --------- Co-authored-by: Tyler Krys <Tyler.Krys@gov.bc.ca>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
The text was updated successfully, but these errors were encountered: