fix(theme-classic): expose empty string alt text in navbar logos #7659

BenDMyers · 2022-06-22T16:33:27Z

Pre-flight checklist

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

Resolves #7658

Allowing users to supply alt="" (distinct from no alt/undefined alt) for their navbar brand link logos can enable users to reduce clutter in screenreader announcements. However, as it currently stands, when an empty string is provided for a logo alt, Docusaurus falls back to the provided navbar title or the site title.

This pull request ensures that if a Docusaurus config provides alt: '' for a logo, that empty string is respected, so Docusaurus users can confidently mark their logos as decorative and reduce duplicated announcements.

Test Plan

Create a fresh Docusaurus site. In the Docusaurus config, update the navbar.logo.alt config to be an empty string. Build the site. Verify that the logo element has alt="" (may show up as simply alt in some browser devtools).

Navigate to the brand link with a screenreader. Verify that the screenreader only announces the site title once (from the visible site title label)

Test links

Choosing to dogfood on the main Docusaurus site's brand logo link:

Deploy preview: https://deploy-preview-7659--docusaurus-2.netlify.app/

Related issues/PRs

Resolves #7658

Prior art in #3352 (which addressed #3350) and #3817 (which addressed #3816)

facebook-github-bot · 2022-06-22T16:33:31Z

Hi @BenDMyers!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

BenDMyers · 2022-06-22T16:35:31Z

@Josh-Cena Do you know of a good place to add unit tests for this sort of thing?

Josh-Cena · 2022-06-22T16:37:08Z

