<!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>[47834] trunk/src/js/_enqueues/vendor/plupload/wp-plupload.js: Accessibility: Media: Hide the invisible "file input" on media views from assistive technologies.</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/47834">47834</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/47834","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>2020-05-20 13:31:32 +0000 (Wed, 20 May 2020)</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: Hide the invisible "file input" on media views from assistive technologies.
The file input button is visually hidden, but was announced by screen readers in workflows unrelated to file uploads.
It is now hidden from assistive technologies by the means of an `aria-hidden` attribute, as its CSS display property must not be changed to make sure it still works on old browsers.
See <a href="https://core.trac.wordpress.org/ticket/49753">#49753</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/47611">#47611</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueuesvendorpluploadwppluploadjs">trunk/src/js/_enqueues/vendor/plupload/wp-plupload.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueuesvendorpluploadwppluploadjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/vendor/plupload/wp-plupload.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/vendor/plupload/wp-plupload.js 2020-05-20 10:36:04 UTC (rev 47833)
+++ trunk/src/js/_enqueues/vendor/plupload/wp-plupload.js 2020-05-20 13:31:32 UTC (rev 47834)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -120,8 +120,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {plupload.File} file File that was uploaded.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> tryAgain = function( message, data, file ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var times;
- var id;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var times, id;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! data || ! data.responseHeaders ) {
</span><span class="cx" style="display: block; padding: 0 10px"> error( pluploadL10n.http_error_image, data, file, 'no-retry' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -210,8 +209,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} retry Whether to try again to create image sub-sizes. Passing 'no-retry' will prevent it.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> error = function( message, data, file, retry ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var isImage = file.type && file.type.indexOf( 'image/' ) === 0;
- var status = data && data.status;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var isImage = file.type && file.type.indexOf( 'image/' ) === 0,
+ status = data && data.status;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // If the file is an image and the error is HTTP 5xx try to create sub-sizes again.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( retry !== 'no-retry' && isImage && status >= 500 && status < 600 ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -327,10 +326,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> this.browser.on( 'mouseenter', this.refresh );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> this.uploader.disableBrowse( true );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // If HTML5 mode, hide the auto-created file container.
- $('#' + this.uploader.id + '_html5_container').hide();
</del><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">+ $( self ).on( 'uploader:ready', function() {
+ $( '.moxie-shim-html5 input[type="file"]' )
+ .attr( {
+ tabIndex: '-1',
+ 'aria-hidden': 'true'
+ } );
+ } );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * After files were filtered and added to the queue, create a model for each.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -521,7 +526,7 @@
</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"> * If the browser node is not attached to the DOM,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * use a temporary container to house it, as the browser button shims
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * use a temporary container to house it, as the browser button shims
</ins><span class="cx" style="display: block; padding: 0 10px"> * require the button to exist in the DOM at all times.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! attached ) {
</span></span></pre>
</div>
</div>
</body>
</html>