You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 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>
For commonly-used SVG icons that we implement (or have already implemented) as React components, we should explore adding support for:
<title>
attributearia-hidden
and/oraria-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
prop 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: