WordPress
Move handbook meta info inside complementary landmark
Closes #400.
This PR moves the handbook meta above the chapter list in the HTML hierarchy and then uses flex order to visually place it below the chapter list, and also adding a dividing line between them.
Below is a screencast that shows when entering the complementary landmark, the screen reader first reads the handbook content and then the chapter list, which I suppose meets the request. Regarding the desktop view and @jasmussen's question about how it would look in mobile view when the three columns just became rows, could @WordPress/meta-design take a look and give some feedback?
https://github.com/WordPress/wporg-developer/assets/18050944/ff0604a9-a5e4-4bd4-863b-40627498b4bf
This introduces a difference between source order and visual order, so when tabbing through, the focus moves to the meta before the chapter list. This works for sighted mouse users & non-sighted keyboard users, but could be confusing for anyone sighted using keyboard nav or a screen reader. Especially when the meta is pushed down the screen by the Chapter list, the focus jumps around a lot.
https://github.com/WordPress/wporg-developer/assets/541093/813df9d2-4737-40ff-9526-63b72ca3df12
This is worse on small screens, since the chapter list is already pulled out of order, it jumps up and down.
https://github.com/WordPress/wporg-developer/assets/541093/87d40b75-8e15-4250-ba8d-d6bd515236c2
Maybe it could be moved to after the Chapters list in the source as well?
The source order & visual order is the challenge at hand here, because visually it looks nice. The main challenge here is that hierarchically, ideally we have chapters > toc > content. Across desktop that's a row of 3 columns, on mobile it's a stack of 2 collapsed elements (chapters and docs in thar order), and then content.
Can the meta info live inside the chapters element? Would that thread the needle?
