Merge pull request #42 from gunnartorfis/important

feat: important accessibility settings for Android
gunnartorfis · Sep 8, 2024 · 62fc328 · 62fc328
2 parents 4d8b9a2 + a663f65
commit 62fc328
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/docs/docs/sonner.md b/docs/docs/sonner.md
@@ -24,7 +24,7 @@
 | loading            | ✅            | ✅         |
 | Headless           | ❌            | ✅         |
 | Dynamic position   | ❌            | ✅         |
-| important          | ❌            | ✅         |
+| important          | ✅            | ✅         |
 | warning variant    | ✅            | ✅         |
 
 ## Toaster:

diff --git a/src/gestures.tsx b/src/gestures.tsx
@@ -12,10 +12,11 @@ import Animated, {
 } from 'react-native-reanimated';
 import { easeInOutCircFn } from './easings';
 import { useToastContext } from './context';
+import type { ToastProps } from './types';
 
 const { width: WINDOW_WIDTH } = Dimensions.get('window');
 
-type ToastSwipeHandlerProps = {
+type ToastSwipeHandlerProps = Pick<ToastProps, 'important'> & {
   onRemove: () => void;
   style?: ViewStyle | (ViewStyle | undefined)[];
   className?: string;
@@ -36,6 +37,7 @@ export const ToastSwipeHandler: React.FC<
   onFinalize,
   enabled,
   unstyled,
+  important,
 }) => {
   const translate = useSharedValue(0);
   const { swipToDismissDirection: direction } = useToastContext();
@@ -117,6 +119,7 @@ export const ToastSwipeHandler: React.FC<
         ]}
         className={className}
         layout={LinearTransition.easing(easeInOutCircFn)}
+        aria-live={important ? 'assertive' : 'polite'} // https://reactnative.dev/docs/accessibility#aria-live-android
       >
         {children}
       </Animated.View>

diff --git a/src/toast.tsx b/src/toast.tsx
@@ -44,6 +44,7 @@ export const Toast: React.FC<ToastProps> = ({
   styles,
   promiseOptions,
   unstyled: unstyledProps,
+  important,
 }) => {
   const {
     duration: durationCtx,
@@ -198,6 +199,7 @@ export const Toast: React.FC<ToastProps> = ({
       style={[stylesCtx.toastContainer, styles?.toastContainer]}
       className={cn(classNamesCtx.toastContainer, classNames?.toastContainer)}
       unstyled={unstyled}
+      important={important}
     >
       <Animated.View
         className={cn(className, classNamesCtx.toast, classNames?.toast)}

diff --git a/src/types.ts b/src/types.ts
@@ -54,7 +54,7 @@ export type ToastProps = StyleProps & {
   description?: string;
   closeButton?: boolean;
   invert?: boolean;
-  // important?: boolean; (false) Control the sensitivity of the toast for screen readers
+  important?: boolean;
   duration?: number;
   position?: ToastPosition;
   dismissible?: boolean;