Skip to:
Content

BuddyPress.org

Changeset 11564


Ignore:
Timestamp:
06/02/2017 12:15:51 AM (9 years ago)
Author:
mercime
Message:

Replace title attributes with BuddyPress Tooltips.

The values of title attributes provide additional information which show up on
mouse :hover for some links. However, such text values are not even read by some
ATs and the native title tooltips do not show up for keyboard users on :focus.
This means that some users are deprived of helpful information which can
provide some guidance to navigate through the BP screens.

The new BP tooltip pattern shows additional information on :hover and :focus and
prevents redundant information for users of screen readers or other ATs by
adding aria-label="some-info" only as needed.

See #7188.

Location:
trunk/src
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-activity/bp-activity-filters.php

    r11280 r11564  
    208208
    209209        $activity_allowedtags = $allowedtags;
    210         $activity_allowedtags['a']['class'] = array();
    211         $activity_allowedtags['a']['id']    = array();
    212         $activity_allowedtags['a']['rel']   = array();
    213         $activity_allowedtags['a']['title'] = array();
     210        $activity_allowedtags['a']['aria-label']      = array();
     211        $activity_allowedtags['a']['class']           = array();
     212        $activity_allowedtags['a']['data-bp-tooltip'] = array();
     213        $activity_allowedtags['a']['id']              = array();
     214        $activity_allowedtags['a']['rel']             = array();
     215        $activity_allowedtags['a']['title']           = array();
    214216
    215217        $activity_allowedtags['b']    = array();
    … …  
    224226        $activity_allowedtags['img']['class']  = array();
    225227        $activity_allowedtags['img']['id']     = array();
    226         $activity_allowedtags['img']['title']  = array();
    227228
    228229        $activity_allowedtags['span']                   = array();

  • trunk/src/bp-activity/bp-activity-template.php

    r11447 r11564  
    14941494                // Setup variables for activity meta.
    14951495                $activity_permalink = bp_activity_get_permalink( $activities_template->activity->id, $activities_template->activity );
    1496                 $activity_meta      = sprintf( '%1$s <a href="%2$s" class="view activity-time-since" title="%3$s">%4$s</a>',
     1496                $activity_meta      = sprintf( '%1$s <a href="%2$s" class="view activity-time-since bp-tooltip" data-bp-tooltip="%3$s">%4$s</a>',
    14971497                        $new_content,
    14981498                        $activity_permalink,

  • trunk/src/bp-friends/classes/class-bp-core-friends-widget.php

    r11381 r11564  
    112112                                        <li class="vcard">
    113113                                                <div class="item-avatar">
    114                                                         <a href="<?php bp_member_permalink(); ?>" title="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
     114                                                        <a href="<?php bp_member_permalink(); ?>" class="bp-tooltip" data-bp-tooltip="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
    115115                                                </div>
    116116

  • trunk/src/bp-groups/classes/class-bp-groups-widget.php

    r11528 r11564  
    132132                                        <li <?php bp_group_class(); ?>>
    133133                                                <div class="item-avatar">
    134                                                         <a href="<?php bp_group_permalink() ?>" title="<?php bp_group_name() ?>"><?php bp_group_avatar_thumb() ?></a>
     134                                                        <a href="<?php bp_group_permalink() ?>" class="bp-tooltip" data-bp-tooltip="<?php bp_group_name() ?>"><?php bp_group_avatar_thumb() ?></a>
    135135                                                </div>
    136136

  • trunk/src/bp-members/classes/class-bp-core-members-widget.php

    r11381 r11564  
    127127                                        <li class="vcard">
    128128                                                <div class="item-avatar">
    129                                                         <a href="<?php bp_member_permalink() ?>" title="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
     129                                                        <a href="<?php bp_member_permalink() ?>" class="bp-tooltip" data-bp-tooltip="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
    130130                                                </div>
    131131

  • trunk/src/bp-members/classes/class-bp-core-recently-active-widget.php

    r11033 r11564  
    8686
    8787                                        <div class="item-avatar">
    88                                                 <a href="<?php bp_member_permalink(); ?>" title="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
     88                                                <a href="<?php bp_member_permalink(); ?>" class="bp-tooltip" data-bp-tooltip="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
    8989                                        </div>
    9090

  • trunk/src/bp-members/classes/class-bp-core-whos-online-widget.php

    r11033 r11564  
    8585
    8686                                        <div class="item-avatar">
    87                                                 <a href="<?php bp_member_permalink(); ?>" title="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
     87                                                <a href="<?php bp_member_permalink(); ?>" class="bp-tooltip" data-bp-tooltip="<?php bp_member_name(); ?>"><?php bp_member_avatar(); ?></a>
    8888                                        </div>
    8989

  • trunk/src/bp-templates/bp-legacy/buddypress/activity/index.php

    r11171 r11564  
    143143        <div class="item-list-tabs no-ajax" id="subnav" aria-label="<?php esc_attr_e( 'Activity secondary navigation', 'buddypress' ); ?>" role="navigation">
    144144                <ul>
    145                         <li class="feed"><a href="<?php bp_sitewide_activity_feed_link(); ?>" title="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>"><?php _e( 'RSS', 'buddypress' ); ?></a></li>
     145                        <li class="feed"><a href="<?php bp_sitewide_activity_feed_link(); ?>" class="bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>" aria-label="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>"><?php _e( 'RSS', 'buddypress' ); ?></a></li>
    146146
    147147                        <?php

  • trunk/src/bp-templates/bp-legacy/buddypress/groups/single/activity.php

    r11128 r11564  
    1010<div class="item-list-tabs no-ajax" id="subnav" aria-label="<?php esc_attr_e( 'Group secondary navigation', 'buddypress' ); ?>" role="navigation">
    1111        <ul>
    12                 <li class="feed"><a href="<?php bp_group_activity_feed_link(); ?>" title="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>"><?php _e( 'RSS', 'buddypress' ); ?></a></li>
     12                <li class="feed"><a href="<?php bp_group_activity_feed_link(); ?>" class="bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>" aria-label="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>"><?php _e( 'RSS', 'buddypress' ); ?></a></li>
    1313
    1414                <?php

  • trunk/src/bp-templates/bp-legacy/buddypress/groups/single/group-header.php

    r11171 r11564  
    5959<?php if ( ! bp_disable_group_avatar_uploads() ) : ?>
    6060        <div id="item-header-avatar">
    61                 <a href="<?php echo esc_url( bp_get_group_permalink() ); ?>" title="<?php echo esc_attr( bp_get_group_name() ); ?>">
     61                <a href="<?php echo esc_url( bp_get_group_permalink() ); ?>" class="bp-tooltip" data-bp-tooltip="<?php echo esc_attr( bp_get_group_name() ); ?>">
    6262
    6363                        <?php bp_group_avatar(); ?>

  • trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css

    r11257 r11564  
    2424        3.10 - Extended Profiles
    2525        3.11 - Widgets
     26        3.12 - Tooltips
    26274.0 - Media Queries
    2728        4.1 - Smartphones Landscape
    … …  
    16781679--------------------------------------------------------------*/
    16791680
    1680 .widget.buddypress div.item-avatar img.avatar {
    1681         float: right;
    1682         margin: 0 0 15px 10px;
    1683 }
    1684 
    16851681.widget.buddypress span.activity {
    16861682        display: inline-block;
    … …  
    16951691}
    16961692
    1697 .widget.buddypress div.item{
     1693.widget.buddypress div.item {
    16981694        margin:0 0 1em 0;
    16991695}
    … …  
    17051701}
    17061702
    1707 .widget.buddypress ul.item-list img.avatar {
    1708         height: 40px;
     1703.widget.buddypress div.avatar-block::after {
     1704        content: "";
     1705        display: table;
     1706}
     1707
     1708.widget.buddypress .item-avatar a.bp-tooltip {
     1709        float: right;
     1710        margin-bottom: 15px;
    17091711        margin-left: 10px;
    1710         width: 40px;
    1711 }
     1712}
     1713
    17121714.widget.buddypress div.item-avatar img {
     1715        display: inline-block;
    17131716        height: 40px;
    17141717        margin: 1px;
    … …  
    17161719}
    17171720
    1718 .widget.buddypress div.avatar-block{
    1719         overflow: hidden;
     1721.widget.buddypress .item-avatar a,
     1722.widget.buddypress .item-avatar a:hover,
     1723.widget.buddypress .item-avatar a:focus,
     1724.widget.buddypress .item-avatar a:active,
     1725.widget.buddypress .item-avatar a img {
     1726        -webkit-box-shadow: none;
     1727        box-shadow: none;
    17201728}
    17211729
    … …  
    17621770        clear: both;
    17631771        list-style-type: none;
     1772}
     1773
     1774/*--------------------------------------------------------------
     17753.12 - Tooltips
     1776--------------------------------------------------------------*/
     1777
     1778.buddypress .bp-tooltip {
     1779        position: relative;
     1780}
     1781
     1782.bp-tooltip::after {
     1783        background: #fff;
     1784        border: 1px solid #aaa;
     1785        border-collapse: separate;
     1786        border-radius: 1px;
     1787        -webkit-box-shadow: -1px 1px 0px 1px rgba(132,132,132,0.3);
     1788        -moz-box-shadow: -1px 1px 0px 1px rgba(132,132,132,0.3);
     1789        box-shadow: -1px 1px 0px 1px rgba(132,132,132,0.3);
     1790        color: #333;
     1791        content: attr(data-bp-tooltip);
     1792        display: none;
     1793        font-family: sans-serif;
     1794        font-size: 11px;
     1795        font-weight: normal;
     1796        letter-spacing: normal;
     1797        line-height: 1.5;
     1798        margin-top: 5px;
     1799        max-width: 200px;
     1800        opacity: 0;
     1801        padding: 3px 6px;
     1802        position: absolute;
     1803        left: 50%;
     1804        text-align: center;
     1805        text-decoration: none;
     1806        text-shadow: none;
     1807        text-transform: none;
     1808        top: 100%;
     1809        transform: translateX(-50%);
     1810        -webkit-transform: translateX(-50%);
     1811        white-space: pre;
     1812        word-wrap: break-word;
     1813        z-index: 998;
     1814}
     1815
     1816.bp-tooltip::before {
     1817        border: 5px solid transparent;
     1818        bottom: -5px;
     1819        content: "";
     1820        color: #333;
     1821        display: none;
     1822        height: 0;
     1823        margin-left: -5px;
     1824        opacity: 0;
     1825        position: absolute;
     1826        left: 50%;
     1827        top: auto;
     1828        width: 0;
     1829        z-index: 999;
     1830}
     1831
     1832@-webkit-keyframes tooltip-show {
     1833        from {
     1834                opacity: 0;
     1835        }
     1836        to {
     1837                opacity: 1;
     1838        }
     1839}
     1840
     1841@keyframes tooltip-show {
     1842        from {
     1843                opacity: 0;
     1844        }
     1845        to {
     1846                opacity: 1;
     1847        }
     1848}
     1849
     1850.bp-tooltip:hover::before,
     1851.bp-tooltip:hover::after,
     1852.bp-tooltip:active::before,
     1853.bp-tooltip:active::after,
     1854.bp-tooltip:focus::before,
     1855.bp-tooltip:focus::after {
     1856        display: inline-block;
     1857        overflow: visible;
     1858        text-decoration: none;
     1859        -webkit-animation-name: tooltip-show;
     1860        animation-name: tooltip-show;
     1861        -webkit-animation-duration: 0.1s;
     1862        animation-duration: 0.1s;
     1863        -webkit-animation-fill-mode: forwards;
     1864        animation-fill-mode: forwards;
     1865        -webkit-animation-timing-function: ease-in;
     1866        animation-timing-function: ease-in;
     1867        -webkit-animation-delay: 0.4s;
     1868        animation-delay: 0.4s;
     1869        z-index: 999;
    17641870}
    17651871

  • trunk/src/bp-templates/bp-legacy/css/buddypress.css

    r11257 r11564  
    2424        3.10 - Extended Profiles
    2525        3.11 - Widgets
     26        3.12 - Tooltips
    26274.0 - Media Queries
    2728        4.1 - Smartphones Landscape
    … …  
    16781679--------------------------------------------------------------*/
    16791680
    1680 .widget.buddypress div.item-avatar img.avatar {
    1681         float: left;
    1682         margin: 0 10px 15px 0;
    1683 }
    1684 
    16851681.widget.buddypress span.activity {
    16861682        display: inline-block;
    … …  
    16951691}
    16961692
    1697 .widget.buddypress div.item{
     1693.widget.buddypress div.item {
    16981694        margin:0 0 1em 0;
    16991695}
    … …  
    17051701}
    17061702
    1707 .widget.buddypress ul.item-list img.avatar {
    1708         height: 40px;
     1703.widget.buddypress div.avatar-block::after {
     1704        content: "";
     1705        display: table;
     1706}
     1707
     1708.widget.buddypress .item-avatar a.bp-tooltip {
     1709        float: left;
     1710        margin-bottom: 15px;
    17091711        margin-right: 10px;
    1710         width: 40px;
    1711 }
     1712}
     1713
    17121714.widget.buddypress div.item-avatar img {
     1715        display: inline-block;
    17131716        height: 40px;
    17141717        margin: 1px;
    … …  
    17161719}
    17171720
    1718 .widget.buddypress div.avatar-block{
    1719         overflow: hidden;
     1721.widget.buddypress .item-avatar a,
     1722.widget.buddypress .item-avatar a:hover,
     1723.widget.buddypress .item-avatar a:focus,
     1724.widget.buddypress .item-avatar a:active,
     1725.widget.buddypress .item-avatar a img {
     1726        -webkit-box-shadow: none;
     1727        box-shadow: none;
    17201728}
    17211729
    … …  
    17621770        clear: both;
    17631771        list-style-type: none;
     1772}
     1773
     1774/*--------------------------------------------------------------
     17753.12 - Tooltips
     1776--------------------------------------------------------------*/
     1777
     1778.buddypress .bp-tooltip {
     1779        position: relative;
     1780}
     1781
     1782.bp-tooltip::after {
     1783        background: #fff;
     1784        border: 1px solid #aaa;
     1785        border-collapse: separate;
     1786        border-radius: 1px;
     1787        -webkit-box-shadow: 1px 1px 0px 1px rgba(132,132,132,0.3);
     1788        -moz-box-shadow: 1px 1px 0px 1px rgba(132,132,132,0.3);
     1789        box-shadow: 1px 1px 0px 1px rgba(132,132,132,0.3);
     1790        color: #333;
     1791        content: attr(data-bp-tooltip);
     1792        display: none;
     1793        font-family: sans-serif;
     1794        font-size: 11px;
     1795        font-weight: normal;
     1796        letter-spacing: normal;
     1797        line-height: 1.5;
     1798        margin-top: 5px;
     1799        max-width: 200px;
     1800        opacity: 0;
     1801        padding: 3px 6px;
     1802        position: absolute;
     1803        right: 50%;
     1804        text-align: center;
     1805        text-decoration: none;
     1806        text-shadow: none;
     1807        text-transform: none;
     1808        top: 100%;
     1809        transform: translateX(50%);
     1810        -webkit-transform: translateX(50%);
     1811        white-space: pre;
     1812        word-wrap: break-word;
     1813        z-index: 998;
     1814}
     1815
     1816.bp-tooltip::before {
     1817        border: 5px solid transparent;
     1818        bottom: -5px;
     1819        content: "";
     1820        color: #333;
     1821        display: none;
     1822        height: 0;
     1823        margin-right: -5px;
     1824        opacity: 0;
     1825        position: absolute;
     1826        right: 50%;
     1827        top: auto;
     1828        width: 0;
     1829        z-index: 999;
     1830}
     1831
     1832@-webkit-keyframes tooltip-show {
     1833        from {
     1834                opacity: 0;
     1835        }
     1836        to {
     1837                opacity: 1;
     1838        }
     1839}
     1840
     1841@keyframes tooltip-show {
     1842        from {
     1843                opacity: 0;
     1844        }
     1845        to {
     1846                opacity: 1;
     1847        }
     1848}
     1849
     1850.bp-tooltip:hover::before,
     1851.bp-tooltip:hover::after,
     1852.bp-tooltip:active::before,
     1853.bp-tooltip:active::after,
     1854.bp-tooltip:focus::before,
     1855.bp-tooltip:focus::after {
     1856        display: inline-block;
     1857        overflow: visible;
     1858        text-decoration: none;
     1859        -webkit-animation-name: tooltip-show;
     1860        animation-name: tooltip-show;
     1861        -webkit-animation-duration: 0.1s;
     1862        animation-duration: 0.1s;
     1863        -webkit-animation-fill-mode: forwards;
     1864        animation-fill-mode: forwards;
     1865        -webkit-animation-timing-function: ease-in;
     1866        animation-timing-function: ease-in;
     1867        -webkit-animation-delay: 0.4s;
     1868        animation-delay: 0.4s;
     1869        z-index: 999;
    17641870}
    17651871
Note: See TracChangeset for help on using the changeset viewer.