Merge branch 'feature/415-narin-snackbar-hook-offset' of github.com:d…

…epartment-of-veterans-affairs/va-mobile-library into feature/415-narin-snackbar-hook-offset
department-of-veterans-affairs · Aug 9, 2024 · 3e867e7 · 3e867e7
2 parents b55dbe3 + bd5f8bf
commit 3e867e7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/packages/components/src/components/Snackbar/Snackbar.stories.tsx b/packages/components/src/components/Snackbar/Snackbar.stories.tsx
@@ -35,8 +35,11 @@ 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()
@@ -49,15 +52,11 @@ const mobileComponentRenderer = (props: SnackbarProps) => {
     })
   }
 
-  return (
-    <>
-      <Button label="Press for Snackbar" onPress={onPressSnackbar} />
-    </>
-  )
+  return <Button label="Press for Snackbar" onPress={onPressSnackbar} />
 }
 
 export const _Snackbar: 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: {

diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/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,

diff --git a/packages/components/src/components/Snackbar/useSnackbar.tsx b/packages/components/src/components/Snackbar/useSnackbar.tsx
@@ -6,8 +6,9 @@ import { SNACKBAR_DEFAULT_OFFSET, modifyToastOptions } from './Snackbar'
 import { SnackbarContext } from './SnackbarProvider'
 
 /**
- * Passthrough of useToast hook which has been modified to allow for optional
- * offset setting
+ * Hook to manipulate the Snackbar with `show`, `hide`, or `isOpen` to query if already present
+ *
+ * Must be wrapped in `SnackbarProvider` to function
  */
 export function useSnackbar() {
   const toast = Toast.useToast()