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: Incorrect headings hierarch in the 'Manage all' screens #52254

Closed
afercia opened this issue Jul 3, 2023 · 3 comments · Fixed by #52271
Closed

Site Editor: Incorrect headings hierarch in the 'Manage all' screens #52254

afercia opened this issue Jul 3, 2023 · 3 comments · Fixed by #52271
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 [Type] Regression Related to a regression in the latest release

Comments

@afercia
Copy link
Contributor

afercia commented Jul 3, 2023

Description

Note: In the following screenshots, I'm using the HeadingsMap browser extension (available for Chrome and Firefox) to visually illustrate the headings in the page.

In 'Manage all templates', 'Manage all template parts', and possibly other 'manage all' screens, the headings hierarchy is incorrect and skips a few levels. A correct headings hierarchy is of fundamental importance for screen rearer users to efficiently navigate the content.

Edit: Please note there are also two H1 headings, which is incorrect.

I seem to recall the hierarchy was already fixed in a PR a while ago so I'm going to mark this issue as a regression.

On a side note: it would be great to re-focus all designers and developers attention to always check for a correct headings hierarchy. It's such a simple thing to implement but in the history of this project there have been several cases where new features have been shipped with a broken headings structure. @mtias I'd greatly appreciate any suggestions on the best way to train developers on this and make sure everybody is always focused on using headings correctly 🙏
See also #52253

This is basic semantics / accessibility / HTML. It would be great to just not use heading levels randomly.

ScreenshotL All templates:

Screenshot 2023-07-03 at 16 36 55

ScreenshotL All template parts:

Screenshot 2023-07-03 at 15 43 39

Step-by-step reproduction instructions

  • Use the HeadingsMap browser extension.
  • Go to the Site editor > Design > Templates > Manage all templates.
  • Observe the headings hierarchy is incorrect.
  • Go to the Site editor > Design > Patterns > Manage all template parts.
  • Observe the headings hierarchy is incorrect.

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 [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Regression Related to a regression in the latest release [Package] Edit Site /packages/edit-site labels Jul 3, 2023
@annezazu
Copy link
Contributor

annezazu commented Jul 3, 2023

Once more, adding to 6.3 and thank you for opening this! Can you confirm what version you are using when you have a chance?

@afercia
Copy link
Contributor Author

afercia commented Jul 4, 2023

Trunk :)

@ramonjd
Copy link
Member

ramonjd commented Jul 4, 2023

Would something like this be better?

Screenshot 2023-07-04 at 5 14 09 pm

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 4, 2023
@ramonjd ramonjd moved this from 📥 Todo to 🔎 Needs Review in WordPress 6.3.x Editor Tasks Jul 4, 2023
@github-project-automation github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 6.3.x Editor Tasks Jul 5, 2023
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label 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 [Type] Regression Related to a regression in the latest release
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

4 participants