Aria-practices: 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/w3c/aria-practices/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/w3c/aria-practices/issues/986

<zcorpan> GitHub: https://github.com/w3c/aria-practices/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!