feat(fscomponents): add completed state accessibility label in Step

brandingbrand · Apr 22, 2019 · 2434842 · 2434842
1 parent 74836b6
commit 2434842
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/packages/fscomponents/src/components/Step.tsx b/packages/fscomponents/src/components/Step.tsx
@@ -11,6 +11,9 @@ import {
   View,
   ViewStyle
 } from 'react-native';
+import FSI18n, { translationKeys } from '@brandingbrand/fsi18n';
+
+const componentTranslationKeys = translationKeys.flagship.step;
 
 const styles = StyleSheet.create({
   completedIcon: {
@@ -49,10 +52,16 @@ export interface StepProps {
 export class Step extends Component<StepProps> {
   render(): JSX.Element {
     if (this.props.completed) {
+      const stepCompletedLabel =
+        FSI18n.string(componentTranslationKeys.announcements.stepCompleted);
+      const accessibilityLabel = `${this.props.title}, ${stepCompletedLabel}`;
+
       return (
         <TouchableOpacity
           onPress={this.props.onPress}
           style={[styles.container, this.props.style]}
+          accessibilityRole='button'
+          accessibilityLabel={accessibilityLabel}
         >
           {this.renderTitle()}
           {this.renderDoneIcon()}

diff --git a/packages/fsi18n/src/translations/en.ts b/packages/fsi18n/src/translations/en.ts
@@ -228,6 +228,11 @@ export const keys: FSTranslationKeys = {
       summary: {
         total: 'Total'
       }
+    },
+    step: {
+      announcements: {
+        stepCompleted: 'Step Completed.'
+      }
     }
   }
 };
diff --git a/packages/fsi18n/src/types.ts b/packages/fsi18n/src/types.ts
@@ -35,6 +35,7 @@ export interface FSTranslationKeys<KeyType = TranslationKey> extends Translation
     storeLocator: StoreLocatorTranslations<KeyType>;
     productIndex: ProductIndexTranslations<KeyType>;
     checkout: CheckoutTranslations<KeyType>;
+    step: StepTranslations<KeyType>;
   };
 }
 
@@ -272,3 +273,9 @@ export interface CheckoutTranslations<KeyType> {
     total: KeyType;
   };
 }
+
+export interface StepTranslations<KeyType> {
+  announcements: {
+    stepCompleted: KeyType;
+  };
+}