Skip to:
Content

BuddyPress.org

Changeset 12095


Ignore:
Timestamp:
05/17/2018 08:04:56 PM (7 years ago)
Author:
djpaul
Message:

Admin, Welcome screen: accessibility improvements.

Fixes #7835

Props to mercime for the initial patch.

Location:
trunk/src/bp-core
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-core/admin/css/common-rtl.css

    r11999 r12095  
    1717    2.2 Settings - Components
    1818    2.3 Tools
     19    2.4 Tooltips
    19203.0 Users
    2021    3.1 Users List
    … …  
    302303}
    303304
     305/*
     306 * 2.4 Tooltips
     307 */
     308.bp-tooltip {
     309    position: relative;
     310}
     311
     312.bp-tooltip:after {
     313    background: #fff;
     314    border: 1px solid #aaa;
     315    border-collapse: separate;
     316    border-radius: 1px;
     317    box-shadow: -1px 1px 0 1px rgba(132, 132, 132, 0.3);
     318    color: #000;
     319    content: attr(data-bp-tooltip);
     320    display: none;
     321    font-family: sans-serif;
     322    font-size: 11px;
     323    font-weight: 400;
     324    letter-spacing: normal;
     325    line-height: 1.5;
     326    margin-top: 10px;
     327    max-width: 240px;
     328    opacity: 0;
     329    padding: 3px 6px;
     330    position: absolute;
     331    left: 50%;
     332    text-align: center;
     333    text-decoration: none;
     334    text-shadow: none;
     335    text-transform: none;
     336    top: 100%;
     337    -webkit-transform: translateX(-50%);
     338    -ms-transform: translateX(-50%);
     339    transform: translateX(-50%);
     340    -webkit-transition: opacity 2s ease-out;
     341    -ms-transition: opacity 2s ease-out;
     342    transition: opacity 2s ease-out;
     343    white-space: pre;
     344    word-wrap: break-word;
     345    z-index: 998;
     346}
     347
     348.bp-hello-close .bp-tooltip:after {
     349    left: 0;
     350    text-align: left;
     351    -webkit-transform: translateX(0);
     352    -ms-transform: translateX(0);
     353    transform: translateX(0);
     354}
     355
     356.bp-hello-social .bp-tooltip:after {
     357    bottom: 120%;
     358    margin-bottom: 20px;
     359    margin-top: 0;
     360    top: auto;
     361    -webkit-transform: translateX(-15%);
     362    -ms-transform: translateX(-15%);
     363    transform: translateX(-15%);
     364}
     365
     366.bp-tooltip:hover:after,
     367.bp-tooltip:active:after,
     368.bp-tooltip:focus:after {
     369    display: inline-block;
     370    opacity: 1;
     371    overflow: visible;
     372    text-decoration: none;
     373    z-index: 999;
     374}
    304375
    305376/*------------------------------------------------------------------------------

  • trunk/src/bp-core/admin/css/common.css

    r11999 r12095  
    1717    2.2 Settings - Components
    1818    2.3 Tools
     19    2.4 Tooltips
    19203.0 Users
    2021    3.1 Users List
    … …  
    302303}
    303304
     305/*
     306 * 2.4 Tooltips
     307 */
     308.bp-tooltip {
     309    position: relative;
     310}
     311
     312.bp-tooltip:after {
     313    background: #fff;
     314    border: 1px solid #aaa;
     315    border-collapse: separate;
     316    border-radius: 1px;
     317    box-shadow: 1px 1px 0 1px rgba(132, 132, 132, 0.3);
     318    color: #000;
     319    content: attr(data-bp-tooltip);
     320    display: none;
     321    font-family: sans-serif;
     322    font-size: 11px;
     323    font-weight: 400;
     324    letter-spacing: normal;
     325    line-height: 1.5;
     326    margin-top: 10px;
     327    max-width: 240px;
     328    opacity: 0;
     329    padding: 3px 6px;
     330    position: absolute;
     331    right: 50%;
     332    text-align: center;
     333    text-decoration: none;
     334    text-shadow: none;
     335    text-transform: none;
     336    top: 100%;
     337    -webkit-transform: translateX(50%);
     338    -ms-transform: translateX(50%);
     339    transform: translateX(50%);
     340    -webkit-transition: opacity 2s ease-out;
     341    -ms-transition: opacity 2s ease-out;
     342    transition: opacity 2s ease-out;
     343    white-space: pre;
     344    word-wrap: break-word;
     345    z-index: 998;
     346}
     347
     348.bp-hello-close .bp-tooltip:after {
     349    right: 0;
     350    text-align: right;
     351    -webkit-transform: translateX(0);
     352    -ms-transform: translateX(0);
     353    transform: translateX(0);
     354}
     355
     356.bp-hello-social .bp-tooltip:after {
     357    bottom: 120%;
     358    margin-bottom: 20px;
     359    margin-top: 0;
     360    top: auto;
     361    -webkit-transform: translateX(15%);
     362    -ms-transform: translateX(15%);
     363    transform: translateX(15%);
     364}
     365
     366.bp-tooltip:hover:after,
     367.bp-tooltip:active:after,
     368.bp-tooltip:focus:after {
     369    display: inline-block;
     370    opacity: 1;
     371    overflow: visible;
     372    text-decoration: none;
     373    z-index: 999;
     374}
    304375
    305376/*------------------------------------------------------------------------------

  • trunk/src/bp-core/admin/css/hello-rtl.css

    r12007 r12095  
    3838
    3939#bp-hello-container a:hover {
     40    -webkit-transition: all 0.1s ease-in-out;
     41    -o-transition: all 0.1s ease-in-out;
    4042    transition: all 0.1s ease-in-out;
    4143    color: black;
    … …  
    5557 * 2.0 - Dashicons
    5658 *----------------------------------------------------------------------------*/
    57 .bp-hello-close a:hover:before {
    58     transition: all 0.1s ease-in-out;
    59     color: var(--bp-hello-color-primary);
    60 }
    61 
    62 .bp-hello-close a.close-modal:before {
     59.bp-hello-close .button {
     60    padding: 5px !important;
     61}
     62
     63.bp-hello-close .close-modal:before {
    6364    content: "\f158";
    6465    color: #23282d;
    6566    /* wp toolbar */
    66     font: 400 35px/1 dashicons;
     67    font: 400 1.5em/1 dashicons;
    6768    speak: none;
    6869    -webkit-font-smoothing: antialiased;
    6970    -moz-osx-font-smoothing: grayscale;
    7071    background-image: none !important;
     72}
     73
     74.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
     75    -webkit-transition: all 0.1s ease-in-out;
     76    -o-transition: all 0.1s ease-in-out;
     77    transition: all 0.1s ease-in-out;
     78    color: var(--bp-hello-color-primary);
    7179}
    7280
    … …  
    8290
    8391.bp-hello-social li a:hover:before {
     92    -webkit-transition: all 0.1s ease-in-out;
     93    -o-transition: all 0.1s ease-in-out;
    8494    transition: all 0.1s ease-in-out;
    8595    color: var(--bp-hello-color-primary);
    … …  
    125135 */
    126136.bp-hello-footer {
     137    display: -webkit-box;
     138    display: -ms-flexbox;
    127139    display: flex;
     140    -ms-flex-wrap: wrap;
    128141    flex-wrap: wrap;
    129142    height: 58px;
    … …  
    133146.bp-hello-social-cta,
    134147.bp-hello-social-links {
     148    -ms-flex-preferred-size: 50%;
    135149    flex-basis: 50%;
    136150}
    … …  
    178192#bp-hello-backdrop {
    179193    background-color: rgba(0, 0, 0, 0.8);
     194    -webkit-transition: opacity 0.15s ease-out;
     195    -o-transition: opacity 0.15s ease-out;
    180196    transition: opacity 0.15s ease-out;
    181197}
    … …  
    235251    left: 25px;
    236252    text-align: left;
    237 }
    238 
    239 .bp-hello-close a {
    240     text-decoration: none;
    241253}
    242254
    … …  
    286298        left: 30px;
    287299    }
    288     .bp-hello-close a.close-modal:before {
     300    .bp-hello-close .close-modal:before {
    289301        line-height: 0.7;
    290302    }

  • trunk/src/bp-core/admin/css/hello.css

    r12007 r12095  
    3838
    3939#bp-hello-container a:hover {
     40    -webkit-transition: all 0.1s ease-in-out;
     41    -o-transition: all 0.1s ease-in-out;
    4042    transition: all 0.1s ease-in-out;
    4143    color: black;
    … …  
    5557 * 2.0 - Dashicons
    5658 *----------------------------------------------------------------------------*/
    57 .bp-hello-close a:hover:before {
    58     transition: all 0.1s ease-in-out;
    59     color: var(--bp-hello-color-primary);
    60 }
    61 
    62 .bp-hello-close a.close-modal:before {
     59.bp-hello-close .button {
     60    padding: 5px !important;
     61}
     62
     63.bp-hello-close .close-modal:before {
    6364    content: "\f158";
    6465    color: #23282d;
    6566    /* wp toolbar */
    66     font: 400 35px/1 dashicons;
     67    font: 400 1.5em/1 dashicons;
    6768    speak: none;
    6869    -webkit-font-smoothing: antialiased;
    6970    -moz-osx-font-smoothing: grayscale;
    7071    background-image: none !important;
     72}
     73
     74.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
     75    -webkit-transition: all 0.1s ease-in-out;
     76    -o-transition: all 0.1s ease-in-out;
     77    transition: all 0.1s ease-in-out;
     78    color: var(--bp-hello-color-primary);
    7179}
    7280
    … …  
    8290
    8391.bp-hello-social li a:hover:before {
     92    -webkit-transition: all 0.1s ease-in-out;
     93    -o-transition: all 0.1s ease-in-out;
    8494    transition: all 0.1s ease-in-out;
    8595    color: var(--bp-hello-color-primary);
    … …  
    125135 */
    126136.bp-hello-footer {
     137    display: -webkit-box;
     138    display: -ms-flexbox;
    127139    display: flex;
     140    -ms-flex-wrap: wrap;
    128141    flex-wrap: wrap;
    129142    height: 58px;
    … …  
    133146.bp-hello-social-cta,
    134147.bp-hello-social-links {
     148    -ms-flex-preferred-size: 50%;
    135149    flex-basis: 50%;
    136150}
    … …  
    178192#bp-hello-backdrop {
    179193    background-color: rgba(0, 0, 0, 0.8);
     194    -webkit-transition: opacity 0.15s ease-out;
     195    -o-transition: opacity 0.15s ease-out;
    180196    transition: opacity 0.15s ease-out;
    181197}
    … …  
    235251    right: 25px;
    236252    text-align: right;
    237 }
    238 
    239 .bp-hello-close a {
    240     text-decoration: none;
    241253}
    242254
    … …  
    286298        right: 30px;
    287299    }
    288     .bp-hello-close a.close-modal:before {
     300    .bp-hello-close .close-modal:before {
    289301        line-height: 0.7;
    290302    }

  • trunk/src/bp-core/admin/js/hello.js

    r11999 r12095  
    99     */
    1010    var bp_hello_open_modal = function() {
     11        var backdrop = document.getElementById( 'bp-hello-backdrop' ),
     12            modal = document.getElementById( 'bp-hello-container' );
     13
    1114        document.body.classList.add( 'bp-disable-scroll' );
    1215
    13         // Show.
    14         document.getElementById( 'bp-hello-backdrop' ).style.display  = '';
    15         document.getElementById( 'bp-hello-container' ).style.display = '';
     16        // Show modal and overlay.
     17        backdrop.style.display = '';
     18        modal.style.display    = '';
     19
     20        // Focus the "X" so bp_hello_handle_keyboard_events() works.
     21        var focus_target = modal.querySelectorAll( 'a[href], button' );
     22        focus_target     = Array.prototype.slice.call( focus_target );
     23        focus_target[0].focus();
     24
     25        // Events.
     26        modal.addEventListener( 'keydown', bp_hello_handle_keyboard_events );
     27        backdrop.addEventListener( 'click', bp_hello_close_modal );
    1628    };
    1729
    1830    /**
    19      * Close the BuddyPress Hello modal.
     31     * Close modal if "X" or background is touched.
     32     *
     33     * @param {Event} event - A click event.
    2034     */
    21     var bp_hello_close_modal = function() {
    22         var backdrop = document.getElementById( 'bp-hello-backdrop' ),
    23             modal = document.getElementById( 'bp-hello-container' );
    24 
    25         document.body.classList.remove( 'bp-disable-scroll' );
    26 
    27         // Hide.
    28         modal.parentNode.removeChild( modal );
    29         backdrop.parentNode.removeChild( backdrop );
    30     };
    31 
    32     // Close modal if "X" or background is touched.
    3335    document.addEventListener( 'click', function( event ) {
    3436        var backdrop = document.getElementById( 'bp-hello-backdrop' );
    35 
    3637        if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
    3738            return;
    3839        }
    3940
    40         var backdrop_click = backdrop.contains( event.target ),
     41        var backdrop_click    = backdrop.contains( event.target ),
    4142            modal_close_click = event.target.classList.contains( 'close-modal' );
    4243
    … …  
    4849    }, false );
    4950
    50     // Close modal if escape key is presssed.
    51     document.addEventListener( 'keyup', function( event ) {
    52         if ( event.keyCode === 27 ) {
    53             if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
    54                 return;
     51    /**
     52     * Close the Hello modal.
     53     */
     54    var bp_hello_close_modal = function() {
     55        document.body.classList.remove( 'bp-disable-scroll' );
     56
     57        // Hide modal and overlay.
     58        document.getElementById( 'bp-hello-container' ).style.display = 'none';
     59        document.getElementById( 'bp-hello-backdrop' ).style.display  = 'none';
     60    };
     61
     62    /**
     63     * Restrict keyboard focus to elements within the BuddyPress Hello modal.
     64     *
     65     * @param {Event} event - A keyboard focus event.
     66     */
     67    var bp_hello_handle_keyboard_events = function( event ) {
     68        var modal = document.getElementById( 'bp-hello-container' ),
     69            focus_targets = Array.prototype.slice.call(
     70                modal.querySelectorAll( 'a[href], button' )
     71            ),
     72            first_tab_stop = focus_targets[0],
     73            last_tab_stop  = focus_targets[ focus_targets.length - 1 ];
     74
     75        // Check for TAB key press.
     76        if ( event.keyCode === 9 ) {
     77            // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
     78            if ( event.shiftKey && document.activeElement === first_tab_stop ) {
     79                event.preventDefault();
     80                last_tab_stop.focus();
     81
     82            // When TAB reaches last tab stop, go to first tab stop in modal.
     83            } else if ( document.activeElement === last_tab_stop ) {
     84                event.preventDefault();
     85                first_tab_stop.focus();
    5586            }
    5687
     88        // Check for ESCAPE key press.
     89        } else if ( event.keyCode === 27 ) {
    5790            bp_hello_close_modal();
    5891        }
    59     }, false );
     92    };
    6093
    6194    // Init modal after the screen's loaded.

  • trunk/src/bp-core/admin/sass/hello.scss

    r12007 r12095  
    4040
    4141        &:hover {
     42            -webkit-transition: all 0.1s ease-in-out;
     43            -o-transition: all 0.1s ease-in-out;
    4244            transition: all 0.1s ease-in-out;
    4345            color: rgb(0, 0, 0);
    … …  
    6769.bp-hello-close {
    6870
    69     a {
    70 
    71         &:hover:before {
    72             transition: all 0.1s ease-in-out;
    73             color: var(--bp-hello-color-primary);
    74         }
    75 
    76         &.close-modal:before {
     71    .button {
     72        padding: 5px !important;
     73    }
     74
     75    .close-modal {
     76
     77        &:before {
    7778            content: "\f158";
    7879            color: #23282d; /* wp toolbar */
    79             font: 400 35px/1 dashicons;
     80            font: 400 1.5em/1 dashicons;
    8081            speak: none;
    8182            -webkit-font-smoothing: antialiased;
    8283            -moz-osx-font-smoothing: grayscale;
    8384            background-image: none !important;
     85        }
     86
     87        &:focus:before,
     88        &:hover:before {
     89            -webkit-transition: all 0.1s ease-in-out;
     90            -o-transition: all 0.1s ease-in-out;
     91            transition: all 0.1s ease-in-out;
     92            color: var(--bp-hello-color-primary);
    8493        }
    8594    }
    … …  
    100109
    101110        &:hover:before {
     111            -webkit-transition: all 0.1s ease-in-out;
     112            -o-transition: all 0.1s ease-in-out;
    102113            transition: all 0.1s ease-in-out;
    103114            color: var(--bp-hello-color-primary);
    … …  
    127138    right: 0;
    128139    bottom: 0;
    129     z-index: 9998; // >= 9990 for main menu
     140    z-index: 9998;
    130141
    131142    display: none;
    … …  
    136147    top: 0;
    137148    bottom: 80px;
    138     z-index: 99999; // >= 99998 for toolbar
     149    z-index: 99999;
    139150}
    140151
    … …  
    147158 */
    148159.bp-hello-footer {
     160    display: -webkit-box;
     161    display: -ms-flexbox;
    149162    display: flex;
     163    -ms-flex-wrap: wrap;
    150164    flex-wrap: wrap;
    151165
    … …  
    156170.bp-hello-social-cta,
    157171.bp-hello-social-links {
     172    -ms-flex-preferred-size: 50%;
    158173    flex-basis: 50%;
    159174}
    … …  
    210225#bp-hello-backdrop {
    211226    background-color: rgba(0, 0, 0, 0.8);
     227    -webkit-transition: opacity 0.15s ease-out;
     228    -o-transition: opacity 0.15s ease-out;
    212229    transition: opacity 0.15s ease-out;
    213230}
    … …  
    276293    right: 25px;
    277294    text-align: right;
    278 
    279     a {
    280         text-decoration: none;
    281     }
    282295}
    283296
    … …  
    334347        height: auto;
    335348        max-height: inherit;
    336 
    337349        padding: 6px 30px;
    338350    }
    … …  
    341353        right: 30px;
    342354
    343         a {
    344 
    345             &.close-modal:before {
    346                 line-height: 0.7;
    347             }
     355        .close-modal:before {
     356            line-height: 0.7;
    348357        }
    349358    }

  • trunk/src/bp-core/classes/class-bp-admin.php

    r12093 r12095  
    558558        </div>
    559559
    560         <div id="bp-hello-container" style="display: none;">
    561             <div class="bp-hello-header">
     560        <div id="bp-hello-container" role="dialog" aria-labelledby="bp-hello-title" style="display: none;">
     561            <div class="bp-hello-header" role="document">
    562562                <div class="bp-hello-close">
    563                     <a class="close-modal" href="#" title="<?php echo esc_attr( 'Close pop-up', 'buddypress' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span></a>
     563                    <button type="button" class="close-modal button bp-tooltip" data-bp-tooltip="<?php echo esc_attr( 'Close pop-up', 'buddypress' ); ?>">
     564                        <span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span>
     565                    </button>
    564566                </div>
    565567
    566568                <div class="bp-hello-title">
    567                     <h1><?php esc_html_e( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
     569                    <h1 id="bp-hello-title" tabindex="-1"><?php esc_html_e( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
    568570                </div>
    569571            </div>
    … …  
    588590                    ?>
    589591                </p>
    590                 <img srcset="https://via.placeholder.com/1024x576 1024w, https://via.placeholder.com/2048x1152 2048w" src="https://placekitten.com/1024x576" sizes="(max-width: 1023px) 90vw, 65vw" alt="a rad wolf" />
     592                <img srcset="https://via.placeholder.com/1024x576 1024w, https://via.placeholder.com/2048x1152 2048w" src="https://placekitten.com/1024x576" sizes="(max-width: 1023px) 90vw, 65vw" alt="" />
    591593
    592594
    … …  
    671673                            <?php
    672674                            printf(
    673                                 '<a class="twitter" title="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
     675                                '<a class="twitter bp-tooltip" data-bp-tooltip="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
    674676                                esc_attr( 'Follow BuddyPress on Twitter', 'buddypress' ),
    675677                                esc_url( 'https://twitter.com/buddypress' ),
    … …  
    682684                            <?php
    683685                            printf(
    684                                 '<a class="support" title="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
     686                                '<a class="support bp-tooltip" data-bp-tooltip="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
    685687                                esc_attr( 'Visit the Support Forums', 'buddypress' ),
    686688                                esc_url( 'https://buddypress.org/support/' ),
Note: See TracChangeset for help on using the changeset viewer.