On the TypeScript ESLint Docusaurus site, the logo's alt text ("TypeScript ESLint logo") is cluttering the logo link's accessible name for assistive technologies. When screenreader users navigate to the logo link, they're told "link, TypeScript ESLint logo TypeScript ESLint," which is too cumbersome. Additionally, voice control users would need to recite that name to trigger the link.

This pull request uses a change to Docusaurus that arrived in v2 (facebook/docusaurus#7658) to supply an empty alt text for the logo image, marking it as decorative for assistive technologies. As a result, the link's accessible name is simply "link, TypeScript ESLint."

DevTools showing empty alt for the image, and that the image is ignored in the accessibility tree:
(Note that Chrome DevTools showsalt when providedalt="". This is expected)

DevTools showing the logo link in the Accessibility tree, with the newly shortened name:

This can be verified with a screenreader — I'm happy to demonstrate if needed.

Mark logo image as decorative for assistive technologies

7d9cedd

Copy link

Contributor

typescript-eslintbot commentedAug 29, 2022

Thanks for the PR,@BenDMyers!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

🙏Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitorsper day.

Copy link

nx-cloudbot commentedAug 29, 2022•
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commitb400bd3. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 47 targets

Sent with 💌 fromNxCloud.

Copy link

netlifybot commentedAug 29, 2022•
edited
Loading

✅ Deploy Preview fortypescript-eslint ready!

Name	Link
🔨 Latest commit	`b400bd3`
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/6310ea65b6bf75000879a7c1
😎 Deploy Preview	https://deploy-preview-5568--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Merge branch 'main' into nav-alt

b400bd3

Copy link

codecovbot commentedSep 1, 2022•
edited
Loading

Codecov Report

Merging#5568 (b400bd3) intomain (35bb8dd) willincrease coverage by0.12%.
The diff coverage isn/a.

Additional details and impacted files

@@            Coverage Diff             @@##             main    #5568      +/-   ##==========================================+ Coverage   91.51%   91.63%   +0.12%==========================================  Files         349      134     -215       Lines       10945     1506    -9439       Branches     3222      226    -2996     ==========================================- Hits        10016     1380    -8636+ Misses        602       62     -540+ Partials      327       64     -263

Flag	Coverage Δ
unittest	`91.63% <ø> (+0.12%)`	⬆️

Flags with carried forward coverage won't be shown.Click here to find out more.

Impacted Files	Coverage Δ
packages/utils/src/ts-eslint/ESLint.ts
packages/utils/src/eslint-utils/RuleTester.ts
...plugin/src/rules/no-redundant-type-constituents.ts
...ages/eslint-plugin/src/rules/no-unsafe-argument.ts
packages/eslint-plugin/src/rules/typedef.ts
...utils/src/ast-utils/eslint-utils/PatternMatcher.ts
...kages/eslint-plugin/src/rules/no-dynamic-delete.ts
...ackages/eslint-plugin/src/rules/prefer-readonly.ts
packages/eslint-plugin/src/rules/no-shadow.ts
...es/eslint-plugin/src/rules/prefer-function-type.ts
... and205 more

bradzacher changed the title~~fix(website): [a11y] Mark logo as decorative for assistive technologies~~chore(website): [a11y] Mark logo as decorative for assistive technologies

Sep 2, 2022