Skip to:
Content

BuddyPress.org

Changeset 11582


Ignore:
Timestamp:
06/08/2017 06:36:43 PM (3 years ago)
Author:
mercime
Message:

Accessibility: Change empty link in Sitewide Notice to a button element.

Using semantic markup like the button element instead of an empty anchor link
like href=# in this case, helps us improve accessibility for all users.

Props mercime, slaFFik, johnjamesjacoby.
Fixes #7421.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-messages/bp-messages-template.php

    r11578 r11582  
    12781278                    <strong><?php echo stripslashes( wp_filter_kses( $notice->subject ) ) ?></strong><br />
    12791279                    <?php echo stripslashes( wp_filter_kses( $notice->message) ) ?>
    1280                     <a href="#" id="close-notice"><?php _e( 'Close', 'buddypress' ) ?></a>
     1280                    <button type="button" id="close-notice" class="bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Dismiss this notice', 'buddypress' ) ?>"><span class="bp-screen-reader-text"><?php _e( 'Dismiss this notice', 'buddypress' ) ?>"></span> <span aria-hidden="true">&Chi;</span></button>
    12811281                    <?php wp_nonce_field( 'bp_messages_close_notice', 'close-notice-nonce' ); ?>
    12821282                </p>
  • trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css

    r11581 r11582  
    12171217#buddypress div#message p,
    12181218#sitewide-notice p {
     1219    background-color: #ffd;
     1220    border: 1px solid #cb2;
     1221    color: #440;
    12191222    font-weight: normal;
    12201223    margin-top: 3px;
    12211224    text-decoration: none;
    1222     background-color: #ffd;
    1223     border: 1px solid #cb2;
    1224     color: #440;
     1225}
     1226.bp-site-wide-message #message p,
     1227.admin-bar-on #message p {
     1228    padding-left: 25px;
     1229    position: relative;
     1230}
     1231.bp-site-wide-message #message button,
     1232.admin-bar-on #message button {
     1233    font-size: 0.8em;
     1234    padding: 2px 4px;
     1235    position: absolute;
     1236    left: 0;
     1237    top: 0;
     1238}
     1239.admin-bar-on #message button {
     1240    left: 10px;
     1241    top:7px;
    12251242}
    12261243#buddypress #item-header:after {
     
    18251842}
    18261843
     1844.bp-site-wide-message .bp-tooltip:hover::after,
     1845.bp-site-wide-message .bp-tooltip:active::after,
     1846.bp-site-wide-message .bp-tooltip:focus::after,
     1847.admin-bar-on .bp-tooltip:hover::after,
     1848.admin-bar-on .bp-tooltip:active::after,
     1849.admin-bar-on .bp-tooltip:focus::after {
     1850    left: 50px;
     1851}
     1852
    18271853/*--------------------------------------------------------------
    182818544.0 - Media Queries
  • trunk/src/bp-templates/bp-legacy/css/buddypress.css

    r11581 r11582  
    12171217#buddypress div#message p,
    12181218#sitewide-notice p {
     1219    background-color: #ffd;
     1220    border: 1px solid #cb2;
     1221    color: #440;
    12191222    font-weight: normal;
    12201223    margin-top: 3px;
    12211224    text-decoration: none;
    1222     background-color: #ffd;
    1223     border: 1px solid #cb2;
    1224     color: #440;
     1225}
     1226.bp-site-wide-message #message p,
     1227.admin-bar-on #message p {
     1228    padding-right: 25px;
     1229    position: relative;
     1230}
     1231.bp-site-wide-message #message button,
     1232.admin-bar-on #message button {
     1233    font-size: 0.8em;
     1234    padding: 2px 4px;
     1235    position: absolute;
     1236    right: 0;
     1237    top: 0;
     1238}
     1239.admin-bar-on #message button {
     1240    right: 10px;
     1241    top:7px;
    12251242}
    12261243#buddypress #item-header:after {
     
    18251842}
    18261843
     1844.bp-site-wide-message .bp-tooltip:hover::after,
     1845.bp-site-wide-message .bp-tooltip:active::after,
     1846.bp-site-wide-message .bp-tooltip:focus::after,
     1847.admin-bar-on .bp-tooltip:hover::after,
     1848.admin-bar-on .bp-tooltip:active::after,
     1849.admin-bar-on .bp-tooltip:focus::after {
     1850    right: 50px;
     1851}
     1852
    18271853/*--------------------------------------------------------------
    182818544.0 - Media Queries
Note: See TracChangeset for help on using the changeset viewer.