docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

fix: Add accessible name for the hash-link

Open zmrhaljiri opened this issue 2 years ago • 2 comments

Pre-flight checklist

  • [x] I have read the Contributing Guidelines on pull requests.
  • [ ] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • [ ] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

An accessibility improvement - anchor elements must have an accessible name - a programmatically determinable name that comes either from the text content inside, from aria-label, or aria-labelledby.

There is no reliable way to hide the textual contents of pseudoelements from screen readers, would be better to implement the link text as <span aria-hidden="true">&#35;</span> but not sure if that would be wanted.

Test Plan

Before - the accessible name of the link is not meaningful:

before

After - the accessible name of the link is meaningful and unique:

after

Test links

Deploy preview: https://deploy-preview-8562--docusaurus-2.netlify.app/docs/installation/#requirements

Related issues/PRs

https://github.com/facebook/docusaurus/issues/8336

zmrhaljiri avatar Jan 19 '23 13:01 zmrhaljiri

[V2]

Built without sensitive environment variables

Name Link
Latest commit 55d0f50dbbfd8d73842fc6ea33b11ec853a8851b
Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/63cb068ebaa59c0008c1232f
Deploy Preview https://deploy-preview-8562--docusaurus-2.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Jan 19 '23 13:01 netlify[bot]

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 84 🟢 97 🟢 92 🟢 100 🟢 90 Report
/docs/installation 🟠 79 🟢 100 🟢 100 🟢 100 🟢 90 Report

github-actions[bot] avatar Jan 19 '23 13:01 github-actions[bot]

Did my best to update all the locales

I can confirm the Czech locale is fine :)

zmrhaljiri avatar Jan 20 '23 21:01 zmrhaljiri

@slorber Looks like https://github.com/facebook/docusaurus/pull/8562#discussion_r1083062791 is missed. I won't be able to get to my computer until a couple of hours later, so it would be great if you can fix that earlier in case I forget.

Josh-Cena avatar Jan 26 '23 15:01 Josh-Cena

@slorber Looks like #8562 (comment) is missed. I won't be able to get to my computer until a couple of hours later, so it would be great if you can fix that earlier in case I forget.

What do you mean by it's missed?

I'd prefer if you fix it because it's hard for me to figure out what is the right final solution 😅

slorber avatar Feb 01 '23 16:02 slorber

Oops, I didn't see the suggestion was already applied.

Josh-Cena avatar Feb 01 '23 16:02 Josh-Cena