Icon alt-text support

[blackfalcon]

Is your feature request related to a problem? Please describe.

Please see the following issue

• Auro icon screen reader availability #46

Describe the solution you'd like

Given that there are some opportunities for icons to be read aloud to screen readers, e.g. the icons that appear in auro-hyperlink, aria-hidden is on the SVG itself, not on the auro-icon element. This will be addressed with the following issue.

• Remove aria-hidden attribute from icons  Icons#137

It is incorrect to say that ALL images should have descriptive text. https://www2.gov.bc.ca/gov/content/home/accessible-government/toolkit/accessible-digital-content/graphics#decorative

It is also considered a failure to not marking up decorative images in HTML in a way that allows assistive technology to ignore them

Content producers and users of auro-icon should be educated to follow this W3C alt Decision Tree.

That being said, it's not Auro's call to enforce an opinion on that on whether that is read by screen readers or not. It is however our position to ensure that the end users do have a proper and informative experience.

For the auro-icon element, we cannot use alt="", as that is only allowed on images themselves, but we can use the title attribute.

On the div with the class="primary" we can add by default, aria-hidden="true". On the element itself, we would support the two new attributes,

1. aria-hidden="false"
2. title=" ... "

If aria-hidden="false" is used, this will remove the aria-hidden="true" on the inner div in the shadow DOM and allow for the title of the SVG to be read aloud.

If the title attribute is used, this will be picked up by the screen readers and the inner div will remain with aria-hidden="true".

Legacy support

The auro-icon element already has support for alt text. A user could add content in the slot of the element and this would be read aloud by screen readers.

While this works, it is a non-standard approach to a11y and SVGs. It is the recommendation that we do not remove this support, but we only deprecate it and remove the examples from the docs.

Exit criteria

This issue will be considered closed when,

1. A user can use aria-hidden="false" and the contents of the SVG's title element is read aloud
2. A user can add content via the title attribute and this will have precedence to be read aloud over the SVG's title element.
3. The content of the SVG's title element is still visible on tool-tip