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

Move handbook meta info inside complementary landmark #400

Open
adamwoodnz opened this issue Nov 21, 2023 · 7 comments · May be fixed by #504
Open

Move handbook meta info inside complementary landmark #400

adamwoodnz opened this issue Nov 21, 2023 · 7 comments · May be fixed by #504
Assignees
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc layout Redesign
Milestone

Comments

@adamwoodnz
Copy link
Contributor

adamwoodnz commented Nov 21, 2023

Would it be possible to also move the meta information inside the complementary landmark? It would likely be more discoverable just above the Chapters heading.

Originally posted by @alexstine in #368 (comment)

@adamwoodnz adamwoodnz added this to the Iteration 1 milestone Nov 21, 2023
@adamwoodnz adamwoodnz added layout Accessibility Issues related to keyboard navigation, screen readers, etc Redesign labels Nov 21, 2023
@adamwoodnz adamwoodnz modified the milestones: Iteration 1, MVP Nov 22, 2023
@adamwoodnz adamwoodnz modified the milestones: MVP, Iteration 1 Dec 4, 2023
@renintw renintw self-assigned this Jan 16, 2024
@renintw
Copy link
Contributor

renintw commented Jan 22, 2024

@adamwoodnz, would you mind sharing more context here? What does the 'meta information' mentioned here refer to?
Thanks 🙏

@adamwoodnz
Copy link
Contributor Author

adamwoodnz commented Jan 29, 2024

Sure, the request is to move the handbook article meta info from the bottom of the article into the complementary landmark, ie. the container for the Chapter List. If we make this change in the markup, visually it would mean moving from

Screenshot 2024-01-29 at 4 10 41 PM

to

Screenshot 2024-01-29 at 4 09 52 PM

If this isn't a desirable visual change we could duplicate the content and use the screen-reader-text class in the sidebar, and aria-hidden in the footer.

@WordPress/meta-design what do you think about the request please?

@jasmussen
Copy link
Collaborator

I think we can probably move it in there. How would it look if the three columns just became rows? If need be we can refine the prose a bit.

@fcoveram
Copy link

Agree we can move it.

In addition to making them rows, I would add the TOC divider above the "First published item with the same spacing values to split the area visually.

Table of content with divider highlighted

@renintw
Copy link
Contributor

renintw commented Jan 29, 2024

It would likely be more discoverable just above the Chapters heading.

I noticed Alex initially suggested placing the meta info above the Chapters heading. I'm curious about the potential impact if we place it on the bottom of the Chapter List as it's more visually coherent. cc @alexstine

How would it look if the three columns just became rows?

Does it make sense to put it on top of the collapsed chapter list dropdown?
Or on the bottom of the chapter list (consistent with the relative position on the desktop view)
cc @WordPress/meta-design

Screenshot 2024-01-30 at 00 34 05

@adamwoodnz
Copy link
Contributor Author

adamwoodnz commented Jan 29, 2024

I noticed Alex initially suggested placing the meta info above the Chapters heading. I'm curious about the potential impact if we place it on the bottom of the Chapter List as it's more visually coherent.

I agree it would look better below the chapters when positioned to the side. We could place it above in the markup though and use flex order to place it below visually.

@alexstine
Copy link

@adamwoodnz Doing this would cause an WCAG failure. You are unable to move this information visually because of the tabbable link.

Improve it on GitHub: Contributor Guide”

https://developer.wordpress.org/block-editor/contributors/

Essentially, the focus indicator would be lost when the link is focussed wrapped in the screen-reader-text.

Thanks.

@renintw renintw linked a pull request Feb 19, 2024 that will close this issue
@adamwoodnz adamwoodnz moved this to 🏗 In progress in WordPress.org Apr 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Issues related to keyboard navigation, screen readers, etc layout Redesign
Projects
Status: 🏗 In progress
Development

Successfully merging a pull request may close this issue.

5 participants