What are the rules between aria-live, aria-busy, aria-expanded and aria-controls?

Question

I'm not sure if I honor all the interdependencies of different aria attributes given the following very simple scenario: Button that toggles visibility of some region, but such region also has to be initialy populated.

Before first click:

<div aria-live="polite">
    <button>Toggle details</button>
</div>

After first click, while data is loading:

<div aria-live="polite" aria-busy="true">
    <button aria-controls="details" aria-expanded="false">Toggle details</button>
    <div id="details"></div>
</div>

After the data is loaded:

<div aria-live="polite" aria-busy="false">
    <button aria-controls="details" aria-expanded="true">Toggle details</button>
    <div id="details">Some data</div>
</div>

After second click

<div aria-live="polite" aria-busy="false">
    <button aria-controls="details" aria-expanded="false">Toggle details</button>
    <div id="details" style="display: none;">Some data</div>
</div>

and so on.

Is this correct? Is it correct that the aria-live is on the separate (parent) tag than the one that actually represents the hideable panel?

Answer 1

In general, ARIA live regions should exist only on containers that have simple blocks of text. A live region will speak its entire contents (barring use of aria-atomic ), and this control may be too complex to be a good fit.

Your disclosure button is good (for this simplified scenario).

As is often the case when applying ARIA (or frankly, most usability questions), the specific code to use depends on the context.

If you have a specific example that would be much easier to test.