Changeset 58405

Timestamp:

06/13/2024 01:55:46 PM (6 months ago)

Author:

joedolson

Message:

Administration: A11y: Add visible labels in theme UI.

Finish task to replace placeholders used for labels with visible label elements. Add label elements in theme browser and theme installation screen. Change position of search input to match other user interfaces in WordPress.

Also crediting all contributors to ticket #61389, which this also closes.

Props joedolson, rcreators, sabernhardt, balub, rejaulalomkhan, syamraj24, nazmul111, krupajnanda, huzaifaalmesbah, hmbashar, mdnesarmridha, colorful-tones, printsachen1.
Fixes #40331, #61389.

Location:

trunk/src

Files:

• js/_enqueues/wp/theme.js (modified) (3 diffs)
• wp-admin/css/themes.css (modified) (4 diffs)
• wp-admin/network/site-themes.php (modified) (1 diff)
• wp-admin/network/themes.php (modified) (1 diff)
• wp-admin/theme-install.php (modified) (2 diffs)
• wp-admin/themes.php (modified) (2 diffs)

trunk/src/js/_enqueues/wp/theme.js

@@ -97 +97 @@
 
     // Defines search element container.
-    searchContainer: $( '.search-form' ),
+    searchContainer: $( '.search-form .search-box' ),
 
     // Search input and view
@@ -119 +119 @@
         view.render();
         this.searchContainer
-            .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
+            .append( $.parseHTML( '<label for="wp-filter-search-input">' + l10n.search + '</label>' ) )
             .append( view.el )
             .on( 'submit', function( event ) {
@@ -1360 +1360 @@
 
     attributes: {
-        placeholder: l10n.searchPlaceholder,
         type: 'search',
         'aria-describedby': 'live-search-desc'

trunk/src/wp-admin/css/themes.css

@@ -20 +20 @@
 }
 
-.themes-php:not(.network-admin) .wrap h1 {
-    margin-bottom: 15px;
-}
-
 .themes-php .wrap h1 .button {
     margin-left: 20px;
@@ -30 +26 @@
 /* Search form */
 .themes-php .search-form {
-    display: inline;
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    top: 0;
+    gap: .5rem;
+    width: 100%;
+    justify-content: end;
 }
 
 .themes-php .wp-filter-search {
     position: relative;
-    top: -2px;
-    left: 20px;
     margin: 0;
     width: 280px;
@@ -956 +956 @@
         left: 0;
         right: 0;
-        margin: -5px 0 20px;
         width: 100%;
         max-width: 280px;
+    }
+
+    .theme-install-php .wp-filter p.search-box {
+        display: grid;
+        row-gap: .5rem;
     }
 
@@ -1028 +1032 @@
 .theme-install-php .wp-filter {
     padding-left: 20px;
+}
+
+/* Override column gap adjustment in media library. */
+@media only screen and (max-width: 1000px) {
+    .theme-install-php .wp-filter p.search-box {
+        column-gap: .5rem;
+    }
 }
 

trunk/src/wp-admin/network/site-themes.php

@@ -238 +238 @@
 
 <form method="get">
-<?php $wp_list_table->search_box( __( 'Search Installed Themes' ), 'theme' ); ?>
+<?php $wp_list_table->search_box( __( 'Search installed themes' ), 'theme' ); ?>
 <input type="hidden" name="id" value="<?php echo esc_attr( $id ); ?>" />
 </form>

trunk/src/wp-admin/network/themes.php

@@ -461 +461 @@
 
 <form method="get">
-<?php $wp_list_table->search_box( __( 'Search Installed Themes' ), 'theme' ); ?>
+<?php $wp_list_table->search_box( __( 'Search installed themes' ), 'theme' ); ?>
 </form>
 

trunk/src/wp-admin/theme-install.php

@@ -57 +57 @@
             'addNew'              => __( 'Add New Theme' ),
             'search'              => __( 'Search Themes' ),
-            'searchPlaceholder'   => __( 'Search themes...' ), // Placeholder (no ellipsis).
             'upload'              => __( 'Upload Theme' ),
             'back'                => __( 'Back' ),
@@ -218 +217 @@
         <button type="button" class="button drawer-toggle" aria-expanded="false"><?php _e( 'Feature Filter' ); ?></button>
 
-        <form class="search-form"></form>
+        <form class="search-form"><p class="search-box"></p></form>
 
         <div class="favorites-form">

trunk/src/wp-admin/themes.php

@@ -233 +233 @@
         'l10n'     => array(
             'addNew'            => __( 'Add New Theme' ),
-            'search'            => __( 'Search Installed Themes' ),
-            'searchPlaceholder' => __( 'Search installed themes...' ), // Placeholder (no ellipsis).
+            'search'            => __( 'Search installed themes' ),
             /* translators: %d: Number of themes. */
             'themesFound'       => __( 'Number of Themes found: %d' ),
@@ -253 +252 @@
         <span class="title-count theme-count"><?php echo ! empty( $_GET['search'] ) ? __( '&hellip;' ) : count( $themes ); ?></span>
     </h1>
-
     <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
         <a href="<?php echo esc_url( admin_url( 'theme-install.php' ) ); ?>" class="hide-if-no-js page-title-action"><?php echo esc_html__( 'Add New Theme' ); ?></a>
     <?php endif; ?>
-
-    <form class="search-form"></form>
-
     <hr class="wp-header-end">
+    <form class="search-form search-themes"><p class="search-box"></p></form>
+
 <?php
 if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) {