fix(tooltip): tooltip sample not working with keyboard navigation.

[MartinKamenov]

Tooltip showing/hiding in sample when buttons are focused.
Fixes: #15044

[jelbourn]

I think a more appropriate behavior here would be to show the tooltip on focus, since that's roughly the same as mouseenter for keyboard.

[MartinKamenov]

@jelbourn Thank you for the feedback.
I made some changes. Feel free to check them out.

[kdinev]

@jelbourn @MartinKamenov Hooking the API call on focus was the first thing that was tried, but due to the issue being logged with a11y concerns, we thought it's better for the button to perform the action after the user has gotten feedback from the screen-reader, or another accessibility technology about what it would do. With focus the screen reader would read what the action (showing/hiding/toggling the tooltip) would be, but the action would've been performed already, while with keyup.enter the action would be performed after the assisting technology has indicated what it would be.

If the tooltip was for the button that triggers it, then focus would be right choice IMO.

[jelbourn]

@kdinev ah, I think you're right. I did not originally look at how this example actually worked. It should in fact just be a click handler. Looking at it more closely, we should:

• Change the text "Mouse over to" to its own paragraph that says "Mouse over or click the following buttons to show or hide the tooltip on the button at the end of this section."
• Change the buttons' content to "Show tooltip", "Hide tooltip", and "Toggle tooltip"

[kdinev]

@jelbourn I'm thinking about how this would behave and it seems to me that having both mouseover and click would be fine for the toggle button, but would be weird for the show and hide buttons. The click with the mouse would just do nothing as the tooltip has already been shown/hidden on mouseover.

How about remove the mouseover all together and leave only a click handler, with the text changed to "Click the following buttons to..."?

[jelbourn]

Agreed, we should just remove the mouseover behaviors entirely and make them all clicks.

[googlebot]

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

ℹ️ Googlers: Go here for more info.

[jelbourn]

Based on the new behavior, I think the aria-label attributes should be updated to just say, e.g.
"Show tooltip on the button at the end of this section"

[jelbourn]

LGTM, thanks!

Could you squash the commits in the PR? The googlebot always flags PRs with multiple authors.

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}