feat(portal)!: hide content below an overlay from assistive technology

docs/6.x/docs/guides/migration.md

@@ -158,6 +158,19 @@ e.g.:
 
 ### Modal
 
+`Modal` now uses a `Portal` internally and doesn't require an explicit `Portal` wrapper. So you need to remove any existing `Portal` wrappers around `Modal`:
+
+```diff
+-<Portal>
+-  <Modal visible={visible} onDismiss={hideModal}>
+-    <Text>Content</Text>
+-  </Modal>
+-</Portal>
++<Modal visible={visible} onDismiss={hideModal}>
++  <Text>Content</Text>
++</Modal>
+```
+
 - The `contentContainerStyle` prop no longer configures the background color or any border radius property. We have added new props for these:
   - `contentBackgroundColor`
   - `contentBorderRadius`
@@ -184,6 +197,19 @@ e.g.:
 
 ### Dialog
 
+`Dialog` now uses a `Modal` internally and doesn't require an explicit `Portal` wrapper. So you need to remove any existing `Portal` wrappers around `Dialog`:
+
+```diff
+-<Portal>
+-  <Dialog visible={visible} onDismiss={hideDialog}>
+-    <Dialog.Title>Alert</Dialog.Title>
+-  </Dialog>
+-</Portal>
++<Dialog visible={visible} onDismiss={hideDialog}>
++  <Dialog.Title>Alert</Dialog.Title>
++</Dialog>
+```
+
 - The default elevation changed from level `1` to level `3`.
 - The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
 

example/src/DrawerItems.tsx

@@ -10,7 +10,6 @@ import {
   Dialog,
   Drawer,
   Palette,
-  Portal,
   Switch,
   Text,
   TouchableRipple,
@@ -240,24 +239,22 @@ function DrawerItems() {
           </Text>
         </>
       )}
-      <Portal>
-        <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
-          <Dialog.Title>Changing to RTL</Dialog.Title>
-          <Dialog.Content>
-            <Text variant="bodyMedium">
-              Due to Expo Go limitations it is impossible to change RTL
-              dynamically. To do so, you need to create a development build of
-              Example app or change it statically by setting{' '}
-              <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
-              <Text variant="labelMedium">app.json</Text> within{' '}
-              <Text variant="labelMedium">example</Text> directory.
-            </Text>
-            <Dialog.Actions>
-              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
-            </Dialog.Actions>
-          </Dialog.Content>
-        </Dialog>
-      </Portal>
+      <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
+        <Dialog.Title>Changing to RTL</Dialog.Title>
+        <Dialog.Content>
+          <Text variant="bodyMedium">
+            Due to Expo Go limitations it is impossible to change RTL
+            dynamically. To do so, you need to create a development build of
+            Example app or change it statically by setting{' '}
+            <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
+            <Text variant="labelMedium">app.json</Text> within{' '}
+            <Text variant="labelMedium">example</Text> directory.
+          </Text>
+          <Dialog.Actions>
+            <Button onPress={_handleDismissRTLDialog}>Ok</Button>
+          </Dialog.Actions>
+        </Dialog.Content>
+      </Dialog>
     </DrawerContentScrollView>
   );
 }

example/src/Examples/Dialogs/DialogWithCustomColors.tsx

@@ -1,4 +1,4 @@
-import { Button, Portal, Dialog, Palette } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -10,29 +10,27 @@ const DialogWithCustomColors = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog
-        onDismiss={close}
-        theme={{
-          colors: {
-            surfaceContainerHigh: Palette.primary10,
-          },
-        }}
-        visible={visible}
-      >
-        <Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
-        <Dialog.Content>
-          <TextComponent style={{ color: Palette.primary95 }}>
-            This is a dialog with custom colors
-          </TextComponent>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button textColor={Palette.primary95} onPress={close}>
-            Ok
-          </Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog
+      onDismiss={close}
+      theme={{
+        colors: {
+          surfaceContainerHigh: Palette.primary10,
+        },
+      }}
+      visible={visible}
+    >
+      <Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent style={{ color: Palette.primary95 }}>
+          This is a dialog with custom colors
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button textColor={Palette.primary95} onPress={close}>
+          Ok
+        </Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 

example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Portal, Dialog, Palette } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -9,28 +9,26 @@ const DialogWithDismissableBackButton = ({
   visible: boolean;
   close: () => void;
 }) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      visible={visible}
-      dismissable={false}
-      dismissableBackButton
-    >
-      <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.Content>
-        <TextComponent>
-          This is an undismissable dialog, however you can use hardware back
-          button to close it!
-        </TextComponent>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button textColor={Palette.tertiary50} disabled>
-          Disagree
-        </Button>
-        <Button onPress={close}>Agree</Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
+  <Dialog
+    onDismiss={close}
+    visible={visible}
+    dismissable={false}
+    dismissableBackButton
+  >
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.Content>
+      <TextComponent>
+        This is an undismissable dialog, however you can use hardware back
+        button to close it!
+      </TextComponent>
+    </Dialog.Content>
+    <Dialog.Actions>
+      <Button textColor={Palette.tertiary50} disabled>
+        Disagree
+      </Button>
+      <Button onPress={close}>Agree</Button>
+    </Dialog.Actions>
+  </Dialog>
 );
 
 export default DialogWithDismissableBackButton;

example/src/Examples/Dialogs/DialogWithIcon.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { Button, Portal, Dialog, Palette } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -12,24 +12,22 @@ const DialogWithIcon = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Icon icon="alert" />
-        <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
-        <Dialog.Content>
-          <TextComponent>
-            This is a dialog with new component called DialogIcon. When icon is
-            displayed you should center the header.
-          </TextComponent>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button onPress={close} textColor={Palette.error50}>
-            Disagree
-          </Button>
-          <Button onPress={close}>Agree</Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Icon icon="alert" />
+      <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent>
+          This is a dialog with new component called DialogIcon. When icon is
+          displayed you should center the header.
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button onPress={close} textColor={Palette.error50}>
+          Disagree
+        </Button>
+        <Button onPress={close}>Agree</Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 

example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx

@@ -1,6 +1,6 @@
 import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 
-import { Dialog, Palette, Portal } from 'react-native-paper';
+import { Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -12,21 +12,19 @@ const DialogWithLoadingIndicator = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Title>Progress Dialog</Dialog.Title>
-        <Dialog.Content>
-          <View style={styles.flexing}>
-            <ActivityIndicator
-              color={Palette.tertiary30}
-              size={Platform.OS === 'ios' ? 'large' : 48}
-              style={styles.marginRight}
-            />
-            <TextComponent>Loading.....</TextComponent>
-          </View>
-        </Dialog.Content>
-      </Dialog>
-    </Portal>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Title>Progress Dialog</Dialog.Title>
+      <Dialog.Content>
+        <View style={styles.flexing}>
+          <ActivityIndicator
+            color={Palette.tertiary30}
+            size={Platform.OS === 'ios' ? 'large' : 48}
+            style={styles.marginRight}
+          />
+          <TextComponent>Loading.....</TextComponent>
+        </View>
+      </Dialog.Content>
+    </Dialog>
   );
 };