Merge branch 'main' into feature/415-narin-snackbar-hook-offset

packages/components/src/components/Snackbar/Snackbar.stories.tsx

@@ -34,9 +34,12 @@ const meta: Meta<SnackbarProps> = {
 export default meta
 
 type Story = StoryObj<SnackbarProps>
-
-const isWeb = Platform.OS !== 'web'
-
+
+/**
+ * Handles rendering the story in non-web platforms to have functional Snackbar
+ * @param props - Arguments from `args` list
+ * @returns Flat Button display with onPress logic to pull up the Snackbar
+ */
 const mobileComponentRenderer = (props: SnackbarProps) => {
   const { isError, messageA11y, onActionPressed, offset } = props.data || {}
   const { show } = useSnackbar()
@@ -57,7 +60,7 @@ const mobileComponentRenderer = (props: SnackbarProps) => {
 }
 
 export const _Default: Story = {
-  render: isWeb ? mobileComponentRenderer : undefined, // Render Snackbar flat in web
+  render: Platform.OS !== 'web' ? mobileComponentRenderer : undefined, // Render Snackbar flat in web
   args: {
     message: 'Message moved to Test Folder',
     data: {
@@ -73,7 +76,7 @@ export const __CustomOffset: Story = {
     message: 'Message moved to Test Folder',
     data: {
       isError: false,
-      messageA11y: 'Message moved to Custom Folder with a11y',
+      messageA11y: 'Message moved to Test Folder with accessibility override',
       onActionPressed: () => console.log('Action pressed'),
       offset: 200,
     },

packages/components/src/components/Snackbar/Snackbar.tsx

@@ -129,6 +129,9 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
   const contentColor = theme.vadsColorForegroundInverse
 
   const containerProps: ViewProps = {
+    accessibilityViewIsModal: true, // iOS only
+    tabIndex: 0, // Android only
+    // Above props prevent screen reader from tap focusing elements behind the Snackbar
     style: {
       alignItems: 'center',
       backgroundColor: theme.vadsColorSurfaceInverse,