Make WordPress Core

Changeset 36991


Ignore:
Timestamp:
03/14/2016 08:54:58 PM (8 years ago)
Author:
azaozz
Message:

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.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-editor.php

    r36985 r36991  
    14041404        ?>
    14051405        <div id="wp-link-backdrop" style="display: none"></div>
    1406         <div id="wp-link-wrap" class="wp-core-ui" style="display: none">
     1406        <div id="wp-link-wrap" class="wp-core-ui" style="display: none" role="dialog" aria-labelledby="link-modal-title">
    14071407        <form id="wp-link" tabindex="-1">
    14081408        <?php wp_nonce_field( 'internal-linking', '_ajax_linking_nonce', false ); ?>
    1409         <div id="link-modal-title">
    1410             <?php _e( 'Insert/edit link' ) ?>
    1411             <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    1412         </div>
     1409        <h1 id="link-modal-title"><?php _e( 'Insert/edit link' ) ?></h1>
     1410        <button type="button" id="wp-link-close"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
    14131411        <div id="link-selector">
    14141412            <div id="link-options">
     
    14221420                </div>
    14231421                <div class="link-target">
    1424                     <label><span>&nbsp;</span>
     1422                    <label><span></span>
    14251423                    <input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new tab' ); ?></label>
    14261424                </div>
     
    14291427        <div class="submitbox">
    14301428            <div id="wp-link-cancel">
    1431                 <a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
     1429                <button type="button" class="button"><?php _e( 'Cancel' ); ?></button>
    14321430            </div>
    14331431            <div id="wp-link-update">
  • trunk/src/wp-includes/css/editor.css

    r36985 r36991  
    10751075    margin: 1px 0 0;
    10761076    line-height: 150%;
    1077     border: 0 none;
     1077    border: 0;
    10781078    outline: none;
    10791079    display: block;
     
    13891389    font-weight: 600;
    13901390    line-height: 36px;
     1391    margin: 0;
    13911392    padding: 0 36px 0 16px;
    1392     top: 0;
    1393     right: 0;
    1394     left: 0;
    13951393}
    13961394
     
    14391437}
    14401438
    1441 #wp-link-wrap.search-panel-visible #link-selector {
    1442     -webkit-overflow-scrolling: touch;
    1443 }
    1444 
    14451439#wp-link ol,
    14461440#wp-link ul {
     
    14951489}
    14961490
    1497 #wp-link li {
    1498     clear: both;
    1499     margin-bottom: 0;
    1500     border-bottom: 1px solid #f1f1f1;
    1501     color: #32373c;
    1502     padding: 4px 6px 4px 10px;
    1503     cursor: pointer;
    1504     position: relative;
    1505 }
    1506 
    1507 #wp-link li:hover {
    1508     background: #eaf2fa;
    1509     color: #151515;
    1510 }
    1511 
    1512 #wp-link li.unselectable {
    1513     border-bottom: 1px solid #ddd;
    1514 }
    1515 
    1516 #wp-link li.unselectable:hover {
    1517     background: #fff;
    1518     cursor: auto;
    1519     color: #32373c;
    1520 }
    1521 
    1522 #wp-link li.selected {
    1523     background: #ddd;
    1524     color: #32373c;
    1525 }
    1526 
    1527 #wp-link li.selected .item-title {
    1528     font-weight: bold;
    1529 }
    1530 
    1531 #wp-link li:last-child {
    1532     border: none;
    1533 }
    1534 
    1535 #wp-link .item-title {
    1536     display: inline-block;
    1537     width: 80%;
    1538     width: -webkit-calc(100% - 68px);
    1539     width: calc(100% - 68px);
    1540     word-wrap: break-word;
    1541 }
    1542 
    1543 #wp-link .item-info {
    1544     text-transform: uppercase;
    1545     color: #666;
    1546     font-size: 11px;
    1547     position: absolute;
    1548     right: 5px;
    1549     top: 5px;
    1550 }
    1551 
    15521491#wp-link .submitbox {
    15531492    padding: 8px 16px;
     
    15721511#wp-link-submit {
    15731512    float: right;
    1574     margin-bottom: 0;
    15751513}
    15761514
     
    15841522    }
    15851523
    1586     #wp-link-wrap.search-panel-visible #link-selector {
    1587         bottom: 52px;
    1588     }
    1589 
    15901524    #wp-link-cancel {
    15911525        line-height: 32px;
     1526    }
     1527
     1528    #wp-link .link-target {
     1529        padding-top: 10px;
     1530    }
     1531
     1532    #wp-link .submitbox .button {
     1533        margin-bottom: 0;
    15921534    }
    15931535}
  • trunk/src/wp-includes/js/wplink.js

    r36984 r36991  
    3636            });
    3737
    38             inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
     38            inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel button' ).click( function( event ) {
    3939                event.preventDefault();
    4040                wpLink.close();
Note: See TracChangeset for help on using the changeset viewer.