title: What are the rules between aria-live, aria-busy, aria-expanded and aria-controls?
body: <p>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.</p>
  
  <p>Before first click:</p>
  
  <pre><code>&lt;div aria-live="polite"&gt;
      &lt;button&gt;Toggle details&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After first click, while data is loading:</p>
  
  <pre><code>&lt;div aria-live="polite" aria-busy="true"&gt;
      &lt;button aria-controls="details" aria-expanded="false"&gt;Toggle details&lt;/button&gt;
      &lt;div id="details"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After the data is loaded:</p>
  
  <pre><code>&lt;div aria-live="polite" aria-busy="false"&gt;
      &lt;button aria-controls="details" aria-expanded="true"&gt;Toggle details&lt;/button&gt;
      &lt;div id="details"&gt;Some data&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After second click</p>
  
  <pre><code>&lt;div aria-live="polite" aria-busy="false"&gt;
      &lt;button aria-controls="details" aria-expanded="false"&gt;Toggle details&lt;/button&gt;
      &lt;div id="details" style="display: none;"&gt;Some data&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and so on.</p>
  
  <p>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?</p>