FSE: Add skip link

[carolinan]

A skip link helps users skip repetitive blocks of content, like a header area and top navigation menu.

A skip link needs to:

• Be the first focusable object on the page

• Become visible when it receives focus

• Point to the content area of the site correctly

• A skip link may be hidden until it receives focus.

• Multiple skip links may also be used.

This is part of the WCAG guideline stating that a website must be navigable.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
https://make.wordpress.org/themes/handbook/review/accessibility/required/#skip-links

Theme authors add this to their theme as the first element of the body manually, or
by using wp_body_open().

The target is usually the ID of the content wrapper, for example the main landmark.

Because this is an accessibility feature, it should be available for all themes,
not relying on the theme author to remember to add it.

Because the skip link must be the first element of a page, it is not suitable for a
paragraph block with a link and a skip-link CSS class, because the block can then be moved and removed.

Here is one thought on how the skip link could work for FSE,
props @aristath:

If the template in FSE contains a "content" block, then we could add an ID to it and automatically
add the skip-link.
If there is no content block, then the skip-link would point to the loop block.
If there is no loop-block either, then make an educated guess and point to the 1st title or p block.

[aristath]

I've been thinking about this one and try to figure out how we can handle it... It would be relatively easy to do via JS on the frontend but not as easy to do via PHP server-side.
I'm not sure adding JS on the frontend would be an acceptable solution 🤔
If it is then I can start working on it

---

EDIT: A quick proof of concept can be seen on my playground: aristath/q@bb636ee#diff-35544253460425360293cc0e84b7b037R26-R78

[mtias]

Just a note here that a next step on template parts is adding some structural semantics (#26599), so that we can start identifying parts of a design better within the editing flow — from there we'll move on to ensure things like IDs, doc outline support, semantic HTML, etc, are in good shape, which will then allow doing tasks like this one quite straightforwardly.

[aristath]

PR in #28946

[aristath]

Closing this one, it was fixed in #30336