title: Accessibility, button display secondary from and the button disappear after being click
body: <p>I am working in a UI where a button will be replaced by a panel with small form that can not be closed. The button will disappear after the user clicks on it. </p>
  
  <p>The problem is not about how to do it in JavaScript, The problem is about how to improve the accessibility.</p>
  
  <p>I am trying to solve this problem as a button collapse, hide the button except for screen readers and manage the tabindex of this element after click to be sure no one can access again. </p>
  
  <p>I create a codepen to explain the solution with a simplification of my solution, but seen to hacky for me. 
  <a href="https://codepen.io/luarmr/pen/oWbZYK" rel="nofollow noreferrer">https://codepen.io/luarmr/pen/oWbZYK</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;button onclick="showContent(this, 'action-box');" aria-expanded="false" aria-controls="action-box"&gt;Do you want to perform an action?
    &lt;/button&gt;
    &lt;div id="action-box" role="region" aria-label="We will do something in this box" aria-hidden="true"&gt;
      &lt;form action="some action"&gt;
        &lt;label for="myinput" class="control-label sr-only"&gt;
                      Introduce a value
                  &lt;/label&gt;
        &lt;input class="form-control" type="text" name="myinput" value="" placeholder="introduce a value"&gt;
        &lt;input type="submit" value="send action"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function showContent(node, id) {
    $(node).attr('aria-expanded', 'true')
      .attr('tabindex','-1');
    $('#'+id).attr('aria-hidden', 'false');
  }
  </code></pre>
  
  <p>Should just add aria-expanded and move the focus to the new panel? I feel this solution overcomplicated.</p>