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

Site Editor: fix the 'back to Dashboard' links labelling #49657

Closed
afercia opened this issue Apr 7, 2023 · 1 comment · Fixed by #49659
Closed

Site Editor: fix the 'back to Dashboard' links labelling #49657

afercia opened this issue Apr 7, 2023 · 1 comment · Fixed by #49659
Assignees
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Apr 7, 2023

Description

In the Site Editor, there are two links to go back to the Dashboard. They're visually presented as 'icon buttons'.

The first one is the WP / site logo. It's labelled aria-label="Go back to the dashboard".
The second one is the 'back' icon button. It's labelled aria-label="Navigate to the Dashboard".

Also:

  • The WP / sito logo doesn't have a tooltip. Icon buttons must visually expose their accessible name in some way. At the vry least, with a tooltip.
  • The back icon button tooltip text is just Dashboard, which mismatches the actual accessible name.

go back links

tooltip

This is less than ideal from an accessibility perspective.

  • Controls that do the same thing should be labelled consistently.
  • A control's tooltip is meant to visually expose its accessible name. Tooltip text and aria-label must match.

Also, ideally the visuals of an icon button should clearly suggest its actual accessible name. Users should be able to guess the actual accessible name by the icon. This is particularly important for speech recognition software users. As a user:

  • I do see an icon that looks like a left arrow. That mimis the well-known convention of the browsers back button. It suggest me the idea of 'back', 'go back;.
  • Based on that, I'd try a voice command like Click 'back'.
  • That voice command would fail because the actual accessible name is Navigate to the Dashboard.

Step-by-step reproduction instructions

  • Go to the Site editor in 'browse mode'.
  • Inspect the source of the WP / site logo at the top left.
  • Observe the lionk aria-label is Go back to the dashboard.
  • Observe the link doesn't show a tooltip on hover or focus.
  • Inspect the source of the back icon button.
  • Observe the link aria-label is Navigate to the Dashboard.
  • Observe the link tooltip is Dashboard.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@afercia afercia added [Type] Bug An existing feature does not function as intended [a11y] Labelling [Package] Edit Site /packages/edit-site labels Apr 7, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Apr 7, 2023
@annezazu
Copy link
Contributor

annezazu commented Apr 7, 2023

Going to add this to 6.2.1's board for consideration!

@annezazu annezazu moved this to 🐛 Punted to 6.2.1 in WordPress 6.2 Editor Tasks Apr 7, 2023
@annezazu annezazu moved this to ❓ Triage in WordPress 6.2.x Editor Tasks Apr 10, 2023
@github-project-automation github-project-automation bot moved this from ❓ Triage to ✅ Done in WordPress 6.2.x Editor Tasks Apr 11, 2023
@github-project-automation github-project-automation bot moved this from 🐛 Punted to 6.2.1 to ✅ Done in WordPress 6.2 Editor Tasks Apr 11, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 11, 2023
@priethor priethor added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed [a11y] Labelling labels Jul 24, 2023
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). [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

3 participants