fix(ui-color-picker): make ColorPicker tooltip VoiceOver focusable

[balzss]

Closes: INSTUI-4259

test plan:

• check colorpicker example with tooltip if voiceover reads the tooltip context correctly

[github-actions]

PR Preview Action v1.4.8
🚀 Deployed preview to https://instructure.github.io/instructure-ui/pr-preview/pr-1771/
on branch gh-pages at 2024-11-27 15:09 UTC

[matyasf]

I dont like that the SR is focusing on nothing and the tooltip does not show with this solution.

I would solve the underlying issue, that icons set aria-hidden to true (in InlineSVG) by default. You just need a small change there to allow this attribute:

[balzss]

@matyasf I've went with a different approach. According to w3c and mdn tooltips should be focusable with keyboard.

[matyasf]

I dont think this is a good solution. NVDA does not read the tooltip. Also its wonky on VO too, when I move the SR focus it does not read it, but after I've tabbed trough it, it will read it
I think its because the svg icon is set to aria-hidden which is a no for focusable elements https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description , so NVDA just removes is from the SR DOM