wpLink: fix accessibility issues:

- Add role=dialog and an aria-labelledby attribute to the modal container.
- Change the modal title to h1.
- Remove one ` ` that gets read out as `blank` by screen readers.
- Replace the Cancel link with a button.
- Clean up unused CSS.

Props afercia.
Fixes #30468.
Built from https://develop.svn.wordpress.org/trunk@36991


git-svn-id: http://core.svn.wordpress.org/trunk@36958 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2016-03-14 20:55:26 +00:00
parent 783aa8b4fa
commit b9a3602070
8 changed files with 30 additions and 148 deletions

View File

@ -1403,13 +1403,11 @@ final class _WP_Editors {
// display: none is required here, see #WP27605
?>
<div id="wp-link-backdrop" style="display: none"></div>
<div id="wp-link-wrap" class="wp-core-ui" style="display: none">
<div id="wp-link-wrap" class="wp-core-ui" style="display: none" role="dialog" aria-labelledby="link-modal-title">
<form id="wp-link" tabindex="-1">
<?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
<div id="link-modal-title">
<?php _e( 'Insert/edit link' ) ?>
<button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
</div>
<h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1>
<button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
<div id="link-selector">
<div id="link-options">
<div>
@ -1421,14 +1419,14 @@ final class _WP_Editors {
<input id="wp-link-text" type="text" /></label>
</div>
<div class="link-target">
<label><span>&nbsp;</span>
<label><span></span>
<input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new tab' ); ?></label>
</div>
</div>
</div>
<div class="submitbox">
<div id="wp-link-cancel">
<a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
<button type="button" class="button"><?php _e( 'Cancel' ); ?></button>
</div>
<div id="wp-link-update">
<input type="submit" value="<?php esc_attr_e( 'Add Link' ); ?>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">

View File

@ -1074,7 +1074,7 @@ i.mce-i-wp_code:before {
padding: 10px;
margin: 1px 0 0;
line-height: 150%;
border: 0 none;
border: 0;
outline: none;
display: block;
resize: vertical;
@ -1388,10 +1388,8 @@ i.mce-i-wp_code:before {
font-size: 18px;
font-weight: 600;
line-height: 36px;
margin: 0;
padding: 0 16px 0 36px;
top: 0;
left: 0;
right: 0;
}
#wp-link-close {
@ -1438,10 +1436,6 @@ i.mce-i-wp_code:before {
padding: 0 16px 50px;
}
#wp-link-wrap.search-panel-visible #link-selector {
-webkit-overflow-scrolling: touch;
}
#wp-link ol,
#wp-link ul {
list-style: none;
@ -1494,61 +1488,6 @@ i.mce-i-wp_code:before {
max-width: 70%;
}
#wp-link li {
clear: both;
margin-bottom: 0;
border-bottom: 1px solid #f1f1f1;
color: #32373c;
padding: 4px 10px 4px 6px;
cursor: pointer;
position: relative;
}
#wp-link li:hover {
background: #eaf2fa;
color: #151515;
}
#wp-link li.unselectable {
border-bottom: 1px solid #ddd;
}
#wp-link li.unselectable:hover {
background: #fff;
cursor: auto;
color: #32373c;
}
#wp-link li.selected {
background: #ddd;
color: #32373c;
}
#wp-link li.selected .item-title {
font-weight: bold;
}
#wp-link li:last-child {
border: none;
}
#wp-link .item-title {
display: inline-block;
width: 80%;
width: -webkit-calc(100% - 68px);
width: calc(100% - 68px);
word-wrap: break-word;
}
#wp-link .item-info {
text-transform: uppercase;
color: #666;
font-size: 11px;
position: absolute;
left: 5px;
top: 5px;
}
#wp-link .submitbox {
padding: 8px 16px;
background: #fcfcfc;
@ -1571,7 +1510,6 @@ i.mce-i-wp_code:before {
#wp-link-submit {
float: left;
margin-bottom: 0;
}
@media screen and ( max-width: 782px ) {
@ -1583,13 +1521,17 @@ i.mce-i-wp_code:before {
padding: 0 16px 60px;
}
#wp-link-wrap.search-panel-visible #link-selector {
bottom: 52px;
}
#wp-link-cancel {
line-height: 32px;
}
#wp-link .link-target {
padding-top: 10px;
}
#wp-link .submitbox .button {
margin-bottom: 0;
}
}
@media screen and ( max-width: 520px ) {

File diff suppressed because one or more lines are too long

View File

@ -1074,7 +1074,7 @@ i.mce-i-wp_code:before {
padding: 10px;
margin: 1px 0 0;
line-height: 150%;
border: 0 none;
border: 0;
outline: none;
display: block;
resize: vertical;
@ -1388,10 +1388,8 @@ i.mce-i-wp_code:before {
font-size: 18px;
font-weight: 600;
line-height: 36px;
margin: 0;
padding: 0 36px 0 16px;
top: 0;
right: 0;
left: 0;
}
#wp-link-close {
@ -1438,10 +1436,6 @@ i.mce-i-wp_code:before {
padding: 0 16px 50px;
}
#wp-link-wrap.search-panel-visible #link-selector {
-webkit-overflow-scrolling: touch;
}
#wp-link ol,
#wp-link ul {
list-style: none;
@ -1494,61 +1488,6 @@ i.mce-i-wp_code:before {
max-width: 70%;
}
#wp-link li {
clear: both;
margin-bottom: 0;
border-bottom: 1px solid #f1f1f1;
color: #32373c;
padding: 4px 6px 4px 10px;
cursor: pointer;
position: relative;
}
#wp-link li:hover {
background: #eaf2fa;
color: #151515;
}
#wp-link li.unselectable {
border-bottom: 1px solid #ddd;
}
#wp-link li.unselectable:hover {
background: #fff;
cursor: auto;
color: #32373c;
}
#wp-link li.selected {
background: #ddd;
color: #32373c;
}
#wp-link li.selected .item-title {
font-weight: bold;
}
#wp-link li:last-child {
border: none;
}
#wp-link .item-title {
display: inline-block;
width: 80%;
width: -webkit-calc(100% - 68px);
width: calc(100% - 68px);
word-wrap: break-word;
}
#wp-link .item-info {
text-transform: uppercase;
color: #666;
font-size: 11px;
position: absolute;
right: 5px;
top: 5px;
}
#wp-link .submitbox {
padding: 8px 16px;
background: #fcfcfc;
@ -1571,7 +1510,6 @@ i.mce-i-wp_code:before {
#wp-link-submit {
float: right;
margin-bottom: 0;
}
@media screen and ( max-width: 782px ) {
@ -1583,13 +1521,17 @@ i.mce-i-wp_code:before {
padding: 0 16px 60px;
}
#wp-link-wrap.search-panel-visible #link-selector {
bottom: 52px;
}
#wp-link-cancel {
line-height: 32px;
}
#wp-link .link-target {
padding-top: 10px;
}
#wp-link .submitbox .button {
margin-bottom: 0;
}
}
@media screen and ( max-width: 520px ) {

File diff suppressed because one or more lines are too long

View File

@ -35,7 +35,7 @@ var wpLink;
wpLink.update();
});
inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel button' ).click( function( event ) {
event.preventDefault();
wpLink.close();
});

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.5-beta3-36990';
$wp_version = '4.5-beta3-36991';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.