From d0ba347b212c45d0280db67b1e6c3ca6b11e9d9b Mon Sep 17 00:00:00 2001 From: Tim R Date: Tue, 6 Aug 2024 12:32:55 -0500 Subject: [PATCH 1/4] Storybook doc, Android screen reader bugfix --- .../components/Snackbar/Snackbar.stories.tsx | 7 ++++++- .../src/components/Snackbar/Snackbar.tsx | 17 ++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/Snackbar/Snackbar.stories.tsx b/packages/components/src/components/Snackbar/Snackbar.stories.tsx index f80f24b3..eb462dcd 100644 --- a/packages/components/src/components/Snackbar/Snackbar.stories.tsx +++ b/packages/components/src/components/Snackbar/Snackbar.stories.tsx @@ -34,6 +34,11 @@ export default meta type Story = StoryObj +/** + * 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 } = props.data || {} const onPressSnackbar = () => { @@ -53,7 +58,7 @@ export const _Snackbar: 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'), }, }, diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx index e6585a09..a4699e78 100644 --- a/packages/components/src/components/Snackbar/Snackbar.tsx +++ b/packages/components/src/components/Snackbar/Snackbar.tsx @@ -70,11 +70,18 @@ export const SnackbarProvider: React.FC = () => { ((globalThis.snackbar as ToastContainer | null) = ref)} renderToast={(toast) => } swipeEnabled={false} + // style={{ + // accessible: true, + // pointerEvents: 'auto', + // importantForAccessibility: 'yes', + // 'aria-labelledby': 'gogo', + // role: 'alert', + // }} /> ) } @@ -167,6 +174,12 @@ export const Snackbar: FC = (toast) => { // } const containerProps: ViewProps = { + // accessible: true, + // pointerEvents: 'auto', + // importantForAccessibility: 'yes', + // 'aria-labelledby': 'gogo', + // role: 'alert', + tabIndex: 0, style: { alignItems: 'center', backgroundColor: theme.vadsColorSurfaceInverse, @@ -177,12 +190,14 @@ export const Snackbar: FC = (toast) => { gap: 5, minHeight: 44, padding: sizing._12, + // pointerEvents: 'auto', // Override library so Snackbar is touchable marginHorizontal: sizing._20, }, } const iconAndMessageContainer: ViewProps = { accessible: true, + // nativeID: 'gogo', role: 'alert', style: { flexDirection: 'row', From 1fba1601ae30dd5f44e099be0149f5f6722de214 Mon Sep 17 00:00:00 2001 From: Tim R Date: Tue, 6 Aug 2024 14:44:07 -0500 Subject: [PATCH 2/4] iOS screen reader fix --- .../src/components/Snackbar/Snackbar.tsx | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx index a4699e78..c32bd903 100644 --- a/packages/components/src/components/Snackbar/Snackbar.tsx +++ b/packages/components/src/components/Snackbar/Snackbar.tsx @@ -70,18 +70,11 @@ export const SnackbarProvider: React.FC = () => { ((globalThis.snackbar as ToastContainer | null) = ref)} renderToast={(toast) => } swipeEnabled={false} - // style={{ - // accessible: true, - // pointerEvents: 'auto', - // importantForAccessibility: 'yes', - // 'aria-labelledby': 'gogo', - // role: 'alert', - // }} /> ) } @@ -174,12 +167,9 @@ export const Snackbar: FC = (toast) => { // } const containerProps: ViewProps = { - // accessible: true, - // pointerEvents: 'auto', - // importantForAccessibility: 'yes', - // 'aria-labelledby': 'gogo', - // role: 'alert', - tabIndex: 0, + 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, @@ -190,14 +180,12 @@ export const Snackbar: FC = (toast) => { gap: 5, minHeight: 44, padding: sizing._12, - // pointerEvents: 'auto', // Override library so Snackbar is touchable marginHorizontal: sizing._20, }, } const iconAndMessageContainer: ViewProps = { accessible: true, - // nativeID: 'gogo', role: 'alert', style: { flexDirection: 'row', From 8853704a98083179c96f84835a10b935c004c768 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Tue, 6 Aug 2024 19:47:04 +0000 Subject: [PATCH 3/4] Version bump: components-v0.21.1-alpha.5 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index fb021837..a22d4480 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.21.1-alpha.0", + "version": "0.21.1-alpha.5", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From 2eaebd1d453a7cabd74395aa87fd47bd4bd3bda9 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Fri, 9 Aug 2024 12:46:47 -0700 Subject: [PATCH 4/4] Update useSnackbar comment to be more appropriate for external teams Co-authored-by: Tim R --- packages/components/src/hooks/useSnackbar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/hooks/useSnackbar.tsx b/packages/components/src/hooks/useSnackbar.tsx index 0ec6e71d..954d4e9f 100644 --- a/packages/components/src/hooks/useSnackbar.tsx +++ b/packages/components/src/hooks/useSnackbar.tsx @@ -9,8 +9,9 @@ import { import { SnackbarContext } from '../components/Snackbar/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()