From 026abd4bc61223e28fcfc6d084fb2170a135e718 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 15 Mar 2019 10:42:35 +0000 Subject: [PATCH] Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. git-svn-id: https://develop.svn.wordpress.org/trunk@44900 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/media/views/attachment/details.js | 13 ---- src/wp-includes/css/media-views.css | 29 +++++++- src/wp-includes/media-template.php | 76 +++++++++++-------- tests/qunit/index.html | 95 +++++++++++++----------- 4 files changed, 125 insertions(+), 88 deletions(-) diff --git a/src/js/media/views/attachment/details.js b/src/js/media/views/attachment/details.js index 5dd682d559..885948b364 100644 --- a/src/js/media/views/attachment/details.js +++ b/src/js/media/views/attachment/details.js @@ -42,23 +42,10 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp rerenderOnModelChange: false }); - this.on( 'ready', this.initialFocus ); // Call 'initialize' directly on the parent class. Attachment.prototype.initialize.apply( this, arguments ); }, - initialFocus: function() { - if ( ! wp.media.isTouchDevice ) { - /* - Previously focused the first ':input' (the readonly URL text field). - Since the first ':input' is now a button (delete/trash): when pressing - spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment - as soon as focus is moved. Explicitly target the first text field for now. - @todo change initial focus logic, also for accessibility. - */ - this.$( 'input[type="text"]' ).eq( 0 ).focus(); - } - }, /** * @param {Object} event */ diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 439f85e69f..5aa72c7920 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -431,7 +431,8 @@ .attachment-details .setting input[type="tel"], .attachment-details .setting input[type="url"], .attachment-details .setting textarea, -.attachment-details .setting .value { +.attachment-details .setting .value, +.attachment-details .setting + .description { box-sizing: border-box; margin: 1px; width: 65%; @@ -439,11 +440,18 @@ } .media-sidebar .setting .value, -.attachment-details .setting .value { +.attachment-details .setting .value, +.attachment-details .setting + .description { margin: 0 1px; text-align: left; } +.attachment-details .setting + .description { + font-size: 12px; + font-style: normal; + margin-bottom: 0.5em; +} + .media-sidebar .setting textarea, .attachment-details .setting textarea, .compat-item .field textarea { @@ -2040,6 +2048,15 @@ clear: both; } +.media-embed .setting.has-description { + margin-bottom: 5px; +} + +.media-embed .description { + clear: both; + font-style: normal; +} + .image-details .embed-media-settings .setting { float: none; width: auto; @@ -2069,11 +2086,17 @@ .image-details .embed-media-settings .setting input.link-to-custom, .image-details .embed-media-settings .link-target, -.image-details .embed-media-settings .custom-size { +.image-details .embed-media-settings .custom-size, +.image-details .description { margin-left: 27%; width: 70%; } +.image-details .description { + font-style: normal; + margin-top: 0; +} + .image-details .embed-media-settings .link-target { margin-top: 24px; } diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index fb44261cf1..50ae65f744 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -161,6 +161,18 @@ function wp_print_media_templates() { if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) { $class .= ' ie7'; } + + $alt_text_description = sprintf( + /* translators: 1: link start tag, 2: accessibility text, 3: link end tag */ + __( 'Describe %1$sthe purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ), + '', + sprintf( + ' %s', + /* translators: accessibility text */ + __( '(opens in a new tab)' ) + ), + '' + ); ?>