Changeset 59857

Timestamp:

02/22/2025 01:36:54 AM (3 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-content/themes/twentyten

Files:

• header.php (modified) (2 diffs)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyten/header.php

@@ -64 +64 @@
 <?php wp_body_open(); ?>
 <div id="wrapper" class="hfeed">
+    <?php // Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. ?>
+    <a href="#content" class="screen-reader-text skip-link"><?php _e( 'Skip to content', 'twentyten' ); ?></a>
     <div id="header">
         <div id="masthead">
@@ -102 +104 @@
 
             <div id="access" role="navigation">
-                <?php // Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. ?>
-                <div class="skip-link screen-reader-text"><a href="#content"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
                 <?php
                 /*

trunk/src/wp-content/themes/twentyten/style.css

@@ -349 +349 @@
 }
 
+a.skip-link:focus {
+    background-color: #ddd;
+    clip-path: none;
+    color: #333;
+    display: block;
+    font-size: 16px;
+    height: auto;
+    left: 5px;
+    line-height: 1.5;
+    padding: 16px 24px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000;
+}
 
 /* =Header