Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Announce Snackbar appearance to screen reader #437

Merged
merged 6 commits into from
Aug 12, 2024
Merged

[Feature] Announce Snackbar appearance to screen reader #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d3b524f
Add handling to announce the Snackbar to the screen reader on appearance
TimRoe Aug 9, 2024
068107e
Add dependency to announcing Snackbar useEffect
TimRoe Aug 12, 2024
13d6e74
Merge branch 'feature/415-narin-snackbar-hook-offset' into feature/41…
TimRoe Aug 12, 2024
153cb0f
Simplifying announceForAccessibility useEffect, improving SnackbarPro…
TimRoe Aug 12, 2024
9785d39
Version bump: components-v0.21.1-alpha.10
va-mobile-automation-robot Aug 12, 2024
8cf0f0c
Merge branch 'main' into feature/416-AnnounceSnackbarForScreenReader
TimRoe Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@department-of-veterans-affairs/mobile-component-library",
"version": "0.21.1-alpha.9",
"version": "0.21.1-alpha.10",
"description": "VA Design System Mobile Component Library",
"main": "src/index.tsx",
"scripts": {
Expand Down
22 changes: 17 additions & 5 deletions packages/components/src/components/Snackbar/Snackbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
AccessibilityInfo,
Pressable,
PressableStateCallbackType,
Text,
Expand All @@ -11,7 +12,7 @@ import {
} from 'react-native'
import { ToastProps } from 'react-native-toast-notifications/lib/typescript/toast'
import { useTranslation } from 'react-i18next'
import React, { FC } from 'react'
import React, { FC, useEffect } from 'react'

import { Icon, IconProps } from '../Icon/Icon'
import { Spacer } from '../Spacer/Spacer'
Expand Down Expand Up @@ -74,7 +75,10 @@ const SnackbarButton: FC<SnackbarButtonProps> = ({ text, onPress }) => {
)
}

export type SnackbarProps = Omit<ToastProps, 'data'> & snackbarData
export type SnackbarProps = Omit<ToastProps, 'data' | 'message'> &
snackbarData & {
message: string
}

/**
* To use SnackbarProvider, import SnackbarProvider in App.tsx (or similar foundational file) and
Expand Down Expand Up @@ -106,10 +110,18 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
const fontScale = useWindowDimensions().fontScale
const theme = useTheme()
const { t } = useTranslation()
// const a11yAnnounce =
// AccessibilityInfo.announceForAccessibility('Test announce two')

// useEffect(() => a11yAnnounce, [a11yAnnounce])
/**
* useEffect to handle announcing the Snackbar appearing to the screen reader
*/
useEffect(() => {
// Delay to prevent iOS from instantly refocusing the action prompting the Snackbar if synchronous
setTimeout(
() => AccessibilityInfo.announceForAccessibility(messageA11y || toast.message),
50,
)
// Empty dependency array so useEffect only runs on initial render
}, [])

const helperText: TextStyle = {
fontFamily: 'SourceSansPro-Regular',
Expand Down
Loading