Semantic-UI-react: How to make background un-tabbable behind modal

user_18423445 0
Viewed 127

I have a working modal using semantic-ui-react, but I'm realizing that even with props closeOnDimmerClick and closeOnEscape set to false, that my content is tabbable in the background. How can I prevent this behaviour?

<Modal
  size={popupSize || 'tiny'}
  open={isPopupOpen}
  closeOnDimmerClick={popupCloseOnDimmerClick}
  closeOnEscape={popupCloseOnDimmerClick}
  onClose={onPopupClose}
  {...rest}
>
  {content}
</Modal>
semantic-ui-react semantic-ui reactjs accessibility
1 Answers

The behavior you are referring to is "focus trapping" or "keyboard trapping"-- it is a requirement for accessible modals as described by the WAI-ARIA Authoring Practices.

This is not properly supported in Semantic UI as of March 2022. Semantic UI React's own Modal examples page can reproduce this issue. There is an issue in Github that captures myriad accessibility issues with the library-- this is from 2019 and is still open. Furthermore, there is an open issue from 2017 specifically noting the lack of focus trapping in the modal that is still outstanding as well.

This bodes poorly for your requirement of an accessible modal. If you are to use the Semantic UI React modal, you will most likely have to implement your own imperative solution with some level of direct DOM manipulation. It is unfortunate that accessibility is not treated as a first-class consideration in this library-- while their comments on the ticket show interest in addressing these issues, they also make clear that they are not considered high priority. This will be a problem for any group looking to leverage this library for a properly WCAG-complaint site.

user_68313410
Related