fix: Tooltip describe variant using aria-description string instead of aria-describedby reference

[williamjstanton]

Summary

Fixes: #2797

The describe variant of the tool tip relies on aria-describedby attribute to assign the tool tip text to the accessible description of the target element. This only works when the tool tip is visible and present in the DOM, which only occurs when the element has focus. Screen readers can access web page elements without necessarily using keyboard focus, therefore, this variant didn't appear to always work reliably for screen reader users.

Release Category

Components

Release Note

Replaces aria-describedby reference on the target element with an aria-description string

Checklist

• [ ] MDX documentation adheres to Canvas Kit's Documentation Guidelines
• [ ] Label ready for review has been added to PR

For the Reviewer

For the describe variant of Tooltip, I replaced the aria-describedby attribute with aria-description and set the title prop value string. Also, remove the check for if visible, so we can always assign this string to the description.

• [ ] PR title is short and descriptive
• [ ] PR summary describes the change (Fixes/Resolves linked correctly)
• [ ] PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• [ ] Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

• in the useTooltip custom hook
• check out the updates to the Describe examples in storybook
• check out the new "Tooltip" section under "Examples" in Storybook

Areas for Feedback? (optional)

• [X] Code
• [X] Documentation
• [X] Testing
• [ ] Codemods

Testing Manually

In the following scenarios, validate the issues cannot be reproduced and the tool tip text is always described without focusing the button elements.

Steps to reproduce the behavior: With VoiceOver / MacOS:

1. Launch VoiceOver, open Safari
2. Canvas Design Site: Tooltip popups > Describing an element
3. Reading commands: Ctrl + Opt + Right
4. Issue: observe tool tip text on Delete button is not described
5. Press Tab to focus “Show Code”
6. Read backward: Ctrl + Opt + Left Arrow
7. Issue: observe tool tip text on Delete button is not described
8. Set Rotor to “Form Fields”: Ctrl + Opt + Cmd + Right Arrow
9. Jump buttons on the page: Ctrl + Opt + Cmd + UP / DOWN arrow
10. Issue: observe tool tip text on Delete button is not described

With NVDA on Windows 11:

1. Launch NVDA, open Chrome
2. Canvas site => Tooltips => Describing an element
3. In virtual mode, use quick key ‘b’ to jump to the Delete Button
4. Issue: observe the tool tip text is not described

Screenshots or GIFs (if applicable)

No visual changes. Just aria attribute change.

Thank You Gif (optional)

[cypress[bot]]

Workday/canvas-kit    Run #8255

Run Properties:   Passed #8255  •  7e1a65bc07 ℹ️: Merge 91c8249aee3b3bdd0dead655e2321f8789288b00 into 36cb5e3cb24c43de85acf72a534c...

Project	Workday/canvas-kit
Branch Review	william-tooltip-description
Run status	Passed #8255
Run duration	02m 48s
Commit	7e1a65bc07 ℹ️: Merge 91c8249aee3b3bdd0dead655e2321f8789288b00 into 36cb5e3cb24c43de85acf72a534c...
Committer	William Stanton
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	1
Pending	21
Skipped	0
Passing	934
View all changes introduced in this branch ↗︎

UI Coverage  21.3%
Untested elements	1524
Tested elements	410

Accessibility  99.17%
Failed rules	6 critical   5 serious   0 moderate   2 minor
Failed elements	162

[mannycarrera4]

closing to revisit after v12