Accessibility for action buttons.

ActionButton.js

@@ -6,6 +6,10 @@ import {
   View,
   Animated,
   TouchableOpacity,
+  findNodeHandle,
+  UIManager,
+  Platform,
+  AccessibilityInfo,
 } from "react-native";
 import ActionButtonItem from "./ActionButtonItem";
 import {
@@ -14,18 +18,52 @@ import {
   getTouchableComponent,
   isAndroid,
   touchableBackground,
-  DEFAULT_ACTIVE_OPACITY
+  DEFAULT_ACTIVE_OPACITY,
 } from "./shared";
 
+//////////////////////
+// HELPER FUNCTIONS
+//////////////////////
+
+const focusOnView = (ref) => {
+  if (!ref) {
+    console.warn('ref is null');
+    return;
+  }
+  const reactTag = findNodeHandle(ref);
+
+  Platform.OS === 'android' ? UIManager.sendAccessibilityEvent(
+      reactTag,
+      8
+  ) : AccessibilityInfo.setAccessibilityFocus(reactTag)
+};
+
+const filterActionButtons = (children) => {
+  const actionButtons = !Array.isArray(children) ? [children] : children;
+  return actionButtons.filter(actionButton => (typeof actionButton === 'object'));
+};
+
 export default class ActionButton extends Component {
   constructor(props) {
     super(props);
 
+    const {
+      children,
+    } = props;
+
     this.state = {
       resetToken: props.resetToken,
-      active: props.active
+      active: props.active,
     };
 
+    const actionButtons = filterActionButtons(children);
+
+    this.refIndexes = [];
+    actionButtons.forEach((button, idx) => {
+      this[`actionButton${idx}Ref`] = React.createRef();
+      this.refIndexes.push(idx);
+    });
+
     this.anim = new Animated.Value(props.active ? 1 : 0);
     this.timeout = null;
   }
@@ -34,37 +72,65 @@ export default class ActionButton extends Component {
     this.mounted = true;
   }
 
-  componentWillUnmount() {
-    this.mounted = false;
-    clearTimeout(this.timeout);
-  }
-
   componentWillReceiveProps(nextProps) {
-    if (nextProps.resetToken !== this.state.resetToken) {
-      if (nextProps.active === false && this.state.active === true) {
-        if (this.props.onReset) this.props.onReset();
+    const {
+      resetToken,
+      active,
+    } = this.state;
+
+    const {
+      onReset,
+    } = this.props;
+
+    if (nextProps.resetToken !== resetToken) {
+      if (nextProps.active === false && active === true) {
+        if (onReset) {
+          onReset();
+        }
         Animated.spring(this.anim, { toValue: 0 }).start();
-        setTimeout(
-          () =>
-            this.setState({ active: false, resetToken: nextProps.resetToken }),
-          250
-        );
+        setTimeout(() => {
+          this.setState({
+            active: false,
+            resetToken: nextProps.resetToken,
+          });
+        }, 250);
         return;
       }
 
-      if (nextProps.active === true && this.state.active === false) {
+      if (nextProps.active === true && active === false) {
         Animated.spring(this.anim, { toValue: 1 }).start();
         this.setState({ active: true, resetToken: nextProps.resetToken });
         return;
       }
 
       this.setState({
         resetToken: nextProps.resetToken,
-        active: nextProps.active
+        active: nextProps.active,
       });
     }
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      active,
+    } = this.state;
+
+    if (prevState.active !== active && active) {
+      setTimeout(() => {
+        this.focusOnTopActionButton();
+      }, 500);
+
+      setTimeout(() => {
+        this.announceActionButtons();
+      }, 3000);
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+    clearTimeout(this.timeout);
+  }
+
   //////////////////////
   // STYLESHEET GETTERS
   //////////////////////
@@ -93,6 +159,45 @@ export default class ActionButton extends Component {
     ];
   }
 
+  //////////////////////
+  // ACCESSIBILITY METHODS
+  //////////////////////
+
+  announceActionButtons() {
+    const {
+      children,
+      announceActionsLabel,
+    } = this.props;
+
+    const actionButtons = filterActionButtons(children);
+
+    const actionButtonsAccessibilityAnnouncement = actionButtons.reduce((acc, actionButton) => {
+      return `${acc} ${actionButton.props.accessibilityLabel}, `;
+    }, announceActionsLabel);
+
+    if (actionButtons.length && Platform.OS === 'ios') {
+      AccessibilityInfo.announceForAccessibility(actionButtonsAccessibilityAnnouncement);
+    }
+  }
+
+  focusOnTopActionButton() {
+    const {
+      active,
+    } = this.state;
+
+    const actionButtonRefs = this.refIndexes.reduce((acc, refIdx) => {
+      const buttonRef = this[`actionButton${refIdx}Ref`].current;
+      if (!!buttonRef) {
+        acc = [...acc, buttonRef];
+      }
+      return acc;
+    }, []);
+
+    if (active && actionButtonRefs.length) {
+      focusOnView(actionButtonRefs[0]);
+    }
+  }
+
   //////////////////////
   // RENDER METHODS
   //////////////////////
@@ -142,6 +247,7 @@ export default class ActionButton extends Component {
     );
   }
 
+
   _renderMainButton() {
     const animatedViewStyle = {
       transform: [
@@ -261,9 +367,7 @@ export default class ActionButton extends Component {
 
     if (!this.state.active) return null;
 
-    let actionButtons = !Array.isArray(children) ? [children] : children;
-
-    actionButtons = actionButtons.filter( actionButton => (typeof actionButton == 'object') )
+    const actionButtons = filterActionButtons(children);
 
     const actionStyle = {
       flex: 1,
@@ -284,6 +388,7 @@ export default class ActionButton extends Component {
             anim={this.anim}
             {...this.props}
             {...ActionButton.props}
+            buttonRef={this[`actionButton${idx}Ref`]}
             parentSize={this.props.size}
             btnColor={this.props.btnOutRange}
             onPress={() => {
@@ -386,6 +491,7 @@ ActionButton.propTypes = {
 
   testID: PropTypes.string,
   accessibilityLabel: PropTypes.string,
+  announceActionsLabel: PropTypes.string,
   accessible: PropTypes.bool
 };
 
@@ -417,6 +523,7 @@ ActionButton.defaultProps = {
   nativeFeedbackRippleColor: "rgba(255,255,255,0.75)",
   testID: undefined,
   accessibilityLabel: undefined,
+  announceActionsLabel: 'Available actions from top to bottom: ',
   accessible: undefined
 };
 
@@ -434,4 +541,4 @@ const styles = StyleSheet.create({
     fontSize: 24,
     backgroundColor: "transparent"
   }
-});
+});