Fix/wizard minor fixes accessibility and export screens

demo/src/index.js

@@ -5,5 +5,76 @@ I18nManager.allowRTL(true);
 
 module.exports = {
   name: 'unicorn demo app',
+  // componentScreens
+  ActionSheetScreen: require('./screens/componentScreens/ActionSheetScreen'),
+  ActionBarScreen: require('./screens/componentScreens/ActionBarScreen'),
+  AvatarsScreen: require('./screens/componentScreens/AvatarsScreen'),
+  AnimatedImageScreen: require('./screens/componentScreens/AnimatedImageScreen'),
+  ButtonsScreen: require('./screens/componentScreens/ButtonsScreen'),
+  BadgesScreen: require('./screens/componentScreens/BadgesScreen'),
+  CardsScreen: require('./screens/componentScreens/CardsScreen'),
+  CarouselScreen: require('./screens/componentScreens/CarouselScreen'),
+  CheckboxScreen: require('./screens/componentScreens/CheckboxScreen'),
+  ConnectionStatusBarScreen: require('./screens/componentScreens/ConnectionStatusBarScreen'),
+  DialogScreen: require('./screens/componentScreens/DialogScreen'),
+  DrawerScreen: require('./screens/componentScreens/DrawerScreen'),
+  TagsInputScreen: require('./screens/componentScreens/TagsInputScreen'),
+  HintsScreen: require('./screens/componentScreens/HintsScreen'),
+  ImageScreen: require('./screens/componentScreens/ImageScreen'),
+  MaskedInputScreen: require('./screens/componentScreens/MaskedInputScreen'),
+  OverlaysScreen: require('./screens/componentScreens/OverlaysScreen'),
+  PageControlScreen: require('./screens/componentScreens/PageControlScreen'),
+  PanDismissibleScreen: require('./screens/componentScreens/PanDismissibleScreen'),
+  PanListenerScreen: require('./screens/componentScreens/PanListenerScreen'),
+  PanResponderScreen: require('./screens/componentScreens/PanResponderScreen'),
+  PickerScreen: require('./screens/componentScreens/PickerScreen'),
+  RadioButtonScreen: require('./screens/componentScreens/RadioButtonScreen'),
+  SharedTransitionScreen: require('./screens/componentScreens/SharedTransitionScreen'),
+  StepperScreen: require('./screens/componentScreens/StepperScreen'),
+  SwitchScreen: require('./screens/componentScreens/SwitchScreen'),
+  ToastsScreen: require('./screens/componentScreens/ToastsScreen'),
+  TabBarScreen: require('./screens/componentScreens/TabBarScreen'),
+  TextScreen: require('./screens/componentScreens/TextScreen'),
+  TextFieldScreen: require('./screens/componentScreens/TextFieldScreen'),
+  TourScreen: require('./screens/componentScreens/TourScreen'),
+  FeatureHighlightScreen: require('./screens/componentScreens/FeatureHighlightScreen'),
+  WheelPickerDialogScreen: require('./screens/componentScreens/WheelPickerDialogScreen'),
+  SliderScreen: require('./screens/componentScreens/SliderScreen'),
+  FloatingButtonScreen: require('./screens/componentScreens/FloatingButtonScreen'),
+  ColorPickerScreen: require('./screens/componentScreens/ColorPickerScreen'),
+  ColorSwatchScreen: require('./screens/componentScreens/ColorSwatchScreen'),
+  StackAggregatorScreen: require('./screens/componentScreens/StackAggregatorScreen'),
+  DateTimePickerScreen: require('./screens/componentScreens/DateTimePickerScreen'),
+  WizardScreen: require('./screens/componentScreens/WizardScreen'),
+  // nativeComponentScreens
+  HighlightOverlayViewScreen: require('./screens/nativeComponentScreens/HighlightOverlayViewScreen'),
+  SafeAreaSpacerViewScreen: require('./screens/nativeComponentScreens/SafeAreaSpacerViewScreen'),
+  WheelPickerViewScreen: require('./screens/nativeComponentScreens/WheelPickerViewScreen'),
+  // componentScreenScreens
+  EmptyStateScreen: require('./screens/componentScreenScreens/EmptyStateScreen'),
+  LoadingScreen: require('./screens/componentScreenScreens/LoadingScreen'),
+  ModalScreen: require('./screens/componentScreenScreens/ModalScreen'),
+  // listScreens
+  BasicListScreen: require('./screens/listScreens/BasicListScreen'),
+  ContactsListScreen: require('./screens/listScreens/ContactsListScreen'),
+  ConversationListScreen: require('./screens/listScreens/ConversationListScreen'),
+  // styleScreens
+  BorderRadiusesScreen: require('./screens/styleScreens/BorderRadiusesScreen'),
+  ColorsScreen: require('./screens/styleScreens/ColorsScreen'),
+  TypographyScreen: require('./screens/styleScreens/TypographyScreen'),
+  ShadowsScreen: require('./screens/styleScreens/ShadowsScreen'),
+  SpacingsScreen: require('./screens/styleScreens/SpacingsScreen'),
+  // animationScreens
+  CardScannerScreen: require('./screens/animationScreens/CardScannerScreen'),
+  CardAnimationsScreen: require('./screens/animationScreens/CardAnimationsScreen'),
+  ListAnimationsScreen: require('./screens/animationScreens/ListAnimationsScreen'),
+  ProgressBarScreen: require('./screens/animationScreens/ProgressBarScreen'),
+  // realExamples
+  AppleMusic: require('./screens/realExamples/AppleMusic'),
+  Pinterest: require('./screens/realExamples/Pinterest'),
+  ListActionsScreen: require('./screens/realExamples/ListActions/ListActionsScreen'),
+  // wrapperScreens
+  TouchableOpacityScreen: require('./screens/wrapperScreens/TouchableOpacityScreen'),
+  // General
   ExampleScreenPresenter: require('./screens/ExampleScreenPresenter')
 };

