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: a11y text for site editor #62648

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Conversation

up1512001
Copy link
Contributor

@up1512001 up1512001 commented Jun 18, 2024

What?

  • updated aria label text as site text

Why?

Fixes #62644

How?

  • using site title for aria label label={ decodeEntities( siteTitle ) }

Screenshots or screencast

Screenshot 2024-06-18 at 15 42 47
Screen.Recording.2024-06-18.at.23.00.18.mov

Copy link

github-actions bot commented Jun 18, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: up1512001 <up1512001@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@skorasaurus skorasaurus added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jun 18, 2024
@youknowriad youknowriad added the Needs Accessibility Feedback Need input from accessibility label Jun 18, 2024
@youknowriad youknowriad added the Needs Design Feedback Needs general design feedback. label Jun 18, 2024
@youknowriad
Copy link
Contributor

I think @richtabor worked on this recently, so this might be a design regression a bit.

@afercia afercia added the [Type] Bug An existing feature does not function as intended label Jun 19, 2024
Copy link
Contributor

@afercia afercia left a comment

Choose a reason for hiding this comment

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

Please see inline comments.

@up1512001
Copy link
Contributor Author

@afercia addressed your feedback please review the PR.


svg {
opacity: 0;
vertical-align: middle;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
vertical-align: middle;
vertical-align: middle;
transition: opacity 0.1s ease-in-out;
@include reduce-motion("transition");

@@ -36,8 +36,17 @@

&:hover,
&:focus,
&:active {
color: $gray-200;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this color needs to be kept at least for the :active state otherwise when clicking the link, the text will become black on a black background. Screenshot:
Screenshot 2024-06-24 at 11 34 43

Copy link
Contributor

Choose a reason for hiding this comment

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

Also, the button padding should be adjusted to keep the current spacing as much as possible. Screenshot with comparison of current trunk and this PR:

Screenshot 2024-06-24 at 11 34 55

@up1512001
Copy link
Contributor Author

@afercia updated as per your feedback. please check.

Copy link
Member

@richtabor richtabor left a comment

Choose a reason for hiding this comment

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

I think @richtabor worked on this recently, so this might be a design regression a bit.

Yes, let's resolve the a11y feedback apart from icon changes.

The ExternalLink component has been updated to leverage the ↗ unicode character. This is intended to share the same DNA as that component, as it is also a text only external link.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site title: link text and accessible name mismatch
5 participants