Toolbar Example: Add missing descriptive tooltips

[mcking65]

Per comment in issue 539
by @sh0ji about the toolbar example,
all the controls should have a descriptive title attribute so sighted users don't have to infer or discover their function.
Currently, some have tooltips and some do not.

[lenoraporter]

Anyone working on this task?

[ardnahcivar]

@lenoraporter , yes .

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Toolbar tooltip implementation.

The full IRC log of that discussion

<AnnAbbott> TOPIC: Toolbar tooltip implementation
<jongund> https://raw.githack.com/w3c/aria-practices/issue986-toolbar-button-tooltips/examples/toolbar/toolbar.html
<zcorpan> GitHub: https://github.com//issues/986
<AnnAbbott> jg: added labelledby to div
<AnnAbbott> Carolyn: controversial because could be announced twice
<AnnAbbott> jg: role=tooltip on actual content
<AnnAbbott> Carolyn: Narrator will announce when navigated to
<AnnAbbott> jg: used as both tooltip and label
<AnnAbbott> mck: if used as descendent of button, shouldn't have role=tooltip
<AnnAbbott> Dorothy: adding more stuff and getting confusing
<AnnAbbott> Carolyn: if only using kbd, title doesn't appear
<AnnAbbott> jn: except Edge and IE 11 running on Win8 and above
<jemma_> rrsagent, make minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2019/06/04-aria-apg-minutes.html jemma_
<AnnAbbott> mck: agreed lasts week that not relying on title attribute
<AnnAbbott> mck: part of question is whether using tooltip role on button
<AnnAbbott> mck: screen reader always sees the text, ignoring tooltip
<AnnAbbott> mck: text is always hidden except on hover or focus
<CurtBellew> +1
<AnnAbbott> https://raw.githack.com/w3c/aria-practices/issue986-toolbar-button-tooltips/examples/toolbar/toolbar.html
<MarkMcCarthy> WCAG 2.1 SC 1.4.10 https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
<MarkMcCarthy> s/1.4.10/1.4.13
<AnnAbbott> mck: remove role=tooltip, make hover be persistent and hide font icons from accessible name
<jemma_> "If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;"
<mck> Making tooltip persistent on hover is for WCAG 2.1 compliance.
<AnnAbbott> Curt: tooltip goes away unless hovering over tooltip
<AnnAbbott> Carolyn: copy/paste/cut buttons are different
<AnnAbbott> mck: that's classic tooltip implementation
<AnnAbbott> mck: using describedby
<AnnAbbott> mck: remove title attribute from cut/copy/paste and help buttons
<AnnAbbott> jn: Bold is wrapping weird
<MarkMcCarthy> Nice work Jon!
<MarkMcCarthy> Dorothy: possible to change the width? thinking about somebody changing the size
<MarkMcCarthy> Jon: I made some adjustments, I'll send out a new link and comments can be made on the list

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Tooltips in Toobar Example.

The full IRC log of that discussion

<AnnAbbott> TOPIC: Tooltips in Toobar Example
<AnnAbbott> Preview link of John's tooltips: https://raw.githack.com/w3c/aria-practices/issue986-toolbar-button-tooltips/examples/toolbar/toolbar.html
<AnnAbbott> Issue 986 Tooltip: https://github.com//issues/986
<zcorpan> GitHub: https://github.com//issues/986
<AnnAbbott> jg: just a div with aria-label. Is that what we want?
<AnnAbbott> jg: meets WCAG 2.1 now
<AnnAbbott> Carolyn: Scott O'Hara has input on this
<AnnAbbott> jg: call it a popup label?
<AnnAbbott> Carolyn: confront Scott's issue at another time
<AnnAbbott> Jemma: add WCAG compliance information under Accessibility Features
<AnnAbbott> jn: doesn't close on FF/Win
<AnnAbbott> jn: with mouse
<AnnAbbott> Jemma: works for me with mouse
<AnnAbbott> jn: ESC should always close
<AnnAbbott> jn: WCAG 1.4.13
<jemma_> 1.4.13 Content on Hover or Focus (Level AA)
<AnnAbbott> Jemma: will come back to this

[carmacleod]

@jongund Here's what I see on focus (popup label's "tail" is perfectly joined to the text bubble):

And here's what I see on hover (popup label's "tail" is slightly separated from the text bubble):

I'm on Windows 10, latest Chrome. I'll see if I can debug it.

[carmacleod]

@jongund
I can make the above problem go away by making any one of the following 3 CSS changes.
Your choice which one you like best.

1. change the 2px white border to be 1px in:

[role="toolbar"] button .popup-label {
    ...
    border: 1px solid white;
    ...
}

OR
2. change the top/bottom padding from 2px to 1px in:

[role="toolbar"] button .popup-label {
    ...
    padding: 1px 4px;
    ...
}

OR (this one is a bit strange... ;)
3. change the top from 100% to 99% in:

[role="toolbar"] button .popup-label:after, [role="toolbar"] button .popup-label:before {
    top: 99%;
    ...
}

[jongund]

@carmacleod Carolyn thanks for the fixes I like the first option the best, I will make the change.

[jongund]

@carmacleod Do you want to check the updated example:
Toolbar Example from GitHub branch

[carmacleod]

@jongund Works perfectly! Thank-you!

[mcking65]

Resolved with commit 19f3cdf from merging pr #1069. Thank you @jongund!! Thank you also to the several other people who contributed ideas and feedback!