Add accessibility features to pagination (#185)

gusgard · Apr 23, 2024 · 40243d3 · 40243d3
1 parent 0339975
commit 40243d3
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 5 deletions.
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -35,6 +35,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   onPaginationSelectedIndex,
   paginationTapDisabled = false,
   e2eID = '',
+  paginationAccessibilityLabels = [],
 }) => {
   return (
     <View style={[styles.container, paginationStyle]}>
@@ -55,6 +56,8 @@ export const Pagination: React.FC<PaginationProps> = ({
             onPaginationSelectedIndex?.();
           }}
           disabled={paginationTapDisabled}
+          accessibilityLabel={paginationAccessibilityLabels[index]}
+          accessible={!!paginationAccessibilityLabels[index]}
         />
       ))}
     </View>

diff --git a/src/components/Pagination/PaginationProps.tsx b/src/components/Pagination/PaginationProps.tsx
@@ -68,4 +68,9 @@ export type PaginationProps = {
    *
    */
   e2eID?: string;
+  /**
+   * Accessibility labels for the pagination items.
+   * This is optional and used for screen readers.
+   */
+  paginationAccessibilityLabels?: string[];
 };
diff --git a/src/components/Pagination/__snapshots__/test.tsx.snap b/src/components/Pagination/__snapshots__/test.tsx.snap
@@ -18,6 +18,7 @@ exports[`pagination renders all props 1`] = `
   }
 >
   <View
+    accessibilityLabel="1"
     accessible={true}
     focusable={true}
     isTVSelectable={true}
@@ -41,6 +42,7 @@ exports[`pagination renders all props 1`] = `
     testID="_pagination_0"
   />
   <View
+    accessibilityLabel="2"
     accessible={true}
     focusable={true}
     isTVSelectable={true}
@@ -64,6 +66,7 @@ exports[`pagination renders all props 1`] = `
     testID="_pagination_1"
   />
   <View
+    accessibilityLabel="3"
     accessible={true}
     focusable={true}
     isTVSelectable={true}
@@ -87,6 +90,7 @@ exports[`pagination renders all props 1`] = `
     testID="_pagination_2"
   />
   <View
+    accessibilityLabel="4"
     accessible={true}
     focusable={true}
     isTVSelectable={true}
@@ -110,6 +114,7 @@ exports[`pagination renders all props 1`] = `
     testID="_pagination_3"
   />
   <View
+    accessibilityLabel="5"
     accessible={true}
     focusable={true}
     isTVSelectable={true}
@@ -153,7 +158,7 @@ exports[`pagination renders correctly 1`] = `
   }
 >
   <View
-    accessible={true}
+    accessible={false}
     focusable={true}
     isTVSelectable={true}
     onClick={[Function]}
@@ -176,7 +181,7 @@ exports[`pagination renders correctly 1`] = `
     testID="_pagination_0"
   />
   <View
-    accessible={true}
+    accessible={false}
     focusable={true}
     isTVSelectable={true}
     onClick={[Function]}
@@ -199,7 +204,7 @@ exports[`pagination renders correctly 1`] = `
     testID="_pagination_1"
   />
   <View
-    accessible={true}
+    accessible={false}
     focusable={true}
     isTVSelectable={true}
     onClick={[Function]}
@@ -222,7 +227,7 @@ exports[`pagination renders correctly 1`] = `
     testID="_pagination_2"
   />
   <View
-    accessible={true}
+    accessible={false}
     focusable={true}
     isTVSelectable={true}
     onClick={[Function]}
@@ -245,7 +250,7 @@ exports[`pagination renders correctly 1`] = `
     testID="_pagination_3"
   />
   <View
-    accessible={true}
+    accessible={false}
     focusable={true}
     isTVSelectable={true}
     onClick={[Function]}

diff --git a/src/components/Pagination/test.tsx b/src/components/Pagination/test.tsx
@@ -16,6 +16,7 @@ describe('pagination', () => {
         paginationActiveColor="black"
         paginationDefaultColor="white"
         size={5}
+        paginationAccessibilityLabels={['1', '2', '3', '4', '5']}
       />,
     );
     expect(toJSON()).toMatchSnapshot();

diff --git a/src/components/SwiperFlatList/SwiperFlatList.tsx b/src/components/SwiperFlatList/SwiperFlatList.tsx
@@ -54,6 +54,7 @@ export const SwiperFlatList = React.forwardRef(
       viewabilityConfig = {},
       disableGesture = false,
       e2eID,
+      paginationAccessibilityLabels,
       ...props
     }: SwiperFlatListProps<T1>,
     ref: React.Ref<SwiperFlatListRefProps>,
@@ -288,6 +289,7 @@ export const SwiperFlatList = React.forwardRef(
             onPaginationSelectedIndex={onPaginationSelectedIndex}
             paginationTapDisabled={paginationTapDisabled}
             e2eID={e2eID}
+            paginationAccessibilityLabels={paginationAccessibilityLabels}
           />
         ) : null}
       </React.Fragment>

diff --git a/src/components/SwiperFlatList/SwiperFlatListProps.tsx b/src/components/SwiperFlatList/SwiperFlatListProps.tsx
@@ -152,6 +152,11 @@ export type SwiperFlatListProps<T> = Partial<FlatListProps<T>> & {
    * Defaults to 'false'
    */
   useReactNativeGestureHandler?: boolean;
+  /**
+   * Accessibility labels for the pagination items.
+   * This is optional and used for screen readers.
+   */
+  paginationAccessibilityLabels?: string[];
 } & Pick<
     PaginationProps,
     | 'paginationActiveColor'
@@ -162,5 +167,6 @@ export type SwiperFlatListProps<T> = Partial<FlatListProps<T>> & {
     | 'paginationStyleItemInactive'
     | 'onPaginationSelectedIndex'
     | 'paginationTapDisabled'
+    | 'paginationAccessibilityLabels'
   >;
 //#endregion Pagination