docs(ui-focusable): make screenreader annouce Tooltip in Focusable ex…

[ToMESSKa]

…ample by providing aria props

INSTUI-4313

ISSUE:
In Focusable, there is a tooltip called "I'm Focused!", but no hint is provided for screen reader users about its presence.

TEST PLAN:

• navigate to the first example in Focusable using different screen readers
• screen readers should announce both the button text and the tooltip text.
• inspect the HTML code to verify that the elements are correctly associated using aria-labelledby and id attributes

[github-actions]

PR Preview Action v1.6.0
Preview removed because the pull request was closed.
2025-02-21 12:37 UTC

[matyasf]

there is no need to associate the button with itself. Just the tooltip is enough:
<Button aria-labelledby="tooltip">Focus me!</Button> Also I suggest to give a more unique ID to items in examples (e.g. focusable-example1-tooltip, who knows that else could use this ID in the docs app

[ToMESSKa]

@matyasf I associated the button with itself because otherwise, the button's title would not be announced—only the "tooltip" text would be.
(The first example in Tooltip works similarly; the tooltip text is read after the button's title.)

[joyenjoyer]

nice work