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

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

Merged
merged 4 commits into from
Jun 23, 2022

Conversation

BenDMyers
Copy link
Contributor

@BenDMyers BenDMyers commented Jun 22, 2022

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/

Chrome DevTools inspecting Docusaurus brand link. The logo image element shows alt set to the empty string

Related issues/PRs

Resolves #7658

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

@facebook-github-bot
Copy link
Contributor

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!

@Josh-Cena Josh-Cena added the pr: bug fix This PR fixes a bug in a past release. label Jun 22, 2022
@Josh-Cena 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
@BenDMyers
Copy link
Contributor Author

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

@Josh-Cena
Copy link
Collaborator

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.

@@ -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)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

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)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

Copy link
Collaborator

Choose a reason for hiding this comment

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

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")

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated

@netlify
Copy link

netlify bot commented Jun 22, 2022

[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...

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
Copy link

github-actions bot commented Jun 22, 2022

⚡️ 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
Copy link

netlify bot commented Jun 22, 2022

[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...

QR Code

Use your smartphone camera to open QR code link.

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

@Josh-Cena
Copy link
Collaborator

Josh-Cena commented Jun 22, 2022

image

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

@BenDMyers
Copy link
Contributor Author

BenDMyers commented Jun 22, 2022

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

@Josh-Cena
Copy link
Collaborator

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
Copy link
Contributor Author

BenDMyers commented Jun 22, 2022

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
Copy link
Collaborator

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

@BenDMyers
Copy link
Contributor Author

No worries!

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 22, 2022
@facebook-github-bot
Copy link
Contributor

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
Copy link
Collaborator

Thanks! LGTM

@Josh-Cena Josh-Cena merged commit 3990404 into facebook:main Jun 23, 2022
@Josh-Cena 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 BenDMyers deleted the logo-empty-alt branch July 30, 2022 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navbar logos not exposing empty alt text
3 participants