[faciledictu]

Summary:

The View docs list aria-modal as an iOS prop that "has precedence over the
accessibilityViewIsModal prop". View does not map it, though: View.js
converts aria-label, aria-live, aria-hidden and the other aria-* props
to their accessibility* forms, but aria-modal is passed through unchanged,
and the native side only reads accessibilityViewIsModal. As a result
<View aria-modal> does nothing, and VoiceOver can still reach the views
behind a custom dialog.

When aria-modal was added in #34506, it was mapped in Pressable and the
Touchable* components and added to ViewPropTypes, but View.js itself was
not changed, so the prop is typed and documented on View but has no effect
there.

This change maps aria-modal to accessibilityViewIsModal in View, with
aria-modal taking precedence, as documented.

Changelog:

[IOS] [FIXED] - aria-modal on View now sets accessibilityViewIsModal

Test Plan:

Checked on an iPhone (iOS 27) with React Native 0.88.0 (Expo SDK 58,
development build), VoiceOver on. A screen with three background buttons and a
custom overlay that is their sibling:

import { useState } from 'react';
import { Pressable, Text, View } from 'react-native';

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, padding: 48, gap: 16 }}>
        {['One', 'Two', 'Three'].map((title) => (
          <Pressable key={title} role="button">
            <Text>Background item {title}</Text>
          </Pressable>
        ))}
        <Pressable role="button" onPress={() => setOpen(true)}>
          <Text>Open the dialog</Text>
        </Pressable>
      </View>
      {open && (
        <View
          aria-modal
          style={{
            position: 'absolute',
            inset: 0,
            justifyContent: 'center',
            padding: 32,
            backgroundColor: 'rgba(0,0,0,0.4)',
          }}
        >
          <View style={{ backgroundColor: 'white', padding: 24, gap: 16 }}>
            <Text role="heading">Dialog</Text>
            <Pressable role="button" onPress={() => setOpen(false)}>
              <Text>Close</Text>
            </Pressable>
          </View>
        </View>
      )}
    </View>
  );
}

Before: with the dialog open, swiping right goes past "Close" to the
"Background item" buttons, and touching where they are focuses them.
Replacing aria-modal with accessibilityViewIsModal keeps focus inside the
dialog.

After: aria-modal behaves the same as accessibilityViewIsModal.

[meta-cla]

Hi @faciledictu!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[meta-codesync]

@javache has imported this pull request. If you are a Meta employee, you can view this in D126904378.