Skip to:
Content

BuddyPress.org

Changeset 11564


Ignore:
Timestamp:
06/02/2017 12:15:51 AM (8 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.