refactor: addressed comments, updated docs

Author: kachmashk

docs/6.x/docs/components/Dialog/Dialog.mdx

@@ -40,7 +40,9 @@ const MyComponent = () => {
             onDismiss={hideDialog}
             title="Alert"
             content="This is simple dialog"
-            actions={[{ label: 'Done', onPress: hideDialog }]}
+            actions={[
+						 		<Button key='done-btn' onPress={hideDialog}>Done</Button>
+						 ]}
           />
         </Portal>
       </View>

docs/src/data/componentDocs6x.json

@@ -5206,10 +5206,10 @@
     "Dialog/Dialog": {
       "filepath": "Dialog/Dialog.tsx",
       "title": "Dialog",
-      "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showDialog = () => setVisible(true);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <PaperProvider>\n      <View>\n        <Button onPress={showDialog}>Show Dialog</Button>\n        <Portal>\n          <Dialog\n            visible={visible}\n            onDismiss={hideDialog}\n            title=\"Alert\"\n            content=\"This is simple dialog\"\n            actions={[{ label: 'Done', onPress: hideDialog }]}\n          />\n        </Portal>\n      </View>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
+      "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showDialog = () => setVisible(true);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <PaperProvider>\n      <View>\n        <Button onPress={showDialog}>Show Dialog</Button>\n        <Portal>\n          <Dialog\n            visible={visible}\n            onDismiss={hideDialog}\n            title=\"Alert\"\n            content=\"This is simple dialog\"\n            actions={[\n\t\t\t\t\t\t \t\t<Button key='done-btn' onPress={hideDialog}>Done</Button>\n\t\t\t\t\t\t ]}\n          />\n        </Portal>\n      </View>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
       "link": "dialog",
       "data": {
-        "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showDialog = () => setVisible(true);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <PaperProvider>\n      <View>\n        <Button onPress={showDialog}>Show Dialog</Button>\n        <Portal>\n          <Dialog\n            visible={visible}\n            onDismiss={hideDialog}\n            title=\"Alert\"\n            content=\"This is simple dialog\"\n            actions={[{ label: 'Done', onPress: hideDialog }]}\n          />\n        </Portal>\n      </View>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
+        "description": "Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Button, Dialog, Portal, PaperProvider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showDialog = () => setVisible(true);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <PaperProvider>\n      <View>\n        <Button onPress={showDialog}>Show Dialog</Button>\n        <Portal>\n          <Dialog\n            visible={visible}\n            onDismiss={hideDialog}\n            title=\"Alert\"\n            content=\"This is simple dialog\"\n            actions={[\n\t\t\t\t\t\t \t\t<Button key='done-btn' onPress={hideDialog}>Done</Button>\n\t\t\t\t\t\t ]}\n          />\n        </Portal>\n      </View>\n    </PaperProvider>\n  );\n};\n\nexport default MyComponent;\n```",
         "displayName": "Dialog",
         "methods": [],
         "statics": [],

src/components/Dialog/Dialog.tsx

@@ -111,7 +111,9 @@ export type Props = {
  *             onDismiss={hideDialog}
  *             title="Alert"
  *             content="This is simple dialog"
- *             actions={[{ label: 'Done', onPress: hideDialog }]}
+ *             actions={[
+ * 						 		<Button key='done-btn' onPress={hideDialog}>Done</Button>
+ * 						 ]}
  *           />
  *         </Portal>
  *       </View>
@@ -175,7 +177,7 @@ const Dialog = ({
       ]}
       theme={theme}
       testID={testID}
-      aria-label={typeof title === 'string' ? title : ariaLabel}
+      aria-label={ariaLabel ?? (typeof title === 'string' ? title : undefined)}
     >
       {icon ? <DialogIcon icon={icon} /> : null}
 

src/components/Modal.tsx

@@ -226,6 +226,7 @@ function Modal({
           style={[{ opacity }, styles.content, contentContainerStyle]}
           container
           aria-label={ariaLabel}
+          role="dialog"
         >
           {children}
         </Surface>