vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-11 04:30:11 +00:00
Code Issues Actions 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@36964 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2016-03-10 22:36:25 +00:00
parent fd7c2fef96
commit 2a2539402f
12 changed files with 203 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/wp-admin/css/common.css
View File

@@ -2814,67 +2814,67 @@ body.index-php #TB_ajaxWindowTitle {
display: none;
}
body.about-php .tb-close-icon,
body.plugin-install-php .tb-close-icon,
body.import-php .tb-close-icon,
body.plugins-php .tb-close-icon,
body.update-core-php .tb-close-icon,
body.index-php .tb-close-icon {
/* only on these screens */
.about-php #TB_closeWindowButton,
.plugin-install-php #TB_closeWindowButton,
.import-php #TB_closeWindowButton,
.plugins-php #TB_closeWindowButton,
.update-core-php #TB_closeWindowButton,
.index-php #TB_closeWindowButton {
left: auto;
right: -30px;
color: #eee;
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
transition: color .1s ease-in-out, background .1s ease-in-out;
}
body.about-php #TB_closeWindowButton:hover,
body.about-php #TB_closeWindowButton:focus,
body.about-php #TB_closeWindowButton:focus .tb-close-icon,
body.about-php .tb-close-icon:focus,
body.about-php .tb-close-icon:hover,
body.plugin-install-php #TB_closeWindowButton:hover,
body.plugin-install-php #TB_closeWindowButton:focus,
body.plugin-install-php #TB_closeWindowButton:focus .tb-close-icon,
body.plugin-install-php .tb-close-icon:focus,
body.plugin-install-php .tb-close-icon:hover,
body.import-php #TB_closeWindowButton:hover,
body.import-php #TB_closeWindowButton:focus,
body.import-php #TB_closeWindowButton:focus .tb-close-icon,
body.import-php .tb-close-icon:focus,
body.import-php .tb-close-icon:hover,
body.plugins-php #TB_closeWindowButton:hover,
body.plugins-php #TB_closeWindowButton:focus,
body.plugins-php #TB_closeWindowButton:focus .tb-close-icon,
body.plugins-php .tb-close-icon:focus,
body.plugins-php .tb-close-icon:hover,
body.update-core-php #TB_closeWindowButton:hover,
body.update-core-php #TB_closeWindowButton:focus,
body.update-core-php #TB_closeWindowButton:focus .tb-close-icon,
body.update-core-php .tb-close-icon:focus,
body.update-core-php .tb-close-icon:hover,
body.index-php #TB_closeWindowButton:focus,
body.index-php #TB_closeWindowButton:focus .tb-close-icon,
body.index-php .tb-close-icon:focus,
body.index-php .tb-close-icon:hover {
body.index-php #TB_closeWindowButton:hover,
body.index-php #TB_closeWindowButton:focus {
color: #00a0d2;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
body.about-php .tb-close-icon:before,
body.plugin-install-php .tb-close-icon:before,
body.import-php .tb-close-icon:before,
body.plugins-php .tb-close-icon:before,
body.update-core-php .tb-close-icon:before,
body.index-php .tb-close-icon:before {
body.about-php .tb-close-icon,
body.plugin-install-php .tb-close-icon,
body.import-php .tb-close-icon,
body.plugins-php .tb-close-icon,
body.update-core-php .tb-close-icon,
body.index-php .tb-close-icon {
display: none;
}
body.about-php #TB_closeWindowButton:after,
body.plugin-install-php #TB_closeWindowButton:after,
body.import-php #TB_closeWindowButton:after,
body.plugins-php #TB_closeWindowButton:after,
body.update-core-php #TB_closeWindowButton:after,
body.index-php #TB_closeWindowButton:after {
content: "\f335";
font-size: 32px;
font: normal 32px/29px 'dashicons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* move plugin install close icon to top on narrow screens */
@media screen and ( max-width: 830px ) {
body.about-php .tb-close-icon,
body.plugin-install-php .tb-close-icon,
body.import-php .tb-close-icon,
body.plugins-php .tb-close-icon,
body.update-core-php .tb-close-icon,
body.index-php .tb-close-icon {
body.about-php #TB_closeWindowButton,
body.plugin-install-php #TB_closeWindowButton,
body.import-php #TB_closeWindowButton,
body.plugins-php #TB_closeWindowButton,
body.update-core-php #TB_closeWindowButton,
body.index-php #TB_closeWindowButton {
right: 0;
top: -30px;
}