src/components/text/index.js

@@ -35,7 +35,11 @@ export default class Text extends PureBaseComponent {
     /**
      * Custom highlight style for highlight string
      */
-    highlightStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
+    highlightStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    /**
+     * Turn off accessibility for this view and its nested children
+     */
+    inaccessible: PropTypes.bool
   };
 
   // static defaultProps = {
@@ -76,9 +80,8 @@ export default class Text extends PureBaseComponent {
 
   renderText(children) {
     const {highlightString, highlightStyle} = this.props;
-    
+
     if (!_.isEmpty(highlightString)) {
-
       if (_.isArray(children)) {
         return _.map(children, child => {
           return this.renderText(child);
@@ -103,7 +106,7 @@ export default class Text extends PureBaseComponent {
   render() {
     const color = this.getThemeProps().color || this.extractColorValue();
     const typography = this.extractTypographyValue();
-    const {style, center, uppercase, children, ...others} = this.getThemeProps();
+    const {style, center, uppercase, children, inaccessible, ...others} = this.getThemeProps();
     const {margins} = this.state;
     const textStyle = [
       this.styles.container,
@@ -116,7 +119,14 @@ export default class Text extends PureBaseComponent {
     ];
 
     return (
-      <RNText {...others} style={textStyle} ref={this.setRef}>
+      <RNText
+        {...others}
+        style={textStyle}
+        ref={this.setRef}
+        accessible={!inaccessible}
+        accessibilityElementsHidden={inaccessible}
+        importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined}
+      >
         {this.renderText(children)}
       </RNText>
     );

src/components/wizard/WizardStates.js

@@ -13,8 +13,14 @@ export const States = {
 export const StatesConfig = {
   enabled: {color: Colors.dark30, circleColor: Colors.dark60, enabled: true},
   disabled: {color: Colors.dark50, circleColor: Colors.dark60},
-  error: {color: Colors.red30, icon: exclamationSmall, enabled: true},
-  skipped: {color: Colors.red30, enabled: true},
-  completed: {color: Colors.dark30, circleColor: Colors.dark60, icon: checkMarkSmall, enabled: true},
+  error: {color: Colors.red30, icon: exclamationSmall, enabled: true, accessibilityInfo: 'Validation Error'},
+  skipped: {color: Colors.red30, enabled: true, accessibilityInfo: 'Not completed'},
+  completed: {
+    color: Colors.dark30,
+    circleColor: Colors.dark60,
+    icon: checkMarkSmall,
+    enabled: true,
+    accessibilityInfo: 'Completed'
+  },
   active: {color: Colors.blue10, circleColor: Colors.blue10}
 };

src/components/wizard/WizardStep.js

@@ -48,6 +48,10 @@ export default class WizardStep extends PureBaseComponent {
      * Color of the circle
      */
     circleColor: PropTypes.string,
+    /**
+     * The step's circle size (diameter)
+     */
+    circleSize: PropTypes.number,
     /**
      * Icon to replace the (default) index
      */
@@ -59,7 +63,11 @@ export default class WizardStep extends PureBaseComponent {
     /**
      * Whether the step should be enabled
      */
-    enabled: PropTypes.bool
+    enabled: PropTypes.bool,
+    /**
+     * Extra text to be read in accessibility mode
+     */
+    accessibilityInfo: PropTypes.string
   };
 
   getProps() {
@@ -70,17 +78,36 @@ export default class WizardStep extends PureBaseComponent {
     return {...config, ...props, ...activeConfig};
   }
 
+  getAccessibilityLabel() {
+    const {index, label, state} = this.props;
+    const config = StatesConfig[state];
+    const extraInfo = config.accessibilityInfo || '';
+    return `Step ${index + 1}, ${label}, ${extraInfo}`;
+  }
+
   renderCircle(props) {
-    const {testID, index, activeIndex, onPress, indexLabelStyle, color, circleColor = color, icon, enabled} = props;
+    const {
+      testID,
+      index,
+      activeIndex,
+      onPress,
+      indexLabelStyle,
+      circleSize,
+      color,
+      circleColor = color,
+      icon,
+      enabled
+    } = props;
     const hitSlopSize = Spacings.s2;
 
     return (
       <TouchableOpacity
         testID={`${testID}.circle`}
-        style={[styles.circle, {borderColor: circleColor}]}
+        style={[styles.circle, circleSize && {width: circleSize, height: circleSize}, {borderColor: circleColor}]}
         onPress={enabled ? onPress : undefined}
         hitSlop={{top: hitSlopSize, bottom: hitSlopSize, left: hitSlopSize, right: hitSlopSize}}
         disabled={!enabled}
+        accessibilityLabel={this.getAccessibilityLabel()}
       >
         {index === activeIndex || _.isUndefined(icon) ? (
           <Text text80 testID={`${testID}.index`} style={[{color}, indexLabelStyle]}>
@@ -102,7 +129,13 @@ export default class WizardStep extends PureBaseComponent {
         {index > activeIndex && <View flex style={[styles.connector, connectorStyle]}/>}
         {this.renderCircle(props)}
         {index === activeIndex && (
-          <Text text80 testID={`${testID}.label`} numberOfLines={1} style={[styles.label, {maxWidth}, labelStyle]}>
+          <Text
+            text80
+            testID={`${testID}.label`}
+            numberOfLines={1}
+            style={[styles.label, {maxWidth}, labelStyle]}
+            inaccessible
+          >
             {label}
           </Text>
         )}
@@ -114,7 +147,7 @@ export default class WizardStep extends PureBaseComponent {
 
 const styles = StyleSheet.create({
   connector: {
-    borderWidth: 1,
+    borderWidth: 0.5,
     borderColor: Colors.dark60
   },
   circle: {