我有一个聊天组件，当我们点击网站标题上的聊天图标时，它会加载到侧栏组件中。我需要使其可访问，因此我将tabindex=0添加到所有重要部分，如聊天容器上的最小化图标和关闭图标以及所有聊天消息。现在，当我打开聊天一次，然后再次关闭或最小化它时，这些元素仍然按标签顺序排列，屏幕阅读器会读取它们。当聊天被最小化/关闭时，我如何防止注意力集中在这些元素上？
应该使用display: noneCSS属性隐藏web组件的不可见部分，以防止键盘焦点指向它们，并防止视觉焦点使屏幕阅读器读取它们。