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>