Fix order and styles for skip link in Twenty Ten

[sabernhardt]

• Moves the skip link immediately inside the <div id="wrapper">.
• Adds the screen-reader-text and skip-link classes directly on the a element.
• Adds :focus styles to fit the theme.

Trac 14795

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props sabernhardt, mukesh27, poena, joedolson.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[sabernhardt]

Notes on the ruleset:

• The specificity needs to be higher than .skip-link:focus because the stylesheet prints before block-library/style.css is enqueued. I chose a.skip-link:focus for a minimal increase, to reduce the chances of overriding custom styles.
• This already uses clip-path, expecting Trac 62238 to replace clip with clip-path in the .screen-reader-text ruleset.
• The #333 text color comes from the theme's body text color (in the main content area).
• The 16px font size matches the main content area, which is also in a serif font. If it is any smaller, it probably should be changed to the sans-serif font.
• The line-height is unitless, and body text has a line-height of 1.5 times the font size.
• The padding values are based on the font-size and line-height.
• The background-color, display, height, left, text-decoration, top, width, and z-index match the values in block-library/style.css.

I experimented with a border to make it stand out more, but that was too much with my browsers' :focus-visible outline. The skip link could add an outline like 2px solid #06c, but that would be inconsistent with any other interactive element.

[carolinan]

is the clip-path: none; intended to override an existing style?

[sabernhardt]

Yes, the change to clip-path was just committed in r59832.

I made this slightly early and needed to sync my branch.

[sabernhardt]

These screenshots show the page with a header image and then without it.

Using Firefox/Windows, logged in, the skip link appears in front of the admin toolbar:

Using Chrome/Windows, logged out, the skip link appears in the top corner:

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[joedolson]

This looks good to me.

[joedolson]

In r59857