<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[46418] trunk/src: Accessibility: Media: Improve the search media field labelling.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/46418">46418</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/46418","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>afercia</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-10-07 12:41:50 +0000 (Mon, 07 Oct 2019)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Accessibility: Media: Improve the search media field labelling.
Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels.
Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format.
Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example:
- users with cognitive disabilities may have trouble remembering what the filled field does
- speech recognition users cannot see the name they can speak to set focus on the field
- low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input
Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia.
See <a href="https://core.trac.wordpress.org/ticket/40331">#40331</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/47138">#47138</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjsmediaviewsattachmentsbrowserjs">trunk/src/js/media/views/attachments/browser.js</a></li>
<li><a href="#trunksrcjsmediaviewsbuttonselectmodetogglejs">trunk/src/js/media/views/button/select-mode-toggle.js</a></li>
<li><a href="#trunksrcjsmediaviewssearchjs">trunk/src/js/media/views/search.js</a></li>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincssmediacss">trunk/src/wp-admin/css/media.css</a></li>
<li><a href="#trunksrcwpadminincludesclasswpmedialisttablephp">trunk/src/wp-admin/includes/class-wp-media-list-table.php</a></li>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesmediaphp">trunk/src/wp-includes/media.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjsmediaviewsattachmentsbrowserjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/attachments/browser.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/attachments/browser.js 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/js/media/views/attachments/browser.js 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -348,7 +348,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( this.options.search ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Search is an input, a visually hidden label element needs to be rendered before.
</span><span class="cx" style="display: block; padding: 0 10px"> this.toolbar.set( 'searchLabel', new wp.media.view.Label({
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- value: l10n.searchMediaLabel,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ value: l10n.searchLabel,
+ className: 'media-search-input-label',
</ins><span class="cx" style="display: block; padding: 0 10px"> attributes: {
</span><span class="cx" style="display: block; padding: 0 10px"> 'for': 'media-search-input'
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span></span></pre></div>
<a id="trunksrcjsmediaviewsbuttonselectmodetogglejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/button/select-mode-toggle.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/button/select-mode-toggle.js 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/js/media/views/button/select-mode-toggle.js 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -57,6 +57,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> children.not( '.spinner, .media-button' ).hide();
</span><span class="cx" style="display: block; padding: 0 10px"> this.$el.show();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ toolbar.$el.addClass( 'media-toolbar-mode-select' );
</ins><span class="cx" style="display: block; padding: 0 10px"> toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> this.model.set( {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,6 +66,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> this.controller.content.get().$el.removeClass( 'fixed' );
</span><span class="cx" style="display: block; padding: 0 10px"> toolbar.$el.css( 'width', '' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ toolbar.$el.removeClass( 'media-toolbar-mode-select' );
</ins><span class="cx" style="display: block; padding: 0 10px"> toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
</span><span class="cx" style="display: block; padding: 0 10px"> children.not( '.media-button' ).show();
</span><span class="cx" style="display: block; padding: 0 10px"> this.controller.state().get( 'selection' ).reset();
</span></span></pre></div>
<a id="trunksrcjsmediaviewssearchjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/search.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/search.js 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/js/media/views/search.js 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,5 +1,4 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var l10n = wp.media.view.l10n,
- Search;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var Search;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * wp.media.view.Search
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -17,8 +16,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> id: 'media-search-input',
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> attributes: {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- type: 'search',
- placeholder: l10n.searchMediaPlaceholder
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ type: 'search'
</ins><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> events: {
</span></span></pre></div>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/wp-admin/css/common.css 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3985,6 +3985,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #screen-meta-links {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ .wp-filter .search-form input[type="search"] {
+ font-size: 1rem;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Smartphone */
</span></span></pre></div>
<a id="trunksrcwpadmincssmediacss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/media.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/media.css 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/wp-admin/css/media.css 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -538,7 +538,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame.mode-grid .media-toolbar select {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 10px 0 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- font-size: 14px;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -555,10 +554,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-frame.mode-grid .spinner {
- margin-top: 16px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-search-input-label {
+ margin: 0 .2em 0 0;
+ vertical-align: baseline;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-frame.mode-grid .media-search-input-label {
+ position: static;
+ margin: 0 .5em 0 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .attachments-browser .media-toolbar-secondary > .media-button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludesclasswpmedialisttablephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/class-wp-media-list-table.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/class-wp-media-list-table.php 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/wp-admin/includes/class-wp-media-list-table.php 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -270,8 +270,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="search-form">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
- <input type="search" placeholder="<?php esc_attr_e( 'Search media items...' ); ?>" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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(); ?>"></div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/media-views.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/media-views.css 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/wp-includes/css/media-views.css 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -310,6 +310,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .media-toolbar-primary {
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> height: 100%;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-toolbar-secondary {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -870,7 +871,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Search
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame .search {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 32px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 32px 0 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 4px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #444;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -882,6 +883,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-frame .media-search-input-label {
+ position: absolute;
+ left: 0;
+ top: 10px;
+ margin: 0;
+ line-height: 1;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Attachments
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1165,6 +1174,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 33%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.mode-grid .attachments-browser .media-toolbar-primary {
+ display: flex;
+ align-items: center;
+}
+
+.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
+ display: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .attachments-browser .media-toolbar-secondary {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 66%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1650,14 +1668,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> vertical-align: middle;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-frame.mode-grid .spinner {
+ margin: 0;
+ float: none;
+ vertical-align: middle;
+}
+
+.media-modal .media-toolbar .spinner {
+ float: none;
+ vertical-align: bottom;
+ margin: 0 0 5px 5px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-frame .spinner.is-active {
</span><span class="cx" style="display: block; padding: 0 10px"> visibility: visible;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-toolbar .spinner {
- margin-top: 14px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Attachment Details
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2493,6 +2519,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .media-frame .media-toolbar input[type="search"] {
+ line-height: 2.25; /* 36px */
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-sidebar .setting select.columns,
</span><span class="cx" style="display: block; padding: 0 10px"> .attachment-details .setting select.columns {
</span><span class="cx" style="display: block; padding: 0 10px"> width: auto;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2504,6 +2534,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 3px 6px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-admin .media-frame select {
+ min-height: 40px;
+ font-size: 16px;
+ line-height: 1.625;
+ padding: 5px 24px 5px 8px;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .image-details .column-image {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 30%;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 70%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2590,10 +2627,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .media-modal .attachments-browser .media-toolbar .spinner {
- margin: 14px 2px 0;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Text inputs need to be 16px, or they force zooming on iOS */
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame input[type="text"],
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame input[type="password"],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2607,8 +2640,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame .media-toolbar input[type="search"] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.625; /* 26px */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ line-height: 2.3755; /* 38px */
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ .media-modal .media-toolbar .spinner {
+ margin-bottom: 10px;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media screen and (max-width: 782px) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2621,15 +2658,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> top: 82px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .media-frame .media-toolbar input[type="search"] {
- line-height: 2.25; /* 36px */
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> .media-frame-toolbar .media-toolbar {
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: -48px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media screen and (max-width: 782px) {
+ .mode-grid .attachments-browser .media-toolbar-primary {
+ display: block;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Responsive on portrait and landscape */
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (max-width: 640px), screen and (max-height: 400px) {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Full-bleed modal */
</span></span></pre></div>
<a id="trunksrcwpincludesmediaphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/media.php 2019-10-07 11:52:32 UTC (rev 46417)
+++ trunk/src/wp-includes/media.php 2019-10-07 12:41:50 UTC (rev 46418)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3848,8 +3848,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'apply' => __( 'Apply' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'filterByDate' => __( 'Filter by date' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'filterByType' => __( 'Filter by type' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'searchMediaLabel' => __( 'Search Media' ),
- 'searchMediaPlaceholder' => __( 'Search media items...' ), // placeholder (no ellipsis)
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'searchLabel' => __( 'Search' ),
+ 'searchMediaLabel' => __( 'Search Media' ), // backwards compatibility pre-5.3
+ 'searchMediaPlaceholder' => __( 'Search media items...' ), // placeholder (no ellipsis), backwards compatibility pre-5.3
</ins><span class="cx" style="display: block; padding: 0 10px"> 'mediaFound' => __( 'Number of media items found: %d' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'mediaFoundHasMoreResults' => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'noMedia' => __( 'No media items found.' ),
</span></span></pre>
</div>
</div>
</body>
</html>