#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 icontitle="Remove all starred messages in this thread"
for: the star icontitle="RSS Feed"
for: RSStitle="View Discussion"
for: activity post timestamp a.k.a activity permalinktitle
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)
Change History (47)
#2
@
8 years 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+.
#4
@
8 years ago
Demo under construction: http://codepen.io/mercime/pen/yaaQab
#6
@
8 years ago
@mercime
Will you have time to work on this in BuddyPress 2.8?
#7
@
8 years 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
@
8 years 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
@
8 years 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
@
8 years 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
@
8 years 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"
anddata-title="etc.etc."
which replaces thetitle
attribute - for button icons/links = add
class="bp-aria-tooltip"
andaria-label="etc.etc."
#12
@
8 years 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.
This ticket was mentioned in Slack in #buddypress by r-a-y. View the logs.
8 years ago
#15
@
7 years ago
- Keywords changed from has-screenshots, has-patch, early to has-screenshots has-patch early
Created two demos for this feature:
- White tooltip - http://codepen.io/mercime/pen/bgYaBR
- 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
@
7 years 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. :)
#17
@
7 years 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.
This ticket was mentioned in Slack in #buddypress by mercime. View the logs.
7 years ago
#20
@
7 years 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.
7 years ago
#23
@
7 years 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.
#24
@
7 years 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.
#26
@
7 years 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
@
7 years 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
#29
@
7 years ago
7188-group-admins-mods.patch adds bp-tooltip to Group Admins/Mods
Animated gif to demonstrate attached.
@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?