Skip to:
Content

Opened 16 months ago

Closed 5 months ago

Last modified 4 months ago

#7188 closed enhancement (fixed)

Remove/Replace `title` attributes with Tooltips usable in all devices

Reported by: mercime Owned by: mercime
Milestone: 2.9 Priority: normal
Severity: normal Version:
Component: Core Keywords: has-screenshots has-patch commit
Cc:

Description

Related: removal of title attributes in #7090

For icons and some links:
Remove title attributes and replace with new BP tooltips to provide necessary additional information which are accessible and usable in all devices. Includes:

  • title="Star the first message in this thread" for: the star icon
  • title="Remove all starred messages in this thread" for: the star icon
  • title="RSS Feed" for: RSS
  • title="View Discussion" for: activity post timestamp a.k.a activity permalink
  • title attributes for all Avatars and member and group links

For avatars:
Remove title attributes as alt values and surrounding links with new tooltips above already provide accessible information.

Attachments (14)

7188.patch (13.6 KB) - added by mercime 10 months ago.
7188-2.patch (15.3 KB) - added by mercime 7 months ago.
7188-white-tip.patch (15.4 KB) - added by mercime 6 months ago.
7188-black-tip.patch (15.6 KB) - added by mercime 6 months ago.
tooltip-chrome-mac.png (24.2 KB) - added by dcavins 6 months ago.
Tooltips in Chrome/Mac
tooltip-firefox-mac.png (25.0 KB) - added by dcavins 6 months ago.
Tooltips in Firefox/Mac
tooltip-safari-mac.png (25.0 KB) - added by dcavins 6 months ago.
Tooltips in Safari/Mac
tooltip-vivaldi-mac.png (23.9 KB) - added by dcavins 6 months ago.
Tooltips in Vivaldi/Mac
7188-simplify.patch (4.1 KB) - added by mercime 6 months ago.
7188-Star-Unstar-ViewMessages.patch (42.1 KB) - added by mercime 6 months ago.
7188-star-unstar-viewMessage.png (19.5 KB) - added by mercime 6 months ago.
7188-Star-Unstar-ViewMessages.02.patch (40.7 KB) - added by r-a-y 6 months ago.
7188-group-admins-mods.patch (3.3 KB) - added by mercime 5 months ago.
group-admin-mods-tooltip.gif (22.4 KB) - added by mercime 5 months ago.

Download all attachments as: .zip

Change History (47)

#1 @hnla
16 months ago

@mercime the title attribute is not simply an accessible focused item, I know the ticket on WP trac and while it's partly right it's also partly wrong!

I think I said this on the other ticket but you had closed it so maybe didn't see the comment but again yes many of these attributes can/ought to be removed or reviewed some may extend the clarity of an elements purpose, in other words the title attribute is not simply an accessible device it's for general browsing as too. The alt attr while used in an accessible sense isn't simply for that purpose but to provide info if an image fails to load so if one is simply browsing a title attr in an image can provide information that is lacking otherwise and is as I recall why we added title attr to avatars not that long ago.

What is new BP tooltips or is that a silly question is this a ticket somewhere?

#2 @mercime
16 months ago

@hnla I agree that that ticket is not perfect. I agree with the majority though. Not going to get in the middle of usability experts vs accessibility experts :D

title attributes which provide additional information for some of our links and icons are not usable in touch screens nor for keyboard users. This ticket addresses those issues via a "new BP tooltips" which should be robust and accessible to everyone in all devices.

I've checked out how the large sites like Twitter, Google+, and Github, to name a few, have handled adding information for their icons and user links, and here's what I found:

  • First, they do not use title attributes to show the additional info to users.
  • Second, to provide a cross-browser solution, they use a mix of CSS3 and JS to work.
  • Third, there is additional markup involved. We could make it very simple span for this ticket and then expand on it later so that developers can filter to show large div of information ala Google+.
Last edited 16 months ago by mercime (previous) (diff)

#3 @mercime
16 months ago

  • Milestone set to 2.7

#5 @mercime
14 months ago

  • Milestone changed from 2.7 to Future Release

#6 @slaFFik
12 months ago

@mercime

Will you have time to work on this in BuddyPress 2.8?

#7 @mercime
12 months ago

