Twenty Fourteen: Skip link out of order

[joedolson]

The skip link should be the first focusable object in the page; it's disorienting for it to appear in any other order. The skip link should be moved to the top of the body.

Trac ticket: 62969

[manojmaharrshi]

Test Report

Description

This report validates whether the focus for Skip link is moved to top of the order

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8326.diff

Environment

• WordPress: 6.8-alpha-59840
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 133.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 4.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.2

Actual Results

1. ✅ Issue resolved with patch.

[vgnavada]

Test Report

Description

Hi, I've tested the TWENTY FOURTEEN theme with the added fix on Playground and it is working as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8326

Environment

• WordPress: 6.8-alpha-20250217.045205
• PHP: 7.4.31-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 132.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 4.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Also working fine in responsive versions

Supplemental Artifacts

Add as Attachment

[shailu25]

Test Report

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

Environment:
WordPress - 6.7.2
OS - Windows
Browser - Firefox
Theme: Twenty Fourteen
PHP - 8.2.12
Active Plugin: None

Actual Results:

• Issue resolved with patch.✅

Screenshots:

• Added Attachment

[shailu25]

After Patch

[joedolson]

Refreshed patch

[joedolson]

Refreshed the patch to account for changes in [59907]

[joedolson]

In 59914:

Bundled Themes: Twenty Fourteen: Move skip link to top of body.

Move the skip link to the top of the body content, so it is the first focusable item on the page.

Props joedolson, abcd95, manojmaharrshi, vganavda, shailu25.
Fixes #62969.

Here are screenshots for Twenty Fourteen's "Skip to content" link.

Before r59914:

Now, the skip link appears:

• in the top corner of a header image when the site has one
• below the header bar on large screens when the site does not have a header image (because .site has relative positioning)
• in front of the header bar on small screens when the site does not have a header image

[sabernhardt]

I like having the skip link inside the #page div for Twenty Twelve and Twenty Thirteen. However, with Twenty Fourteen's relative positioning on .site, adding it before the div might be a better choice. I'm reopening the ticket to consider both options.

If the link is worth moving earlier again, anyone who clicks a link directing to #page would not reach the skip link by tabbing forward, but the skip link itself could have a new id.

Moves skip link between wp_body_open() and <div id="page">, as @himanshupathak95 originally had in the first pull request.

With this, the link would appear consistently in the top corner.

Trac 62969

I also arranged the screenshots to compare each version side-by-side.

[joedolson]

This seems like a reasonable change. Having better consistency in position will be less disorienting to users. Marking for commit.

[joedolson]

In 59991:

Bundled Themes: Move skip link from #page to body in Twenty Fourteen.

Improvement following [59914] to make the position of the skip to content link consistent across different states and viewports.

Props sabernhardt, himanshupathak95, joedolson.
Fixes #62969.