vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Administration: Consistent positioning and size of search form.

Browse Source 
Move the visual positioning of the posts search form into it's DOM position. Fixes an accessibility bug where the keyboard focus sequence did not match the visual order. Change the media search form in list view to match the format of other post views. Give search forms a consistent layout on mobile.

Props oglekler, sabernhardt, joedolson.
Fixes #57949.

git-svn-id: https://develop.svn.wordpress.org/trunk@56023 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2023-06-25 17:20:01 +00:00
parent ed54bb7444
commit ced07754fa
5 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/wp-admin/css/common.css
View File

@ -1081,7 +1081,6 @@ th.action-links {
}
.wp-filter .search-form input[type="search"] {
margin: 1px 0;
width: 280px;
max-width: 100%;
}
@ -4063,6 +4062,7 @@ img {
}
.wp-filter .search-form input[type="search"] {
width: 100%;
font-size: 1rem;
}
@ -4116,10 +4116,6 @@ img {
.nav-tab-active:focus:active {
border-bottom: 1px solid #c3c4c7;
}
.wp-filter .search-form input[type="search"] {
width: 100%;
}
}
@media screen and (max-width: 480px) {

6
src/wp-admin/css/forms.css
View File

@ -1650,11 +1650,9 @@ table.form-table td .updated p {
p.search-box {
float: none;
position: absolute;
bottom: 0;
width: 98%;
height: 90px;
width: 100%;
margin-bottom: 20px;
display: flex;
}
p.search-box input[name="s"] {

10
src/wp-admin/css/media.css
View File

@ -583,16 +583,6 @@ border color while dragging a file over the uploader drop area */
margin-top: 0;
}
.media-search-input-label {
margin: 0 .2em 0 0;
vertical-align: baseline;
}
.media-frame.mode-grid .media-search-input-label {
position: static;
margin: 0 .5em 0 0;
}
.attachments-browser .media-toolbar-secondary > .media-button {
margin-right: 10px;
}

12
src/wp-admin/includes/class-wp-media-list-table.php
View File

@ -312,8 +312,16 @@ class WP_Media_List_Table extends WP_List_Table {
</div>
<div class="search-form">
<label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
<input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
<p class="search-box">
<label class="screen-reader-text" for="media-search-input">
<?php
/* translators: Hidden accessibility text. */
esc_html_e( 'Search Media' );
?>
</label>
<input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>">
<input id="search-submit" type="submit" class="button" value="<?php esc_attr_e( 'Search Media' ); ?>">
</p>
</div>
</div>
<?php

15
src/wp-includes/css/media-views.css
View File

@ -924,14 +924,6 @@
max-width: 100%;
}
.media-frame .media-search-input-label {
position: absolute;
left: 0;
top: 10px;
margin: 0;
line-height: 1;
}
/**
* Attachments
*/
@ -1217,6 +1209,7 @@
.mode-grid .attachments-browser .media-toolbar-primary {
display: flex;
align-items: center;
column-gap: .5rem;
}
.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
@ -2806,7 +2799,11 @@
}
.mode-grid .attachments-browser .media-toolbar-primary {
display: block;
display: flex;
}
.mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
width: 100%;
}
.media-sidebar .copy-to-clipboard-container .success,