Accessibility: Media: Add more headings in the Media Modal.
Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
3e40f12574
commit
b1cd71c2d2
|
|
@ -268,7 +268,7 @@
|
|||
}
|
||||
|
||||
.media-modal-content .media-frame select.attachment-filters {
|
||||
margin-top: 11px;
|
||||
margin-top: 32px;
|
||||
margin-left: 2%;
|
||||
width: 42%;
|
||||
width: calc(48% - 12px);
|
||||
|
|
@ -307,12 +307,6 @@
|
|||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-toolbar-primary {
|
||||
float: left;
|
||||
height: 100%;
|
||||
|
|
@ -768,6 +762,7 @@
|
|||
}
|
||||
|
||||
.media-frame.hide-menu .media-frame-menu,
|
||||
.media-frame.hide-menu .media-frame-menu-heading,
|
||||
.media-frame.hide-router .media-frame-router,
|
||||
.media-frame.hide-toolbar .media-frame-toolbar {
|
||||
display: none;
|
||||
|
|
@ -780,6 +775,32 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.media-frame-menu-heading,
|
||||
.media-attachments-filter-heading {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
/* Above the media-frame-menu. */
|
||||
z-index: 151;
|
||||
}
|
||||
|
||||
.media-attachments-filter-heading {
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.mode-grid .media-attachments-filter-heading {
|
||||
top: 0;
|
||||
right: -9999px;
|
||||
}
|
||||
|
||||
.mode-grid .media-frame-actions-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-core-ui .button.media-frame-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -849,7 +870,7 @@
|
|||
* Search
|
||||
*/
|
||||
.media-frame .search {
|
||||
margin-top: 10px;
|
||||
margin-top: 32px;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
|
|
@ -1106,7 +1127,8 @@
|
|||
|
||||
.attachments-browser .media-toolbar {
|
||||
left: 300px;
|
||||
height: 50px;
|
||||
height: 72px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.attachments-browser.hide-sidebar .media-toolbar {
|
||||
|
|
@ -1127,7 +1149,7 @@
|
|||
.attachments-browser .attachments,
|
||||
.attachments-browser .uploader-inline {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
top: 72px;
|
||||
right: 0;
|
||||
left: 300px;
|
||||
bottom: 0;
|
||||
|
|
@ -2330,7 +2352,8 @@
|
|||
overflow: auto;
|
||||
z-index: 2000;
|
||||
top: 75px;
|
||||
right: 0;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
padding: 5px 0;
|
||||
|
|
@ -2350,17 +2373,35 @@
|
|||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
/* Visually hide the menu heading keeping it available to assistive technologies. */
|
||||
.media-frame-menu-heading {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
-webkit-clip-path: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
/* Reveal the menu toggle button. */
|
||||
.wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
min-height: 40px;
|
||||
margin: -6px 6px 0;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
margin: -6px 0 0;
|
||||
padding: 0 12px 0 2px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
/* Only for IE11 to vertically align text within the inline-flex button */
|
||||
height: 0.1%;
|
||||
/* Modern browsers */
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.wp-core-ui .button.media-frame-menu-toggle:hover,
|
||||
|
|
@ -2564,6 +2605,29 @@
|
|||
.media-frame select {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 1.625; /* 26px */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.attachments-browser .media-toolbar {
|
||||
height: 82px;
|
||||
}
|
||||
|
||||
.attachments-browser .attachments,
|
||||
.attachments-browser .uploader-inline {
|
||||
top: 82px;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 2.25; /* 36px */
|
||||
}
|
||||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive on portrait and landscape */
|
||||
|
|
@ -2635,10 +2699,6 @@
|
|||
.wp-core-ui.wp-customizer .media-button {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.media-frame.hide-router .media-frame-content {
|
||||
top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -268,7 +268,7 @@
|
|||
}
|
||||
|
||||
.media-modal-content .media-frame select.attachment-filters {
|
||||
margin-top: 11px;
|
||||
margin-top: 32px;
|
||||
margin-right: 2%;
|
||||
width: 42%;
|
||||
width: calc(48% - 12px);
|
||||
|
|
@ -307,12 +307,6 @@
|
|||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-toolbar-primary {
|
||||
float: right;
|
||||
height: 100%;
|
||||
|
|
@ -768,6 +762,7 @@
|
|||
}
|
||||
|
||||
.media-frame.hide-menu .media-frame-menu,
|
||||
.media-frame.hide-menu .media-frame-menu-heading,
|
||||
.media-frame.hide-router .media-frame-router,
|
||||
.media-frame.hide-toolbar .media-frame-toolbar {
|
||||
display: none;
|
||||
|
|
@ -780,6 +775,32 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.media-frame-menu-heading,
|
||||
.media-attachments-filter-heading {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 22px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
/* Above the media-frame-menu. */
|
||||
z-index: 151;
|
||||
}
|
||||
|
||||
.media-attachments-filter-heading {
|
||||
top: 10px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.mode-grid .media-attachments-filter-heading {
|
||||
top: 0;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.mode-grid .media-frame-actions-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-core-ui .button.media-frame-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -849,7 +870,7 @@
|
|||
* Search
|
||||
*/
|
||||
.media-frame .search {
|
||||
margin-top: 10px;
|
||||
margin-top: 32px;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
|
|
@ -1106,7 +1127,8 @@
|
|||
|
||||
.attachments-browser .media-toolbar {
|
||||
right: 300px;
|
||||
height: 50px;
|
||||
height: 72px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.attachments-browser.hide-sidebar .media-toolbar {
|
||||
|
|
@ -1127,7 +1149,7 @@
|
|||
.attachments-browser .attachments,
|
||||
.attachments-browser .uploader-inline {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
right: 300px;
|
||||
bottom: 0;
|
||||
|
|
@ -2330,7 +2352,8 @@
|
|||
overflow: auto;
|
||||
z-index: 2000;
|
||||
top: 75px;
|
||||
left: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
padding: 5px 0;
|
||||
|
|
@ -2350,17 +2373,35 @@
|
|||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
/* Visually hide the menu heading keeping it available to assistive technologies. */
|
||||
.media-frame-menu-heading {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
-webkit-clip-path: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
/* Reveal the menu toggle button. */
|
||||
.wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
min-height: 40px;
|
||||
margin: -6px 6px 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: -6px 0 0;
|
||||
padding: 0 2px 0 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
/* Only for IE11 to vertically align text within the inline-flex button */
|
||||
height: 0.1%;
|
||||
/* Modern browsers */
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.wp-core-ui .button.media-frame-menu-toggle:hover,
|
||||
|
|
@ -2564,6 +2605,29 @@
|
|||
.media-frame select {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 1.625; /* 26px */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.attachments-browser .media-toolbar {
|
||||
height: 82px;
|
||||
}
|
||||
|
||||
.attachments-browser .attachments,
|
||||
.attachments-browser .uploader-inline {
|
||||
top: 82px;
|
||||
}
|
||||
|
||||
.media-frame .media-toolbar input[type="search"] {
|
||||
line-height: 2.25; /* 36px */
|
||||
}
|
||||
|
||||
.media-frame-toolbar .media-toolbar {
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive on portrait and landscape */
|
||||
|
|
@ -2635,10 +2699,6 @@
|
|||
.wp-core-ui.wp-customizer .media-button {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.media-frame.hide-router .media-frame-content {
|
||||
top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8094,7 +8094,8 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
|||
},
|
||||
|
||||
createToolbar: function() {
|
||||
var LibraryViewSwitcher, Filters, toolbarOptions;
|
||||
var LibraryViewSwitcher, Filters, toolbarOptions,
|
||||
showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
|
||||
|
||||
toolbarOptions = {
|
||||
controller: this.controller
|
||||
|
|
@ -8115,9 +8116,21 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
|||
priority: -60
|
||||
}) );
|
||||
|
||||
if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
|
||||
// "Filters" will return a <select>, need to render
|
||||
// screen reader text before
|
||||
if ( showFilterByType || this.options.date ) {
|
||||
/*
|
||||
* Create a h2 heading before the select elements that filter attachments.
|
||||
* This heading is visible in the modal and visually hidden in the grid.
|
||||
*/
|
||||
this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
|
||||
priority: -100,
|
||||
text: l10n.filterAttachments,
|
||||
level: 'h2',
|
||||
className: 'media-attachments-filter-heading'
|
||||
}).render() );
|
||||
}
|
||||
|
||||
if ( showFilterByType ) {
|
||||
// "Filters" is a <select>, a visually hidden label element needs to be rendered before.
|
||||
this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
|
||||
value: l10n.filterByType,
|
||||
attributes: {
|
||||
|
|
@ -8157,7 +8170,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
|||
priority: -90
|
||||
}).render() );
|
||||
|
||||
// DateFilter is a <select>, screen reader text needs to be rendered before
|
||||
// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
|
||||
this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
|
||||
value: l10n.filterByDate,
|
||||
attributes: {
|
||||
|
|
@ -8279,7 +8292,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
|||
}
|
||||
|
||||
} else if ( this.options.date ) {
|
||||
// DateFilter is a <select>, screen reader text needs to be rendered before
|
||||
// DateFilter is a <select>, a visually hidden label element needs to be rendered before.
|
||||
this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
|
||||
value: l10n.filterByDate,
|
||||
attributes: {
|
||||
|
|
@ -8295,7 +8308,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
|
|||
}
|
||||
|
||||
if ( this.options.search ) {
|
||||
// Search is an input, screen reader text needs to be rendered before
|
||||
// Search is an input, a visually hidden label element needs to be rendered before.
|
||||
this.toolbar.set( 'searchLabel', new wp.media.view.Label({
|
||||
value: l10n.searchMediaLabel,
|
||||
attributes: {
|
||||
|
|
@ -8487,7 +8500,8 @@ module.exports = AttachmentsBrowser;
|
|||
/* 83 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
var l10n = wp.media.view.l10n,
|
||||
var _n = wp.i18n._n,
|
||||
sprintf = wp.i18n.sprintf,
|
||||
Selection;
|
||||
|
||||
/**
|
||||
|
|
@ -8549,7 +8563,10 @@ Selection = wp.media.View.extend(/** @lends wp.media.view.Selection.prototype */
|
|||
this.$el.toggleClass( 'one', 1 === collection.length );
|
||||
this.$el.toggleClass( 'editing', editing );
|
||||
|
||||
this.$('.count').text( l10n.selected.replace('%d', collection.length) );
|
||||
this.$( '.count' ).text(
|
||||
/* translators: %s: Number of selected media attachments. */
|
||||
sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
|
||||
);
|
||||
},
|
||||
|
||||
edit: function( event ) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -178,6 +178,7 @@ function wp_print_media_templates() {
|
|||
<?php // Template for the media frame: used both in the media grid and in the media modal. ?>
|
||||
<script type="text/html" id="tmpl-media-frame">
|
||||
<div class="media-frame-title" id="media-frame-title"></div>
|
||||
<h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
|
||||
<button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
|
||||
<?php _e( 'Media Types' ); ?>
|
||||
<span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
|
||||
|
|
@ -187,6 +188,7 @@ function wp_print_media_templates() {
|
|||
<div class="media-frame-router"></div>
|
||||
<div class="media-frame-content"></div>
|
||||
</div>
|
||||
<h2 class="media-frame-actions-heading screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
|
||||
<div class="media-frame-toolbar"></div>
|
||||
<div class="media-frame-uploader"></div>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3931,7 +3931,8 @@ function wp_enqueue_media( $args = array() ) {
|
|||
'addToVideoPlaylistTitle' => __( 'Add to Video Playlist' ),
|
||||
|
||||
// Headings
|
||||
'attachmentsList' => __( 'Attachments list' ),
|
||||
'filterAttachments' => __( 'Filter Media' ),
|
||||
'attachmentsList' => __( 'Media list' ),
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1617,7 +1617,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
|
||||
// To enqueue media-views or media-editor, call wp_enqueue_media().
|
||||
// Both rely on numerous settings, styles, and templates to operate correctly.
|
||||
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y' ), false, 1 );
|
||||
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n' ), false, 1 );
|
||||
$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
|
||||
$scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
|
||||
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'jquery', 'media-views', 'media-audiovideo' ), false, 1 );
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.3-beta2-46374';
|
||||
$wp_version = '5.3-beta2-46375';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue