[Tooltip] Screen reader issues with hover and on focus content

[mlopez-sf]

Original Ticket:

W-14619658

Related Issue:

3174

Fixes

• handleKeyDown method added, tooltip closed on Escape key press.
• isHoveringTooltip variable added: check if user is hovering on tooltip and prevent hiding it
• onMouseLeave method added to close tooltip after hovering

Additional description

• Enable users to dismiss keyboard-triggered content efficiently by pressing the Escape key while keyboard focus is located within the triggered content.
• Users can now move over the additional content without the additional content disappearing.

---

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

• First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
• npm run lint:fix has been run and linting passes.
• Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

• CircleCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.

Required only if there are markup / UX changes

• Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
• Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
• Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
• While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

[Rushitaa]

@interactivellama can we get approval on this PR please? Thank you.

[xulingzhihou]

@mlopez-sf With this fix, you need to be very careful when moving the pointer from the trigger to the tooltip content, otherwise the tooltip will disappear. I am wondering if it is better to add a prop like https://design-system-react-site.herokuapp.com/components/popovers/#prop-hasNoCloseButton, so that user can close the tooltip with a close button or using escape keep

[interactivellama]

I agree that mouse hovering on small tooltips is difficult.

However, before this fix, WCAG 2.1 SC 1.4.13 Content on Hover or Focus was not passing.

@mlopez-sf Thank you for the contribution.

[welcome]

Congrats on merging your first pull request to Design System React! 🎉
If you have a moment, please fill out this five question survey, we would appreciate it.
On behalf of Salesforce's customers, partners, product specialists and employees, we would like offer sincere thanks and appreciation for helping make our user experience better. We look forward to working with you more in the future.
This definitely calls for a high five!

[interactivellama]

@mlopez-sf I'll try to get you a release tomorrow.

[interactivellama]

@mlopez-sf It's looking more like Thursday now.