Add more resilience to decorative SVGs

[thisisdano]

Use the aria-hidden="true" property on decorative images (<img>) whose source is an SVG.

Adding role="img" fixes a webkit bug that causes images with an SVG source be be announced as a group, not an image. However, adding role="img" and alt="" result in an object that's selectable by AT but not announced (at least in our testing on VoiceOver and Chrome). Adding aria-hidden="true" results in a properly hidden element.

Adding aria-hidden="true" only would be equally effective (it renders role="img" moot) but we choose to add all three to be as consistent as possible with <img>, even if it is redundant. Thus, each of the following can always be true for <img>:

• Use alt="" for decorative image
• Use role="img" for images with an SVG source
• Use aria-hidden="true" for decorative images with an SVG source

Add focusable="false" to <svg> elements meant to be images (ie not text/data).

This prevents an IE11 bug that could allow the Tab key to navigate into the SVG.

For decorative SVGs, use role="img" and aria-hidden="true" as above. Using both allows us the following consistent rules for the <svg> element:

• Use role="img" and focusable="false" for SVGs meant to be images (ie don't contain text/data)
• Use aria-hidden="true" for decorative SVGs
• Use aria-label="[accessible name]" or aria-labelledby="[id list]" for SVGs that convey information and need an accessible description

Source: https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html

[jaredcunha]

Doh!

[jaredcunha]

This looks good to me. Do you want to update the SVGs in https://github.com/uswds/uswds/blob/develop/src/components/icons/icons--sizes.njk to include focusable="false"?

[thisisdano]

Mmm, yes I can do that.

[mejiaj]

I think we should move the focusable attribute to <span class="icon-lock">.

Sidenote

I'm not sure if it's a blink/webkit thing, but I had trouble tabbing to the banner contents on the latest chromium version of Edge.

[jaredcunha]

Oh, there's also the icon list too!