@slaFFik Yes, thank you. I planned to move this ticket to the 2.8 milestone when I post the alternative solution and patch :)

#8 @mercime
12 months ago

  • Keywords has-screenshots added
  • Milestone changed from Future Release to 2.8

In the first demo, we add extra markup and attributes to the elements where we want to show tooltips like so:

<p>Link: Admin created the group BP Nouveau <a href="#link-to-page" class="bp-tooltip">
<span class="time-since">1 week, 3 days ago<span class="bp-tooltip-text" role="tooltip">View Discussion</span></span></a></p>

An alternative demo at http://codepen.io/mercime/pen/vygMEg just adds a class, aria-label (where needed) and data-bptooltip attributes to the elements to do the same:

<p>Link: Admin created the group BP Nouveau <a href="#link-to-page" class="bp-tooltip" data-bptooltip="View Discussion" aria-label="View Discussion">
<span class="time-since">1 week, 3 days ago</a></p>

Both demos require JS for removing the tooltip after touch ends for mobile.

#9 @boonebgorges
11 months ago

This is neat! I personally like the "alternative" option better - it seems a bit cleaner in the code, and I also prefer not having the animations. But I defer to whatever is most in accord with a11y standards.

#10 @dcavins
11 months ago

I agree that this is neat. I like the alternative version better, too, and wonder if we could further drop the extra data-bptooltip attributes (that appear to always duplicate the aria-label attribute, and we'd always want the aria-label to be populated, right?). If so, the css rule could be:

.bp-tooltip::before{
  content: attr(aria-label);
  ...
}

It was really helpful to have the pens to look at and mess with. Thanks for researching this and building the demos, @mercime.

#11 @mercime
10 months ago

  • Keywords has-patch added

@boonebgorges @dcavins Thank you for your feedback. Both patterns pass with screen readers and I agree with using the simpler alternative version as well :)

@dcavins Yes, we can use just the aria-label for additional information which need to be heard and seen by users but not for item avatars which already have alt attributes read by screen readers.

Attached 7188.patch is a third option.

  • for avatars = add class="bp-tooltip" and data-title="etc.etc." which replaces the title attribute
  • for button icons/links = add class="bp-aria-tooltip" and aria-label="etc.etc."

@mercime
10 months ago

#12 @dcavins
10 months ago

@mercime: Thanks for the clarification. I'm of two minds whether having two tooltip style sets is worth it, just to avoid duplicating the tooltip info. I'm leaning toward your original suggestion:

  • for avatars = add class="bp-tooltip" and data-title="etc.etc." which replaces the title attribute
  • for button icons/links = add class="bp-tooltip" and data-title="etc.etc." AND aria-label="etc.etc."

It seems like keeping the mechanism more uniform would make it easier should anyone need to change the behavior or styling.

Sorry I didn't understand the implications the first time around. I still think this is a cool improvement.

#13 @DJPaul
10 months ago

  • Keywords early added
  • Milestone changed from 2.8 to 2.9

This ticket was mentioned in Slack in #buddypress by r-a-y. View the logs.


7 months ago

#15 @mercime
7 months ago

  • Keywords changed from has-screenshots, has-patch, early to has-screenshots has-patch early

Created two demos for this feature:

  1. White tooltip - http://codepen.io/mercime/pen/bgYaBR
  2. Black tooltip - http://codepen.io/mercime/pen/RKaQbj

Patch coming up for the white tooltip. Black tooltip not as feasible for themes with black background, unless they add a little more style.

#16 @dcavins
7 months ago

Hi @Mercime-

Both of these look great. I'm attracted to the dark version you created. I forked your pen to see how adding a box-shadow might work to make the box stand out on dark or light backgrounds. http://codepen.io/dcavins/pen/rmJbbw

It looks promising to me, at least. :)

@mercime
7 months ago

#17 @mercime
6 months ago

Thanks @dcavins :D

7188-white-tip.patch - has white background with dark text and no tip a la http://codepen.io/mercime/pen/bgYaBR

7188-black-tip.patch - has black background with black tip and white box-shadow a la http://codepen.io/dcavins/pen/rmJbbw

In both patches - adjusted declarations for widget.buddypress .item-avatar -> link and images in order to allow for tooltips to show.

Last edited 6 months ago by mercime (previous) (diff)

