SpinnerButton: live region can be reached navigating by element using a screen reader

[jfhector]

First, thanks a lot for publishing TenonUI. It's been a fantastically helpful learning resource for me.

I've noticed a small issue with the SpinnerButton.

Steps to reproduce

1. Go to the SpinnerButton demo page
2. Activate a screen reader, if you don't already have one running
3. Place the screen reader cursor on the demo button (labelled 'Click me')
4. Activate the demo spinner button
5. Wait a bit, long enough to each both the 'The async action is busy' and 'The async action is complete' announcements
6. Navigate to the two previous DOM elements using your screen reader (e.g. VO + Left Arrow, or Up Arrow on NVDA).

Observed outcome

You will hear 'The async action is complete' as you navigate the DOM element by element.

This can be confusing, as the action has completed long ago. The announcement is now heard out of context and might create confusion.

Observed with:

• MacOS 10.14 (Mojave) + VoiceOver + latest Safari
• MacOS 10.14 (Mojave) + VoiceOver + latest Chrome
• Windows 10 + latest Chrome + latest NVDA

Expected outcome

I expected to not hear a 'the async action is complete' announcement out of context, when traversing the DOM with a screen reader, long after I've clicked a button.

Suggestion

I imagine that it'd be an improvement to empty the content of each live region 500ms or so after they have been populated, so they don't stay populated in the DOM.