Merge pull request #496 from cds-snc/issue/490/accessibility-in-carousel

Fix accessibility in carousel

src/screens/tutorial/Tutorial.tsx

@@ -19,9 +19,16 @@ export const TutorialScreen = () => {
  const isStart = currentStep === 0;
  const isEnd = currentStep === tutorialData.length - 1;
 
- const renderItem = useCallback<CarouselProps<TutorialKey>['renderItem']>(({item}) => {
- return <TutorialContent key={item} item={item} />;
- }, []);
+ const renderItem = useCallback<CarouselProps<TutorialKey>['renderItem']>(
+ ({item, index}) => {
+ return (
+ <View style={styles.flex} accessibilityElementsHidden={index !== currentStep}>
+ <TutorialContent key={item} item={item} isActive={index === currentStep} />
+ </View>
+ );
+ },
+ [currentStep],
+ );
 
  const nextItem = useCallback(() => {
  if (isEnd) {
@@ -53,6 +60,8 @@ export const TutorialScreen = () => {
  sliderWidth={viewportWidth}
  itemWidth={viewportWidth}
  onSnapToItem={newIndex => setCurrentStep(newIndex)}
+ importantForAccessibility="no"
+ accessible={false}
  />
  </View>
  <Box flexDirection="row" borderTopWidth={2} borderTopColor="gray5">

src/screens/tutorial/TutorialContent.tsx

@@ -6,12 +6,13 @@ import {Step1} from './views/Step1';
 import {Step2} from './views/Step2';
 import {Step3} from './views/Step3';
 import {Step4} from './views/Step4';
+import {ItemViewProps} from './views/ItemView';
 
 export type TutorialKey = 'step-1' | 'step-2' | 'step-3' | 'step-4';
 
 export const tutorialData: TutorialKey[] = ['step-1', 'step-2', 'step-3', 'step-4'];
 
-const viewComponents: {[key in TutorialKey]: React.ComponentType} = {
+const viewComponents: {[key in TutorialKey]: React.ComponentType<Pick<ItemViewProps, 'isActive'>>} = {
  'step-1': Step1,
  'step-2': Step2,
  'step-3': Step3,
@@ -20,14 +21,15 @@ const viewComponents: {[key in TutorialKey]: React.ComponentType} = {
 
 export interface TutorialContentProps {
  item: TutorialKey;
+ isActive: boolean;
 }
 
-export const TutorialContent = ({item}: TutorialContentProps) => {
+export const TutorialContent = ({item, isActive}: TutorialContentProps) => {
  const Item = viewComponents[item];
  return (
  <ScrollView style={styles.flex} showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
  <Box paddingHorizontal="l">
- <Item />
+ <Item isActive={isActive} />
  </Box>
  </ScrollView>
  );

src/screens/tutorial/views/ItemView.tsx

@@ -1,21 +1,32 @@
-import React from 'react';
-import {StyleSheet, Image, ImageSourcePropType} from 'react-native';
+import React, {useRef, useLayoutEffect} from 'react';
+import {StyleSheet, Image, ImageSourcePropType, AccessibilityInfo, findNodeHandle} from 'react-native';
 import {Text} from 'components';
 import {useI18n} from '@shopify/react-i18n';
 
 import {TutorialKey} from '../TutorialContent';
 
-interface ItemViewProps {
+export interface ItemViewProps {
  item: TutorialKey;
  image: ImageSourcePropType;
+ isActive: boolean;
 }
 
-export const ItemView = ({item, image}: ItemViewProps) => {
+export const ItemView = ({item, image, isActive}: ItemViewProps) => {
  const [i18n] = useI18n();
  const bodyText = i18n.translate(`Tutorial.${item}`).split(/\n\n/g);
+ const imageRef = useRef<any>();
+
+ useLayoutEffect(() => {
+ const tag = findNodeHandle(imageRef.current);
+ if (isActive && tag) {
+ AccessibilityInfo.setAccessibilityFocus(tag);
+ }
+ }, [isActive, item]);
+
  return (
  <>
  <Image
+ ref={imageRef}
  style={styles.image}
  source={image}
  accessible

src/screens/tutorial/views/Step1.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {ItemView} from './ItemView';
+import {ItemView, ItemViewProps} from './ItemView';
 
-export const Step1 = () => {
- return <ItemView item="step-1" image={require('assets/how-it-works-intro.png')} />;
+export const Step1 = (props: Pick<ItemViewProps, 'isActive'>) => {
+ return <ItemView {...props} item="step-1" image={require('assets/how-it-works-intro.png')} />;
 };

src/screens/tutorial/views/Step2.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {ItemView} from './ItemView';
+import {ItemView, ItemViewProps} from './ItemView';
 
-export const Step2 = () => {
- return <ItemView item="step-2" image={require('assets/how-it-works-exposure.png')} />;
+export const Step2 = (props: Pick<ItemViewProps, 'isActive'>) => {
+ return <ItemView {...props} item="step-2" image={require('assets/how-it-works-exposure.png')} />;
 };

src/screens/tutorial/views/Step3.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {ItemView} from './ItemView';
+import {ItemView, ItemViewProps} from './ItemView';
 
-export const Step3 = () => {
- return <ItemView item="step-3" image={require('assets/how-it-works-positive.png')} />;
+export const Step3 = (props: Pick<ItemViewProps, 'isActive'>) => {
+ return <ItemView {...props} item="step-3" image={require('assets/how-it-works-positive.png')} />;
 };

src/screens/tutorial/views/Step4.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {ItemView} from './ItemView';
+import {ItemView, ItemViewProps} from './ItemView';
 
-export const Step4 = () => {
- return <ItemView item="step-4" image={require('assets/how-it-works-looking.png')} />;
+export const Step4 = (props: Pick<ItemViewProps, 'isActive'>) => {
+ return <ItemView {...props} item="step-4" image={require('assets/how-it-works-looking.png')} />;
 };