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
Preview removed because the pull request was closed.
2024-11-29 14:41 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

[balzss]

@matyasf can you please check it again? now it also reads the tooltip when the input is focused but I don't think we can prevent that. I think it always reads the label when an input gets focused...

also fyi: it has a ts error that's probably introduced from this pr so a temporary ts-ignore was added

[matyasf]

why did you remove this?

[matyasf]

nice work!

[matyasf]

I did not knew that this is a valid syntax... easier one would be

  theme={{
    componentOverrides: {
      BaseButton: {
        smallHeight: 'auto'
      }
    }
  }}