We don't have good unit testing infra for theme components yet, and since this is wired to the theme config, mocking the context is a bit tricky. Since there's already a dogfooding test (which I've always wanted to do anyway), I think that's not very critical.

Josh-Cena · 2022-06-22T16:40:25Z

packages/docusaurus-theme-classic/src/theme/Logo/index.tsx

@@ -32,7 +32,7 @@ export default function Logo(props: Props): JSX.Element {
      sources={sources}
      height={logo.height}
      width={logo.width}
-      alt={logo.alt || navbarTitle || title}
+      alt={logo.alt ?? (navbarTitle || title)}


What do you think about the case of alt: undefined and navbar: { title: "TypeScript ESLint" }? Should we use alt="" as well (sounds more sensible to me)?

I'm pretty much of the mindset that if any text appears in the same link as the logo, the logo should have alt="" - since at that point, the logo serves only to adorn that text.

Shall we use something closer to the line of logo.alt ?? (navbarTitle ? "" : title) then? (Plus a comment like "respect empty alt, don't show alt that's duplicated from navbar title")

Sure - I'll pull that out into its own declaration though, so that way it's not all inlined.

netlify · 2022-06-22T16:40:55Z

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`6568612`
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62b3445913cdbd0008b3dabb
😎 Deploy Preview	https://deploy-preview-7659--docusaurus-2.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 your Netlify site settings.

github-actions · 2022-06-22T16:41:33Z

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 74	🟢 100	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 85	🟢 100	🟢 100	🟢 100	🟢 90	Report

netlify · 2022-06-22T16:45:29Z

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`29df18e`
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62b34942857830000868092b
😎 Deploy Preview	https://deploy-preview-7659--docusaurus-2.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 your Netlify site settings.

…llback

Josh-Cena · 2022-06-22T17:01:02Z

:/ Does this look right (alt instead of alt="")? I don't know if that's React's intended behavior.

BenDMyers · 2022-06-22T17:04:17Z

@Josh-Cena That's just how DevTools shows empty ~~alt texts~~ attributes in general - it's working as intended 🙂

Josh-Cena · 2022-06-22T17:35:20Z

Just pending CLA. I'll go to sleep and @slorber may merge it or I can merge it tomorrow morning (provided the CLA comes through at that time)

BenDMyers · 2022-06-22T17:37:00Z

I've submitted the CLA on my end - my "receipt":
Meta CLA.pdf

Might need some time to process on y'all's end - not sure how that works

Josh-Cena · 2022-06-22T17:39:50Z

Yes, it can easily take up to hours these days... We can just wait.

BenDMyers · 2022-06-22T17:40:17Z

No worries!

facebook-github-bot · 2022-06-22T18:33:56Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

Josh-Cena · 2022-06-23T03:42:43Z

Thanks! LGTM

BenDMyers added 2 commits June 22, 2022 11:13

fix: Expose empty string alt text in brand logos via nullish coalescing

840de25

fix: Update boolean logic for fallbacks

6568612

BenDMyers requested review from slorber, lex111 and Josh-Cena as code owners June 22, 2022 16:33

fix: Dogfood fix on Docusaurus brand logo

03cc4ae

Josh-Cena added the pr: bug fix This PR fixes a bug in a past release. label Jun 22, 2022

Josh-Cena changed the title ~~fix: Expose empty string alt text in navbar brand logos~~ fix: expose empty string alt text in navbar logos Jun 22, 2022

Josh-Cena reviewed Jun 22, 2022

View reviewed changes

refactor: Un-inline alt logic, and reduce chance of duplication in fa…

29df18e

…llback

Josh-Cena approved these changes Jun 22, 2022

View reviewed changes

BenDMyers mentioned this pull request Jun 22, 2022

Navbar logos not exposing empty alt text #7658

Closed

7 tasks

facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 22, 2022

Josh-Cena merged commit 3990404 into facebook:main Jun 23, 2022

Josh-Cena changed the title ~~fix: expose empty string alt text in navbar logos~~ fix(theme-classic): expose empty string alt text in navbar logos Jun 23, 2022

BenDMyers mentioned this pull request Jun 23, 2022

Docs: Navbar logo has extra decorative "TypeScript ESLint logo" narration typescript-eslint/typescript-eslint#5213

Closed

2 tasks

BenDMyers deleted the logo-empty-alt branch July 30, 2022 16:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(theme-classic): expose empty string alt text in navbar logos #7659

fix(theme-classic): expose empty string alt text in navbar logos #7659

BenDMyers commented Jun 22, 2022 •

edited

facebook-github-bot commented Jun 22, 2022

BenDMyers commented Jun 22, 2022

Josh-Cena commented Jun 22, 2022

Josh-Cena Jun 22, 2022

BenDMyers Jun 22, 2022

Josh-Cena Jun 22, 2022

BenDMyers Jun 22, 2022

BenDMyers Jun 22, 2022

netlify bot commented Jun 22, 2022

github-actions bot commented Jun 22, 2022 •

edited

netlify bot commented Jun 22, 2022 •

edited

Josh-Cena commented Jun 22, 2022 •

edited

BenDMyers commented Jun 22, 2022 •

edited

Josh-Cena commented Jun 22, 2022

BenDMyers commented Jun 22, 2022 •

edited

Josh-Cena commented Jun 22, 2022

BenDMyers commented Jun 22, 2022

facebook-github-bot commented Jun 22, 2022

Josh-Cena commented Jun 23, 2022

fix(theme-classic): expose empty string alt text in navbar logos #7659

fix(theme-classic): expose empty string alt text in navbar logos #7659

Conversation

BenDMyers commented Jun 22, 2022 • edited

Pre-flight checklist

Motivation

Test Plan

Test links

Related issues/PRs

facebook-github-bot commented Jun 22, 2022

Action Required

Process

BenDMyers commented Jun 22, 2022

Josh-Cena commented Jun 22, 2022

Josh-Cena Jun 22, 2022

Choose a reason for hiding this comment

BenDMyers Jun 22, 2022

Choose a reason for hiding this comment

Josh-Cena Jun 22, 2022

Choose a reason for hiding this comment

BenDMyers Jun 22, 2022

Choose a reason for hiding this comment

BenDMyers Jun 22, 2022

Choose a reason for hiding this comment

netlify bot commented Jun 22, 2022

✅ [V2]

github-actions bot commented Jun 22, 2022 • edited

⚡️ Lighthouse report for the deploy preview of this PR

netlify bot commented Jun 22, 2022 • edited

✅ [V2]

Josh-Cena commented Jun 22, 2022 • edited

BenDMyers commented Jun 22, 2022 • edited

Josh-Cena commented Jun 22, 2022

BenDMyers commented Jun 22, 2022 • edited

Josh-Cena commented Jun 22, 2022

BenDMyers commented Jun 22, 2022

facebook-github-bot commented Jun 22, 2022

Josh-Cena commented Jun 23, 2022

BenDMyers commented Jun 22, 2022 •

edited

github-actions bot commented Jun 22, 2022 •

edited

netlify bot commented Jun 22, 2022 •

edited

Josh-Cena commented Jun 22, 2022 •

edited

BenDMyers commented Jun 22, 2022 •

edited

BenDMyers commented Jun 22, 2022 •

edited