Skip to content

Commit

Permalink
Administration: A11y: Replace placeholders with visible labels.
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@joedolson
joedolson committed May 14, 2024
1 parent 5dff70b commit c3a4e8b
Show file tree
Hide file tree
Showing 18 changed files with 192 additions and 139 deletions.
14 changes: 7 additions & 7 deletions src/js/_enqueues/vendor/tinymce/plugins/wplink/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '';
Expand All @@ -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 = '';
Expand Down Expand Up @@ -394,7 +394,7 @@
type: 'WPLinkInput',
onPostRender: function() {
var element = this.getEl(),
input = element.firstChild,
input = element.firstChild.nextSibling,
$input, cache, last;

inputInstance = this;
Expand Down Expand Up @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions src/js/_enqueues/wp/customize/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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;
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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' );
Expand Down
2 changes: 1 addition & 1 deletion src/js/media/views/attachments/browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
15 changes: 12 additions & 3 deletions src/wp-admin/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -4151,7 +4157,6 @@ img {
}

.wp-filter .search-form input[type="search"] {
width: 100%;
font-size: 1rem;
}

Expand Down Expand Up @@ -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) {
Expand Down
112 changes: 76 additions & 36 deletions src/wp-admin/css/customize-controls.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -2580,7 +2624,7 @@ body.adding-widget .add-new-widget:before,
}

#available-widgets-list {
top: 60px;
top: 82px;
position: absolute;
overflow: auto;
bottom: 0;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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) {
Expand Down
Loading

0 comments on commit c3a4e8b

Please sign in to comment.