Description

This task describes the Storybook implementation for the sd-tooltip component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-tooltip can be found here: sd-tooltip Notes.

Comment

Problem: Users must click the button twice the first time to toggle it.

• Solution: Toggle with the first click.

Problem: The button doesn't have an accessible name.

• Solution: Provide a label for the icon.

Problem: By definition, a tooltip is "A contextual popup that displays a description for an element.", but the button in this component is not connected to the tooltip.

• Solution: Put aria-describedby="tooltip" on the button, not the slot.
  -> We have to add a new "story" in docs (Storybook & Figma) which shows tooltip being overwritten with the default button as a trigger and then showing how to connect button by aria-describedby="tooltip". Some limitations are left here: fix: 🤔 Slotted content is not accessible for sd-tooltip #1700

Problem: Using the virtual cursor, screen reader users access the tooltip content before the button in NVDA and VO. It should be the other way around.

• Solution: I'm not exactly sure what's causing this problem (and probably others), but I think it's because you're sloting a slot element.

<slot slot="anchor"></slot>
-> wrap a div around:
<div slot="anchor"><slot>Hello World</slot></div>

Problem: Disabled buttons are focusable and operable (although in an unexpected way; see video).

• Solution: Disable them properly.
  Video Example: https://www.notion.so/matuzo/sd-tooltip-10ef3f6e1bc080b5a2f2c4d4a6076500?pvs=4#10ef3f6e1bc080bf9518ea23fdb012d9

Problem: Scrollable content is not accessible to keyboard users because the tooltip closes when you try to tab into it to scroll.

• Solution: Make the scrollable area keyboard focusable and don't close the tooltip when focus moves.
  -> make it only focusable if content is overflowing.
  Recommendation to only include short text is added to the Do's and Don'ts.

Best Practices

• Don’t use tooltips for critical or unique information.
• Avoid long text in tooltips.

Related WCAG criteria

• https://www.w3.org/WAI/WCAG22/quickref/#content-on-hover-or-focus
• https://www.w3.org/WAI/WCAG22/quickref/#keyboard
• https://www.w3.org/WAI/WCAG22/quickref/#name-role-value

Additional resources

• https://dequeuniversity.com/library/aria/tooltip

Open Questions

• Question1
• Question2

DoR

• Item has been estimated by the team
• Item dependencies have been identified and documented

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch