单击

Question

我在UI中工作，按钮将被一个无法关闭的小窗体替换。用户点击该按钮后该按钮将消失。

问题不在于如何在JavaScript中实现，问题在于如何改善可访问性。

我试图解决这个问题，因为按钮崩溃，隐藏按钮除了屏幕阅读器并在点击后管理此元素的tabindex以确保没有人可以再次访问。

我创建了一个codepen来解释解决方案，简化了我的解决方案，但看起来对我来说很糟糕。 https://codepen.io/luarmr/pen/oWbZYK

HTML：

<div>
  <button onclick="showContent(this, 'action-box');" aria-expanded="false" aria-controls="action-box">Do you want to perform an action?
  </button>
  <div id="action-box" role="region" aria-label="We will do something in this box" aria-hidden="true">
    <form action="some action">
      <label for="myinput" class="control-label sr-only">
                    Introduce a value
                </label>
      <input class="form-control" type="text" name="myinput" value="" placeholder="introduce a value">
      <input type="submit" value="send action">
    </form>
  </div>
</div> 

JS：

function showContent(node, id) {
  $(node).attr('aria-expanded', 'true')
    .attr('tabindex','-1');
  $('#'+id).attr('aria-hidden', 'false');
}

是否应该添加aria-expanded并将焦点移至新面板？我觉得这个解决方案过于复杂。