Administration: A11y: Replace placeholders with visible labels.

Add visible labels to inputs that are using placeholder attributes as a substitute for visible labeling.

Labels added or made visible on the customizer theme search, customizer widget search, customizer menu item search, customizer new page UI, the search plugins screens, the media search screens, and the classic editor link inserter.

Props afercia, joedolson, rcreators, sabernhardt.
See #40331.

git-svn-id: https://develop.svn.wordpress.org/trunk@58146 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/js/_enqueues/vendor/tinymce/plugins/wplink/plugin.js

@@ -56,19 +56,19 @@
 		renderHtml: function() {
 			return (
 				'<div id="' + this._id + '" class="wp-link-input">' +
-					'<input type="text" value="" placeholder="' + tinymce.translate( 'Paste URL or type to search' ) + '" />' +
+					'<label for="' + this._id + '_label">' + tinymce.translate( 'Paste URL or type to search' ) + '</label><input id="' + this._id + '_label" type="text" value="" />' +
 					'<input type="text" style="display:none" value="" />' +
 				'</div>'
 			);
 		},
 		setURL: function( url ) {
-			this.getEl().firstChild.value = url;
+			this.getEl().firstChild.nextSibling.value = url;
 		},
 		getURL: function() {
-			return tinymce.trim( this.getEl().firstChild.value );
+			return tinymce.trim( this.getEl().firstChild.nextSibling.value );
 		},
 		getLinkText: function() {
-			var text = this.getEl().firstChild.nextSibling.value;
+			var text = this.getEl().firstChild.nextSibling.nextSibling.value;
 
 			if ( ! tinymce.trim( text ) ) {
 				return '';
@@ -77,7 +77,7 @@
 			return text.replace( /[\r\n\t ]+/g, ' ' );
 		},
 		reset: function() {
-			var urlInput = this.getEl().firstChild;
+			var urlInput = this.getEl().firstChild.nextSibling;
 
 			urlInput.value = '';
 			urlInput.nextSibling.value = '';
@@ -394,7 +394,7 @@
 			type: 'WPLinkInput',
 			onPostRender: function() {
 				var element = this.getEl(),
-					input = element.firstChild,
+					input = element.firstChild.nextSibling,
 					$input, cache, last;
 
 				inputInstance = this;
@@ -438,7 +438,7 @@
 						},
 						select: function( event, ui ) {
 							$input.val( ui.item.permalink );
-							$( element.firstChild.nextSibling ).val( ui.item.title );
+							$( element.firstChild.nextSibling.nextSibling ).val( ui.item.title );
 
 							if ( 9 === event.keyCode && typeof window.wpLinkL10n !== 'undefined' ) {
 								// Audible confirmation message when a link has been selected.

src/js/_enqueues/wp/customize/controls.js

@@ -1917,7 +1917,7 @@
 			section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
 				var $themeContainer = $( '.customize-themes-full-container' ),
 					$filterToggle = $( e.currentTarget );
-				section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
+				section.filtersHeight = $filterToggle.parents( '.themes-filter-bar' ).next( '.filter-drawer' ).height();
 
 				if ( 0 < $themeContainer.scrollTop() ) {
 					$themeContainer.animate( { scrollTop: 0 }, 400 );
@@ -1932,7 +1932,7 @@
 					.attr( 'aria-expanded', function( i, attr ) {
 						return 'true' === attr ? 'false' : 'true';
 					})
-					.parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
+					.parents( '.themes-filter-bar' ).next( '.filter-drawer' ).slideToggle( 180, 'linear' );
 
 				if ( $filterToggle.hasClass( 'open' ) ) {
 					var marginOffset = 1018 < window.innerWidth ? 50 : 76;
@@ -3739,7 +3739,7 @@
 		ready: function() {
 			var control = this, newItem;
 			if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) {
-				newItem = control.container.find( '.new-content-item' );
+				newItem = control.container.find( '.new-content-item-wrapper' );
 				newItem.hide(); // Hide in JS to preserve flex display when showing.
 				control.container.on( 'click', '.add-new-toggle', function( e ) {
 					$( e.currentTarget ).slideUp( 180 );
@@ -4085,7 +4085,7 @@
 			}
 
 			toggle = control.container.find( '.add-new-toggle' );
-			container = control.container.find( '.new-content-item' );
+			container = control.container.find( '.new-content-item-wrapper' );
 			input = control.container.find( '.create-item-input' );
 			title = input.val();
 			select = control.container.find( 'select' );

src/js/media/views/attachments/browser.js

@@ -378,7 +378,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 		}
 
 		if ( this.options.search ) {
-			// Search is an input, a visually hidden label element needs to be rendered before.
+			// Search is an input, a label element needs to be rendered before.
 			this.toolbar.set( 'searchLabel', new wp.media.view.Label({
 				value: l10n.searchLabel,
 				className: 'media-search-input-label',

src/wp-admin/css/common.css

@@ -1090,7 +1090,9 @@ th.action-links {
 
 .wp-filter .search-form {
 	float: right;
-	margin: 10px 0;
+	display: flex;
+	align-items: center;
+	column-gap: .5rem;
 }
 
 .wp-filter .search-form input[type="search"] {
@@ -1119,7 +1121,6 @@ th.action-links {
 .wp-filter .search-form.search-plugins .wp-filter-search,
 .no-js .wp-filter .search-form.search-plugins .button {
 	display: inline-block;
-	margin-top: 10px;
 	vertical-align: top;
 }
 
@@ -1360,6 +1361,11 @@ th.action-links {
 		position: relative;
 		max-width: 100%;
 	}
+	.wp-filter .search-form {
+		margin: 11px 0;
+		flex-wrap: wrap;
+		row-gap: 10px;
+	}
 }
 
 @media only screen and (max-width: 782px) {
@@ -4151,7 +4157,6 @@ img {
 	}
 
 	.wp-filter .search-form input[type="search"] {
-		width: 100%;
 		font-size: 1rem;
 	}
 
@@ -4205,6 +4210,10 @@ img {
 	.nav-tab-active:focus:active {
 		border-bottom: 1px solid #c3c4c7;
 	}
+
+	.wp-filter .search-form.search-plugins label {
+		width: 100%;
+	}
 }
 
 @media screen and (max-width: 480px) {

src/wp-admin/css/customize-controls.css

@@ -1082,14 +1082,24 @@ p.customize-section-description {
 	float: left;
 }
 
-#available-menu-items .accordion-section-content .new-content-item,
-.customize-control-dropdown-pages .new-content-item {
+#available-menu-items .accordion-section-content .new-content-item-wrapper,
+.customize-control-dropdown-pages .new-content-item-wrapper {
 	width: calc(100% - 30px);
 	padding: 8px 15px;
 	position: absolute;
 	bottom: 0;
 	z-index: 10;
 	background: #f0f0f1;
+}
+
+.customize-control-dropdown-pages .new-content-item-wrapper {
+	width: 100%;
+	padding: 0;
+	position: static;
+}
+
+#available-menu-items .accordion-section-content .new-content-item,
+.customize-control-dropdown-pages .new-content-item {
 	display: flex;
 }
 
@@ -1099,6 +1109,14 @@ p.customize-section-description {
 	position: relative;
 }
 
+.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item {
+	padding: 0;
+}
+
+.customize-control-dropdown-pages .new-content-item-wrapper .new-content-item label {
+	line-height: 1.6;
+}
+
 #available-menu-items .new-content-item .create-item-input,
 .customize-control-dropdown-pages .new-content-item .create-item-input {
 	flex-grow: 10;
@@ -1815,11 +1833,6 @@ p.customize-section-description {
 	bottom: 0;
 }
 
-.themes-filter-bar .feature-filter-toggle {
-	float: right;
-	margin: 3px 0 3px 25px;
-}
-
 .themes-filter-bar .feature-filter-toggle:before {
 	content: "\f111";
 	margin: 0 5px 0 0;
@@ -1880,12 +1893,6 @@ p.customize-section-description {
 	animation: .6s themes-fade-in 1;
 }
 
-.control-panel-themes .filter-themes-count {
-	position: relative;
-	float: right;
-	line-height: 2.6;
-}
-
 .control-panel-themes .filter-themes-count .themes-displayed {
 	font-weight: 600;
 	color: #50575e;
@@ -2097,6 +2104,28 @@ p.customize-section-description {
 	box-sizing: border-box;
 	border-bottom: 1px solid #dcdcde;
 }
+.customize-preview-header.themes-filter-bar,
+.customize-preview-header.themes-filter-bar .search-form {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex-wrap: wrap;
+}
+
+.customize-preview-header.themes-filter-bar .search-form-input {
+	position: relative;
+}
+
+.customize-preview-header .filter-themes-wrapper {
+	display: grid;
+	align-items: center;
+	gap: 10px;
+	grid-template-columns: auto 1fr;
+}
+
+.customize-preview-header .filter-themes-wrapper .filter-themes-count {
+	justify-self: end;
+}
 
 @media screen and (min-width: 1670px) {
 	.customize-preview-header.themes-filter-bar {
@@ -2109,6 +2138,9 @@ p.customize-section-description {
 .themes-filter-bar .themes-filter-container {
 	margin: 0;
 	padding: 0;
+	display: flex;
+	align-items: center;
+	gap: 10px;
 }
 
 .themes-filter-bar .wp-filter-search {
@@ -2117,11 +2149,10 @@ p.customize-section-description {
 	max-width: 100%;
 	width: 40%;
 	min-width: 300px;
-	position: absolute;
-	top: 6px;
-	left: 25px;
 	height: 32px;
 	margin: 1px 0;
+	top: 0;
+	left: 0;
 }
 
 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
@@ -2155,18 +2186,31 @@ p.customize-section-description {
 	}
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 960px) {
 	.customize-preview-header.themes-filter-bar {
-		height: 86px;
-		padding-top: 46px;
+		height: 96px;
 	}
+}
 
+@media screen and (max-width: 900px) {
 	.themes-filter-bar .wp-filter-search {
-		width: calc(100% - 50px);
+		width: 100%;
 		margin: 0;
 		min-width: 200px;
 	}
 
+	.customize-preview-header.themes-filter-bar,
+	.customize-preview-header.themes-filter-bar .search-form
+	.themes-filter-bar .themes-filter-container {
+		display: grid;
+		gap: 4px;
+	}
+
+	.customize-preview-header.themes-filter-bar .search-form-input {
+		display: flex;
+		flex-grow: 1;
+	}
+
 	.filter-drawer {
 		top: 86px;
 	}
@@ -2580,7 +2624,7 @@ body.adding-widget .add-new-widget:before,
 }
 
 #available-widgets-list {
-	top: 60px;
+	top: 82px;
 	position: absolute;
 	overflow: auto;
 	bottom: 0;
@@ -2624,7 +2668,7 @@ body.adding-widget .add-new-widget:before,
 #available-widgets-filter .search-icon {
 	display: block;
 	position: absolute;
-	top: 15px; /* 13 container padding +1 input margin +1 input border */
+	bottom: 15px; /* 13 container padding +1 input margin +1 input border */
 	left: 16px;
 	width: 30px;
 	height: 30px;
@@ -2634,9 +2678,9 @@ body.adding-widget .add-new-widget:before,
 }
 
 #available-widgets-filter .clear-results,
-#available-menu-items-search .clear-results {
+#available-menu-items-search .accordion-section-title .clear-results {
 	position: absolute;
-	top: 15px; /* 13 container padding +1 input margin +1 input border */
+	top: 36px; /* 13 container padding +1 input margin +1 input border */
 	right: 16px;
 	width: 30px;
 	height: 30px;
@@ -2695,8 +2739,8 @@ body.adding-widget .add-new-widget:before,
 
 .themes-filter-bar .search-icon {
 	position: absolute;
-	top: 7px;
-	left: 26px;
+	top: 2px;
+	left: 2px;
 	z-index: 1;
 	color: #646970;
 	height: 30px;
@@ -2814,8 +2858,8 @@ body.adding-widget .add-new-widget:before,
 		margin-top: 12px;
 	}
 
-	.wp-core-ui .themes-filter-bar .feature-filter-toggle {
-		margin: 3px 0 3px 25px;
+	.customize-preview-header.themes-filter-bar .search-icon {
+		top: 6px;
 	}
 }
 
@@ -2952,22 +2996,18 @@ body.adding-widget .add-new-widget:before,
 	}
 
 	#available-widgets-list {
-		top: 130px;
+		top: 152px;
 	}
 
-	#available-menu-items-search .clear-results,
-	#available-menu-items-search .search-icon {
-		top: 85px; /* 70 section title height + 13 container padding +1 input margin +1 input border */
+	#available-menu-items-search .clear-results {
+		top: 36px;
+		right: 16px;
 	}
 
 	.reorder,
 	.reordering .reorder-done {
 		padding: 8px;
 	}
-
-	.wp-core-ui .themes-filter-bar .feature-filter-toggle {
-		margin: 0;
-	}
 }
 
 @media screen and (max-width: 600px) {