This ticket was mentioned in Slack in #buddypress by mercime. View the logs.


6 months ago

#19 @dcavins
6 months ago

Looks good on Mac browsers; I'll attach screenshots.

@dcavins
6 months ago

Tooltips in Chrome/Mac

@dcavins
6 months ago

Tooltips in Firefox/Mac

@dcavins
6 months ago

Tooltips in Safari/Mac

@dcavins
6 months ago

Tooltips in Vivaldi/Mac

#20 @hnla
6 months ago

  • Keywords commit added; early removed
  • Owner set to mercime
  • Status changed from new to assigned

Testing white tips, and looks great, A few comments before commit:

  • tooltip is better positioned above object than below ( as seen in FF on the act headers )as the cursor will tend to obscure the label text.
  • On things like member name strings a title attr repeating the name doesn't benefit so we should remove those in items like activity headers.
  • We could add a better explanation of the act Fav button i.e Add this item to your personal fav list - not critical though just a thought.
  • Messages Stared & the messsage title still appears to be running regular title attr, am I missing something there?

This looks to be good to commit though.

This ticket was mentioned in Slack in #buddypress by hnla. View the logs.


6 months ago

#22 @mercime
6 months ago

In 11564:

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.

#23 @mercime
6 months ago

@dcavins Thanks again for testing on your Mac and for the screenshots :D

@hnla Thanks for your feedback.

tooltip is better positioned above object than below ( as seen in FF on the act headers )as the cursor will tend to obscure the label text.

Per our DM, no longer an issue in FF.

On things like member name strings a title attr repeating the name doesn't benefit so we should remove those in items like activity headers.

Doesn't show up on bp-legacy. Will check with bp-nouveau.

We could add a better explanation of the act Fav button i.e Add this item to your personal fav list - not critical though just a thought.

Definitely will do this with Fav button in bp-nouveau since it has title attr with bp-icon only, along with the other buttons with the same config.

Messages Stared & the messsage title still appears to be running regular title attr, am I missing something there

Creating a separate patch for the Messages stars as these deserve special treatment. The values of title attributes are much longer than 200px and are placed on either the left side or right side of screen depending on Twenty-default theme, then change again for mobile devices. Therefore the patch required for the Messages stars would require adding HTML markup as well as changes in style sheets for Twenty-default themes.

Last edited 6 months ago by mercime (previous) (diff)

#24 @mercime
6 months ago

7188-simplify.patch removes arrow tip style for tooltips as we're going to keep tooltips simple for bp-legacy. White tooltips with arrow tips will be added in bp-nouveau per conversation with @hnla.

#25 @mercime
6 months ago

In 11581:

Simplify styles for BP tooltips in bp-legacy.

Keep bp-tooltips simple by removing placeholder style for arrow tip which will
be added for bp-nouveau but not for bp-legacy.

Props dcavins, hnla, boonebgorges.
See #7188.

#26 @mercime
6 months ago

7188-Star-Unstar-ViewMessages.patch adds the markup for new tooltips for the Messages Star/Unstar UI and View Messages link. The patch also updates some styles for the tooltips in buddypress.css as well as supporting styles in the Twenty Seventeen theme through the Twenty Ten theme.

7188-star-unstar-viewMessage.png - new tooltips as seen on the Twenty Seventeen theme.

#27 @mercime
5 months ago

@r-a-y Thank you for fixing the tooltip for the Star UI to work with the new data-bp-tooltip. Works purrrrfectly :D

#28 @mercime
5 months ago

In 11586:

Update Star UI with BP tooltips and tooltip information.

Props r-a-y, mercime.
See #7188.

#29 @mercime
5 months ago

7188-group-admins-mods.patch adds bp-tooltip to Group Admins/Mods
Animated gif to demonstrate attached.

#30 @mercime
5 months ago

In 11608:

Add BP tooltips for group admins/moderators in group header.

See #7188.

This ticket was mentioned in Slack in #buddypress by hnla. View the logs.


5 months ago

#32 @mercime
5 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 11632:

Adjust and organize BP Tooltip styles.

Fixes #7188.

#33 @mercime
4 months ago

In 11637:

Add bp-tooltip class for notification actions.

Fixes #7188.

Note: See TracTickets for help on using tickets.