Docs: missing aria-hidden on some decorative SVGs

[hannahiss]

Description

Add aria-hidden on decorative SVGs to make sure they are ignored by assistive technologies.

Motivation & Context

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-40756--twbs-bootstrap.netlify.app
• https://deploy-preview-40756--twbs-bootstrap.netlify.app/docs/components/tooltips/
• https://deploy-preview-40756--twbs-bootstrap.netlify.app/docs/examples/features/
• https://deploy-preview-40756--twbs-bootstrap.netlify.app/docs/utilities/position/

Related issues

[anandfresh]

LGTM

[patrickhlauke]

note that aria-hidden="true" is unnecessary if the svg doesn't contain any text elements. SRs will ignore them the same way they ignore a series of purely empty presentational <div>s and <span>s

[patrickhlauke]

(just as a heads-up before you laboriously go and add it to every, single, svg)

[hannahiss]

Thanks for your answer :-) Our accessibility experts asked us to add aria-hidden on decorative SVGs in our Boosted doc, so I did it on Bootstrap when relevant. There aren't so much in the doc, but a lot more in the examples...! So if you're ok with this I can stop there and submit the PR?

[patrickhlauke]

wonder what the rationale provided by the accessibility experts there was.

personally, I have no problem with having all the aria-hiddens added, it just felt a bit wasteful/pointless. but if we're going to add them, then I'd say it should cover all instances, as it would be more confusing if we had a mix of "some <svg>s do have it, others don't". so i'd say either remove the ones you did from this PR, or...go through all the rest

[patrickhlauke]

See also #40686

[hannahiss]

Just for info, after some discussions with the accessibility team, they confirmed that aria-hidden is needed on SVGs until now, even if most of assistive technologies will ignore SVGs that do not contain texts. They rely on criterion WCAG 1.1.1 saying:

Non-text Content (Level A)
Success Criterion (SC)
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
[...]
Decoration, Formatting, Invisible
> If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

The last paragraph says we must do what is needed to ensure that decorative elements are ignored, and the only way to do it, is to use aria-hidden.

I'm going to make another PR about the tooltip icon's label (#40808 ) so that we can at least fix this label issue...

[louismaximepiton]

I'm fine having this in Bootstrap.

[hannahiss]

Hi @patrickhlauke could you please add your review? I added aria-hidden everywhere in the examples, like we talked about...
Thanks 😄

[patrickhlauke]

did a big cleanup here 2e1f116 ... merging now (though I'd still say in most cases it's unnecessary to add aria-hidden when it's a) overriden by the aria-label of its parent/ancestor, or b) is completely empty of text nodes)