语义UI反应:如何使背景在模态后面不可切换

Question

我有一个使用语义ui react的工作模式，但我意识到，即使道具closeOnDimmerClick和closeOnEscape设置为false，我的内容也可以在后台进行选项卡式显示。如何防止这种行为？

<Modal
size={popupSize || 'tiny'}
open={isPopupOpen}
closeOnDimmerClick={popupCloseOnDimmerClick}
closeOnEscape={popupCloseOnDimmerClick}
onClose={onPopupClose}
{...rest}
>
{content}
</Modal>

Answer 1

您所指的行为是"焦点俘获"；或"；键盘补漏白"——这是WAI-ARIA授权实践所描述的可访问模式的要求。

截至2022年3月，语义UI不支持此功能。语义UI React自己的模态示例页面可以重现此问题。Github中有一个问题捕获了库的无数可访问性问题——这是2019年的问题，现在仍然开放。此外，2017年还有一个悬而未决的问题，特别是模态中缺乏焦点捕捉，这一问题仍然悬而未决。

这对于您对可访问模态的需求来说是个坏兆头。如果要使用SemanticUIReact模式，则很可能必须通过某种级别的直接DOM操作来实现自己的命令式解决方案。不幸的是，在这个图书馆里，无障碍并没有被视为首要考虑因素——尽管他们对门票的评论表明了他们对解决这些问题的兴趣，但他们也明确表示，他们不被视为高度优先事项。对于任何希望利用该库建立适当的WCAG投诉网站的团体来说，这都将是一个问题。