IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Accessibility: Improve accessibility for the Plugin details modal.

Browse Source 
The plugin details modal can be invoked from several screens. There's now a new
`.open-plugin-details-modal` CSS class to be used in combination with the
`.thickbox` CSS class that adds everything needed for accessibility.

- Adds an ARIA role `dialog` and an `aria-label` attribute to the modal
- Adds a `title` attribute to the iframe inside the modal
- Constrains tabbing within the modal
- Restores focus back in a proper place when closing the modal

Also, improves a bit the native Thickbox implementation: it should probably be
replaced with some more modern tool but at least keyboard focus should be moved
inside the modal.

Fixes #33305.
Built from https://develop.svn.wordpress.org/trunk@36964


git-svn-id: http://core.svn.wordpress.org/trunk@36932 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2016-03-10 22:37:26 +00:00
parent b533878fa2
commit fd1f45a7cf
17 changed files with 247 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
wp-includes/js/thickbox/thickbox.css
View File

@@ -43,12 +43,19 @@
float: right;
}
#TB_closeAjaxWindow {
float: right;
}
#TB_closeAjaxWindow a {
text-decoration: none;
#TB_closeWindowButton {
position: absolute;
left: auto;
right: 0;
width: 29px;
height: 29px;
border: 0;
padding: 0;
background: none;
cursor: pointer;
outline: none;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
#TB_ajaxWindowTitle {
@@ -115,6 +122,7 @@
}
.tb-close-icon {
display: block;
color: #666;
text-align: center;
line-height: 29px;
@@ -133,6 +141,7 @@
-moz-osx-font-smoothing: grayscale;
}
.tb-close-icon:hover {
#TB_closeWindowButton:hover .tb-close-icon,
#TB_closeWindowButton:focus .tb-close-icon {
color: #00a0d2;
}

23
wp-includes/js/thickbox/thickbox.js
View File

@@ -41,6 +41,8 @@ function tb_click(){
function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
var $closeBtn;
try {
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
jQuery("body","html").css({height: "100%", width: "100%"});
@@ -137,7 +139,7 @@ function tb_show(caption, url, imageGroup) {//function called when the user clic
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
jQuery("#TB_window").append("<a href='' id='TB_ImageOff'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><div class='tb-close-icon'></div></a></div>");
jQuery("#TB_window").append("<a href='' id='TB_ImageOff'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><button type='button' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><span class='tb-close-icon'></span></button></div>");
jQuery("#TB_closeWindowButton").click(tb_remove);
@@ -202,10 +204,10 @@ function tb_show(caption, url, imageGroup) {//function called when the user clic
urlNoQuery = url.split('TB_');
jQuery("#TB_iframeContent").remove();
if(params['modal'] != "true"){//iframe no modal
jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' allowTransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><button type='button' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><span class='tb-close-icon'></span></button></div></div><iframe frameborder='0' hspace='0' allowtransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
}else{//iframe modal
jQuery("#TB_overlay").unbind();
jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' allowTransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'>"+thickboxL10n.noiframes+"</iframe>");
jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' allowtransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'>"+thickboxL10n.noiframes+"</iframe>");
}
}else{// not an iframe, ajax
if(jQuery("#TB_window").css("visibility") != "visible"){
@@ -259,6 +261,16 @@ function tb_show(caption, url, imageGroup) {//function called when the user clic
});
}
$closeBtn = jQuery( '#TB_closeWindowButton' );
/*
* If the native Close button icon is visible, move focus on the button
* (e.g. in the Network Admin Themes screen).
* In other admin screens is hidden and replaced by a different icon.
*/
if ( $closeBtn.find( '.tb-close-icon' ).is( ':visible' ) ) {
$closeBtn.focus();
}
} catch(e) {
//nothing here
}
@@ -273,7 +285,10 @@ function tb_showIframe(){
function tb_remove() {
jQuery("#TB_imageOff").unbind("click");
jQuery("#TB_closeWindowButton").unbind("click");
jQuery("#TB_window").fadeOut("fast",function(){jQuery('#TB_window,#TB_overlay,#TB_HideSelect').trigger("tb_unload").unbind().remove();});
jQuery( '#TB_window' ).fadeOut( 'fast', function() {
jQuery( '#TB_window, #TB_overlay, #TB_HideSelect' ).trigger( 'tb_unload' ).unbind().remove();
jQuery( 'body' ).trigger( 'thickbox:removed' );
});
jQuery( 'body' ).removeClass( 'modal-open' );
jQuery("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6