Issue

Loading states aren't communicated to screen readers

Fix

1. Include <span role="status" aria-atomic="true"> with buttons
   Why role="status"? This role acts as a live region that will allow us to notify assistive tech that something changed without a user having to do anything, even if they've navigated away from the button.
   Why aria-atomic="true"? This will tell the assistive tech to read the whole message instead of just the word that changed. (Because we don't know what content will be in the button, this is the safer option.)

2. If/When isLoading changes, pipe the new button text into the <span> we setup
   If the text didn't change, make some up by appending "is loading" to the button text when isLoading=true

3. Clear the <span> text after 2 seconds
   Even though we set aria-atomic="true" above, support is mixed so it's good practice to clear the text if you want to help ensure you're reading the whole string.
   Why 2 seconds? Because there's no way to know when the assistive tech might have finished reading it so it's a good guess at "this should have finished by now..."

Example DOM

Initial render

<EuiScreenreaderOnly><span role="status" aria-atomic="true"></span></EuiScreenreaderOnly>
<button>Click me to load data</button>

Button is loading

<EuiScreenreaderOnly><span role="status" aria-atomic="true">Loading data...</span></EuiScreenreaderOnly>
<button>Loading data... </button>

Button is done loading

<EuiScreenreaderOnly><span role="status" aria-atomic="true">Your data is ready</span></EuiScreenreaderOnly>
<button disabled>Your data is ready</button>

More details

https://adrianroselli.com/2021/01/multi-function-button.html