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.
Built from https://develop.svn.wordpress.org/trunk@58405


git-svn-id: http://core.svn.wordpress.org/trunk@57854 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2024-06-13 13:57:10 +00:00
parent c60358fdb2
commit 4d68eaaa45
11 changed files with 50 additions and 33 deletions

View File

@ -20,23 +20,23 @@ body.js .theme-browser.search-loading {
clear: both; clear: both;
} }
.themes-php:not(.network-admin) .wrap h1 {
margin-bottom: 15px;
}
.themes-php .wrap h1 .button { .themes-php .wrap h1 .button {
margin-right: 20px; margin-right: 20px;
} }
/* Search form */ /* Search form */
.themes-php .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 { .themes-php .wp-filter-search {
position: relative; position: relative;
top: -2px;
right: 20px;
margin: 0; margin: 0;
width: 280px; width: 280px;
} }
@ -956,11 +956,15 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
clear: both; clear: both;
right: 0; right: 0;
left: 0; left: 0;
margin: -5px 0 20px;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
} }
.theme-install-php .wp-filter p.search-box {
display: grid;
row-gap: .5rem;
}
.theme-browser .theme.add-new-theme span:after { .theme-browser .theme.add-new-theme span:after {
font: normal 60px/90px dashicons; font: normal 60px/90px dashicons;
width: 80px; width: 80px;
@ -1030,6 +1034,13 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
padding-right: 20px; padding-right: 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;
}
}
.theme-install-php a.upload, .theme-install-php a.upload,
.theme-install-php a.browse-themes { .theme-install-php a.browse-themes {
cursor: pointer; cursor: pointer;

File diff suppressed because one or more lines are too long

View File

@ -19,23 +19,23 @@ body.js .theme-browser.search-loading {
clear: both; clear: both;
} }
.themes-php:not(.network-admin) .wrap h1 {
margin-bottom: 15px;
}
.themes-php .wrap h1 .button { .themes-php .wrap h1 .button {
margin-left: 20px; margin-left: 20px;
} }
/* Search form */ /* Search form */
.themes-php .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 { .themes-php .wp-filter-search {
position: relative; position: relative;
top: -2px;
left: 20px;
margin: 0; margin: 0;
width: 280px; width: 280px;
} }
@ -955,11 +955,15 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
clear: both; clear: both;
left: 0; left: 0;
right: 0; right: 0;
margin: -5px 0 20px;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
} }
.theme-install-php .wp-filter p.search-box {
display: grid;
row-gap: .5rem;
}
.theme-browser .theme.add-new-theme span:after { .theme-browser .theme.add-new-theme span:after {
font: normal 60px/90px dashicons; font: normal 60px/90px dashicons;
width: 80px; width: 80px;
@ -1029,6 +1033,13 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
padding-left: 20px; 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;
}
}
.theme-install-php a.upload, .theme-install-php a.upload,
.theme-install-php a.browse-themes { .theme-install-php a.browse-themes {
cursor: pointer; cursor: pointer;

File diff suppressed because one or more lines are too long

View File

@ -96,7 +96,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
}, },
// Defines search element container. // Defines search element container.
searchContainer: $( '.search-form' ), searchContainer: $( '.search-form .search-box' ),
// Search input and view // Search input and view
// for current theme collection. // for current theme collection.
@ -118,7 +118,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
// Render and append after screen title. // Render and append after screen title.
view.render(); view.render();
this.searchContainer 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 ) .append( view.el )
.on( 'submit', function( event ) { .on( 'submit', function( event ) {
event.preventDefault(); event.preventDefault();
@ -1359,7 +1359,6 @@ themes.view.Search = wp.Backbone.View.extend({
searching: false, searching: false,
attributes: { attributes: {
placeholder: l10n.searchPlaceholder,
type: 'search', type: 'search',
'aria-describedby': 'live-search-desc' 'aria-describedby': 'live-search-desc'
}, },

File diff suppressed because one or more lines are too long

View File

@ -237,7 +237,7 @@ if ( isset( $_GET['enabled'] ) ) {
<p><?php _e( 'Network enabled themes are not shown on this screen.' ); ?></p> <p><?php _e( 'Network enabled themes are not shown on this screen.' ); ?></p>
<form method="get"> <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 ); ?>" /> <input type="hidden" name="id" value="<?php echo esc_attr( $id ); ?>" />
</form> </form>

View File

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

View File

@ -56,7 +56,6 @@ wp_localize_script(
'l10n' => array( 'l10n' => array(
'addNew' => __( 'Add New Theme' ), 'addNew' => __( 'Add New Theme' ),
'search' => __( 'Search Themes' ), 'search' => __( 'Search Themes' ),
'searchPlaceholder' => __( 'Search themes...' ), // Placeholder (no ellipsis).
'upload' => __( 'Upload Theme' ), 'upload' => __( 'Upload Theme' ),
'back' => __( 'Back' ), 'back' => __( 'Back' ),
'error' => sprintf( 'error' => sprintf(
@ -217,7 +216,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<button type="button" class="button drawer-toggle" aria-expanded="false"><?php _e( 'Feature Filter' ); ?></button> <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"> <div class="favorites-form">
<?php <?php

View File

@ -232,8 +232,7 @@ wp_localize_script(
), ),
'l10n' => array( 'l10n' => array(
'addNew' => __( 'Add New Theme' ), 'addNew' => __( 'Add New Theme' ),
'search' => __( 'Search Installed Themes' ), 'search' => __( 'Search installed themes' ),
'searchPlaceholder' => __( 'Search installed themes...' ), // Placeholder (no ellipsis).
/* translators: %d: Number of themes. */ /* translators: %d: Number of themes. */
'themesFound' => __( 'Number of Themes found: %d' ), 'themesFound' => __( 'Number of Themes found: %d' ),
'noThemesFound' => __( 'No themes found. Try a different search.' ), 'noThemesFound' => __( 'No themes found. Try a different search.' ),
@ -252,14 +251,12 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<h1 class="wp-heading-inline"><?php esc_html_e( 'Themes' ); ?> <h1 class="wp-heading-inline"><?php esc_html_e( 'Themes' ); ?>
<span class="title-count theme-count"><?php echo ! empty( $_GET['search'] ) ? __( '&hellip;' ) : count( $themes ); ?></span> <span class="title-count theme-count"><?php echo ! empty( $_GET['search'] ) ? __( '&hellip;' ) : count( $themes ); ?></span>
</h1> </h1>
<?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?> <?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> <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; ?> <?php endif; ?>
<form class="search-form"></form>
<hr class="wp-header-end"> <hr class="wp-header-end">
<form class="search-form search-themes"><p class="search-box"></p></form>
<?php <?php
if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) { if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) {
wp_admin_notice( wp_admin_notice(

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.6-beta2-58403'; $wp_version = '6.6-beta2-58405';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.