Tooltip description read out twice by screen reader

[bethcollins92]

Describe the bug

First the button text is read out, then additional description (aria-describedby). The additional description is being read out twice because it's placed inside of the button and is part of the button text content.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://vanillaframework.io/docs/patterns/tooltips
2. Activate VoiceOver
3. Allow VoiceOver to read through tooltips and see how the text is read out twice

Expected behavior

The description should only be read out twice.

Additional context

Some solutions were suggested by @petermakowski

1. Move span outside the button

<button class="p-tooltip" aria-describedby="default-tooltip">
  Bottom left
</button>
<span class="p-tooltip__message" role="tooltip" id="default-tooltip">Product name to be displayed on the storefront.</span>

2. Try adding aria-hidden="true" to the tooltip span

<button class="p-tooltip" aria-describedby="default-tooltip">
  Bottom left
  <span class="p-tooltip__message" role="tooltip" id="default-tooltip" aria-hidden="true">Product name to be displayed on the storefront.</span>
</button>

[bartaz]

Triage: We have detached tooltips available (that use option 1), option 2 feels bit risky as it may end up hiding tooltip from screen reader.

Probably not worth investing time now in v4, but for consideration in new architecture.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15188.

This message was autogenerated