Changeset 2332

Timestamp:

01/20/2016 12:06:07 AM (7 years ago)

Author:

samuelsidler

Message:

WordPress.tv: Improve accessibility of search form.

Props SergeyBiryukov.
Fixes #1473.

Location:

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2

Files:

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

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/header.php

@@ -35 +35 @@
 
             <form id="searchform" name="searchform" method="get" action="<?php echo $wptv->home_url( '/' ); ?>">
+                <label for="searchbox" class="screen-reader-text"><?php esc_attr_e( 'Search WordPress.tv', 'wptv' ); ?></label>
                 <input type="search" placeholder="<?php esc_attr_e( 'Search WordPress.tv', 'wptv' ); ?>" id="searchbox" name="s" value="<?php the_search_query(); ?>"  />
+                <input type="submit" value="<?php esc_attr_e( 'Search', 'wptv' ); ?>" />
             </form>
 

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/style.css

@@ -124 +124 @@
 }
 
+.screen-reader-text {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute !important;
+    width: 1px;
+    /* many screen reader and browser combinations announce broken words as they would appear visually */
+    word-wrap: normal !important;
+}
+
 a, a:link, a:visited {
     color: #21759b;
@@ -302 +312 @@
 }
 
-#searchform #searchbox {
+#searchform #searchbox,
+#searchform input[type=submit] {
     margin-top: 15px;
+}
+
+#searchform #searchbox:focus {
+    border-color: #5b9dd9;
+    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
+    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 }