Twenty Ten: move skip link earlier

[anonymized_3085]

Having a skip link is good, not showing it when tabbing through the page is bad. These minor tweaks fix this and display it 'over' the header image.

[anonymized_3085]

from #14782

[anonymized_3085]

Oh and ideally it shouldn't be called screen-reader-text as it is inaccurate. Sighted people who navigate using a keyboard find it useful as well.

[iammattthomas]

I like the idea here, but the styling isn't great -- no background, white text, full-width of the page, makes the link difficult to read, depending on the header image. Should be Helvetica to match the text in the menu, too.

[anonymized_3085]

can you confirm which browser you used? the skip link background was supposed to be restricted to the same width as the the horizontal menu.

[anonymized_3085]

I won't correct this one as #14798 supercedes it.

[joedolson]

While going through testing the progress on #62238, I observed that Twenty Ten's skip links do not become visible and are placed in the wrong content order. While this is a very old theme, Twenty Ten does still have more than 60,000 active installations, and fixing this fundamental issue should be dealt with.

• 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

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:

[sabernhardt]

For child themes, I do not perceive any new problem due to having changes in both the header.php and style.css.

• If a child theme replaces the main stylesheet, block-library/style.css has default .screen-reader-text:focus styles to show the skip link (with smaller text).
• If a site replaces the main stylesheet and removes the block-library styles (for example, with the Disable Gutenberg plugin), then the skip link would not appear when focused. This hypothetical site should update the styles, but that case is no worse than the current situation without a child theme.
• If a child theme replaces the header.php template, the custom template should be updated to fix the skip link's location and classes (if it was not done already).

[shailu25]

Test Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/8329

Environment:
WordPress - 6.8-alpha-59840
OS - Windows
Browser - Firefox
Theme: Twenty Ten
PHP - 8.2.12
Active Plugin: None

Actual Results:

• Issue Resolved with Patch.✅

[shailu25]

After Patch.

[joedolson]

I agree with you that any issues with prior customizations are minor; the only case where this could cause problems is where an extender customized the CSS, but not the HTML. But even so, this will still work; it just won't have any custom design characteristics the author might have intended.

[joedolson]

In 59857:

Bundled Theme: A11y: Fix skip link in Twenty Ten.

Fix the source positioning of the skip link in Twenty Ten and add CSS for visibility on focus.

Props anonymized_3085, iammattthomas, joedolson, sabernhardt, shailu25, mukesh27, poena.
Fixes #14795.

In r59857