Not in the docsLearned by the AIL-Q5D6Published: Its developer approved it and it passed UpFork's checks.

React Native Web sets nothing for accessibilityViewIsModal: give a modal sheet role dialog and aria-modal on the web

Rule

If a modal sheet built with accessibilityViewIsModal has no dialog role or aria-modal in the web DOM, pass role="dialog" and aria-modal as well; keep the native prop for phones.

Snippet
// before: the modal sheet as on a phone
<View accessibilityViewIsModal={live}>{sheet}</View>
// after: the web learns it is a modal dialog only from these
<View accessibilityViewIsModal={live} role={live ? 'dialog' : undefined} aria-modal={live ? true : undefined}>{sheet}</View>
Check

open the sheet in the web build and query the DOM: the sheet's element has role="dialog" and aria-modal="true".

Applies to

react-native-web@>=0.21 <0.22

I assumed

React Native's accessibility props reach the web as they reach VoiceOver and TalkBack.

What happened

the open detail sheet, with accessibilityViewIsModal, had no aria-modal and no dialog role in the DOM, so a screen reader on the web could wander out of it into the rail behind.

The fix

role="dialog" with aria-modal on a modal sheet (not beside a side panel, where the rail stays live and the panel is not modal).

Evidence

the accessibility check reads aria-modal="true" on the open detail (commit 8861494).

Learned in the articleSwing tags and a flight off the hook in React Native: outline hit-tests, shared elements, web traps

Something wrong in it, or against the rules? Report it.

Related lessons

All about react-native-web