Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add aria-hidden='true' to decorative SVGs #40686

Merged
merged 1 commit into from
Aug 2, 2024

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Aug 2, 2024

Description

This PR adds aria-hidden="true" to decorative SVGs so they remain hidden from assistive technologies:

  • Buttons with "arrow" or "lightning" decorative SVGs
  • Example page with "box" decorative SVG
  • Homepage with decorative SVGs in sections

Please note that site/layouts/partials/icons/circle-square.svg and site/layouts/partials/icons/droplet-fill.svg are only used as decorative SVGs so the aria-hidden="true" was added directly to the SVG files.

This PR also removes some remaining focusable="false" as it was mentioned in #37498 (comment) that (and I agree) it's not necessary "to cater to IE since it's now been officially deprecated by Microsoft, and that was the only browser exhibiting this odd behaviour."

Type of changes

  • Documentation enhancement (non-breaking change)

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
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Copy link
Member

@patrickhlauke patrickhlauke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, aria-hidden="true" should not be required when there's nothing inside the svg that would lead to an announcement - like an actual text node, or things like <title> or <desc>. normally, SRs should be treating these svgs like they do a bunch of empty and semantically neutral <div>s and <span>s. but it also doesn't do any harm adding it just in case, belt and braces. so I'm ok with this.

@julien-deramond julien-deramond merged commit ac831aa into main Aug 2, 2024
14 checks passed
@julien-deramond julien-deramond deleted the main-jd-add-aria-hidden-for-svgs branch August 2, 2024 08:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants