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.

Sign up for GitHub

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

Jump to bottom

Use VisuallyHidden component to render hidden text #6570

Merged
merged 4 commits into from
Aug 27, 2021
Merged

Use VisuallyHidden component to render hidden text #6570

merged 4 commits into from
Aug 27, 2021

Conversation

pierlon
Copy link
Contributor

@pierlon pierlon commented Aug 26, 2021 •
edited
Loading

Summary

Tested with Gutenberg v11.2.1 active.

  • Settings page:
Before After
image image
  • Onboarding Wizard:
Before After
image image

Fixes #6235

Checklist

  • My code is tested and passes existing tests.
  • My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

@pierlon pierlon added this to the v2.1.4 milestone Aug 26, 2021
@pierlon pierlon mentioned this pull request Aug 26, 2021
Closed
@pierlon pierlon force-pushed the fix/6235-fix-hidden-labels branch from d9f261e to 87d162e Compare August 26, 2021 17:33
@github-actions
Copy link
Contributor

github-actions bot commented Aug 26, 2021 •
edited
Loading

Plugin builds for 8738025 are ready 🛎️!

@pierlon
Copy link
Contributor Author

pierlon commented Aug 26, 2021

Updated the PR description with before and after illustrations.

@westonruter
Copy link
Member

Tested with Gutenberg v11.2.1 active.

I can confirm the fix in Gutenberg v11.3.0 as well.

westonruter
westonruter approved these changes Aug 26, 2021
View reviewed changes
Copy link
Member

@westonruter westonruter left a comment

Choose a reason for hiding this comment

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

LGTM, but I defer to @delawski

@delawski
Copy link
Collaborator

delawski commented Aug 27, 2021 •
edited
Loading

Looks good to me, too. Everything is working well.

I went ahead and replaced 2 occurrences of the screen-reader-text class in our React components with the VisuallyHidden component. This way we're hiding elements visually in a consistent manner across the codebase (8738025).

Here are the two places where we now have a span.component-visually-hidden element instead of a plain span.screen-reader-text:

AMP Preview Button in the Editor Analytics Section on AMP Settings Page
Screenshot 2021-08-27 at 11 16 49 Screenshot 2021-08-27 at 11 17 26

@westonruter westonruter merged commit 24e3671 into develop Aug 27, 2021
@westonruter westonruter deleted the fix/6235-fix-hidden-labels branch August 27, 2021 15:07
westonruter added a commit that referenced this pull request Aug 27, 2021
@westonruter @pierlon @delawski
Use VisuallyHidden component to render hidden text (#6570)
d4d2a7b 
Co-authored-by: Pierre Gordon <[email protected]>
Co-authored-by: Piotr Delawski <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@delawski delawski delawski approved these changes

@westonruter westonruter westonruter approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v2.1.4
Development

Successfully merging this pull request may close these issues.

Activating Gutenberg messed backend styling
3 participants
@pierlon @westonruter @delawski