Component Accessibility

[jessiehuff]

I recently reviewed some of the components for accessibility (manual testing) and found a few concerns:

Battery component

• No screen reader information is given based on the different severities. A visual user can easily see the meaning behind a "full" or "empty" battery, but since it's just an svg image without any labeling, the screen reader user gets no information from the battery component. Since we're using an svg, I would suggest using a title and using role="img" as well. This article does a decent job of explaining svg accessibility: https://css-tricks.com/accessible-svgs/

Ansible component

• This component is in the same situation as battery. There is no information on the svg that let's a screen reader user know that Ansible is supported or unsupported.

Other components reviewed (that appear to work accessibly from my testing): Details page, Error boundary, Error state, Invalid object, Not authorized, Skeleton table, Tag count, Unavailable content, Warning modal