Move handbook meta info inside complementary landmark

[adamwoodnz]

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)

[renintw]

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

[adamwoodnz]

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

to

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]

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]

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.

[renintw]

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

[adamwoodnz]

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]

@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.