[RNMobile] Accessibility updates for StepperCell and RangeCell

packages/components/src/mobile/bottom-sheet/range-cell.native.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	Platform,
-	AccessibilityInfo,
-	findNodeHandle,
-	View,
-} from 'react-native';
+import { Platform, AccessibilityInfo, View } from 'react-native';
 import Slider from '@react-native-community/slider';
 
 /**
@@ -31,7 +26,8 @@ class BottomSheetRangeCell extends Component {
 		super( props );
 		this.onChangeValue = this.onChangeValue.bind( this );
 		this.onChange = this.onChange.bind( this );
-		this.onCellPress = this.onCellPress.bind( this );
+		this.onIncrementValue = this.onIncrementValue.bind( this );
+		this.onDecrementValue = this.onDecrementValue.bind( this );
 
 		const { value, defaultValue, minimumValue } = props;
 		const initialValue = Number( value || defaultValue || minimumValue );
@@ -43,28 +39,17 @@ class BottomSheetRangeCell extends Component {
 		};
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.timeoutAnnounceValue );
+	}
+
 	onChangeValue( initialValue ) {
 		const { decimalNum, onChange } = this.props;
 		initialValue = toFixed( initialValue, decimalNum );
 		this.setState( { inputValue: initialValue } );
-		this.announceCurrentValue( `${ initialValue }` );
 		onChange( initialValue );
 	}
 
-	onCellPress() {
-		this.setState( { accessible: false } );
-		if ( this.sliderRef ) {
-			const reactTag = findNodeHandle( this.sliderRef );
-			AccessibilityInfo.setAccessibilityFocus( reactTag );
-		}
-	}
-
-	announceCurrentValue( value ) {
-		/* translators: %s: current cell value. */
-		const announcement = sprintf( __( 'Current value is %s' ), value );
-		AccessibilityInfo.announceForAccessibility( announcement );
-	}
-
 	onChange( nextValue ) {
 		const { onChange, onComplete } = this.props;
 		this.setState( {
@@ -76,6 +61,62 @@ class BottomSheetRangeCell extends Component {
 		}
 	}
 
+	/*
+	 * Only used with screenreaders like VoiceOver and TalkBack. Increments the
+	 * value of this setting programmatically.
+	 */
+	onIncrementValue() {
+		const { step = 10, maximumValue, decimalNum } = this.props;
+		const { sliderValue } = this.state;
+
+		const newValue = toFixed( sliderValue + step, decimalNum );
+
+		if ( newValue <= maximumValue || maximumValue === undefined ) {
+			this.onChangeValue( newValue );
+			this.setState( {
+				sliderValue: newValue,
+			} );
+			this.announceValue( newValue );
+		}
+	}
+
+	/*
+	 * Only used with screenreaders like VoiceOver and TalkBack. Decrements the
+	 * value of this setting programmatically.
+	 */
+	onDecrementValue() {
+		const { step = 10, minimumValue, decimalNum } = this.props;
+		const { sliderValue } = this.state;
+
+		const newValue = toFixed( sliderValue - step, decimalNum );
+
+		if ( newValue >= minimumValue ) {
+			this.onChangeValue( newValue );
+			this.setState( {
+				sliderValue: newValue,
+			} );
+			this.announceValue( newValue );
+		}
+	}
+
+	/*
+	 * Only used with screenreaders like VoiceOver and TalkBack.
+	 */
+	announceValue( value ) {
+		const { label, unitLabel = '' } = this.props;
+
+		if ( Platform.OS === 'ios' ) {
+			// On Android it triggers the accessibilityLabel with the value change, but
+			// on iOS we need to do this manually.
+			clearTimeout( this.timeoutAnnounceValue );
+			this.timeoutAnnounceValue = setTimeout( () => {
+				AccessibilityInfo.announceForAccessibility(
+					`${ value } ${ unitLabel },  ${ label }`
+				);
+			}, 300 );
+		}
+	}
+
 	render() {
 		const {
 			value,
@@ -94,87 +135,118 @@ class BottomSheetRangeCell extends Component {
 			cellContainerStyle,
 			onComplete,
 			shouldDisplayTextInput = true,
+			unitLabel = '',
+			openUnitPicker,
 			children,
 			decimalNum,
 			...cellProps
 		} = this.props;
 
-		const { accessible, inputValue, sliderValue } = this.state;
-
-		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. */
-			_x(
-				'%1$s. Current value is %2$s',
-				'Slider for picking a number inside a range'
-			),
-			cellProps.label,
-			value
-		);
+		const { inputValue, sliderValue } = this.state;
+
+		const accessibilityLabel = openUnitPicker
+			? sprintf(
+					/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. %3$s: value measurement unit (example: pixels) */
+					_x(
+						'%1$s. Current value is %2$s %3$s. Swipe up or down to adjust, double-tap to change unit',
+						'Slider for picking a number inside a range'
+					),
+					cellProps.label,
+					value,
+					unitLabel
+			  )
+			: sprintf(
+					/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. %3$s: value measurement unit (example: pixels) */
+					_x(
+						'%1$s. Current value is %2$s %3$s. Swipe up or down to adjust',
+						'Slider for picking a number inside a range'
+					),
+					cellProps.label,
+					value,
+					unitLabel
+			  );
 
 		const containerStyle = [
 			styles.container,
 			isIOS ? styles.containerIOS : styles.containerAndroid,
 		];
 
 		return (
-			<Cell
-				{ ...cellProps }
-				cellContainerStyle={ [
-					styles.cellContainerStyles,
-					cellContainerStyle,
+			<View
+				accessible={ true }
+				accessibilityRole="adjustable"
+				accessibilityActions={ [
+					{ name: 'increment' },
+					{ name: 'decrement' },
+					{ name: 'activate' },
 				] }
-				cellRowContainerStyle={ containerStyle }
-				accessibilityRole={ 'none' }
-				leftAlign
-				editable={ false }
-				activeOpacity={ 1 }
-				accessible={ accessible }
-				onPress={ this.onCellPress }
-				valueStyle={ styles.valueStyle }
+				onAccessibilityAction={ ( event ) => {
+					switch ( event.nativeEvent.actionName ) {
+						case 'increment':
+							this.onIncrementValue();
+							break;
+						case 'decrement':
+							this.onDecrementValue();
+							break;
+						case 'activate':
+							openUnitPicker();
+							break;
+					}
+				} }
 				accessibilityLabel={ accessibilityLabel }
-				accessibilityHint={
-					/* translators: accessibility text (hint for focusing a slider) */
-					__( 'Double tap to change the value using slider' )
-				}
 			>
-				<View style={ containerStyle }>
-					{ preview }
-					<Slider
-						value={ sliderValue }
-						defaultValue={ defaultValue }
-						disabled={ disabled }
-						step={ step }
-						minimumValue={ minimumValue }
-						maximumValue={ maximumValue }
-						minimumTrackTintColor={ minimumTrackTintColor }
-						maximumTrackTintColor={ maximumTrackTintColor }
-						thumbTintColor={ thumbTintColor }
-						onValueChange={ this.onChangeValue }
-						onSlidingComplete={ onComplete }
-						ref={ ( slider ) => {
-							this.sliderRef = slider;
-						} }
-						style={
-							isIOS ? styles.sliderIOS : styles.sliderAndroid
-						}
-						accessibilityRole={ 'adjustable' }
-					/>
-					{ shouldDisplayTextInput && (
-						<RangeTextInput
-							label={ cellProps.label }
-							onChange={ this.onChange }
-							defaultValue={ `${ inputValue }` }
-							value={ inputValue }
-							min={ minimumValue }
-							max={ maximumValue }
+				<Cell
+					{ ...cellProps }
+					cellContainerStyle={ [
+						styles.cellContainerStyles,
+						cellContainerStyle,
+					] }
+					cellRowContainerStyle={ containerStyle }
+					accessibilityRole={ 'adjustable' }
+					leftAlign
+					editable={ false }
+					activeOpacity={ 1 }
+					accessible={ false }
+					valueStyle={ styles.valueStyle }
+				>
+					<View style={ containerStyle }>
+						{ preview }
+						<Slider
+							value={ sliderValue }
+							defaultValue={ defaultValue }
+							disabled={ disabled }
 							step={ step }
-							decimalNum={ decimalNum }
-						>
-							{ children }
-						</RangeTextInput>
-					) }
-				</View>
-			</Cell>
+							minimumValue={ minimumValue }
+							maximumValue={ maximumValue }
+							minimumTrackTintColor={ minimumTrackTintColor }
+							maximumTrackTintColor={ maximumTrackTintColor }
+							thumbTintColor={ thumbTintColor }
+							onValueChange={ this.onChangeValue }
+							onSlidingComplete={ onComplete }
+							ref={ ( slider ) => {
+								this.sliderRef = slider;
+							} }
+							style={
+								isIOS ? styles.sliderIOS : styles.sliderAndroid
+							}
+						/>
+						{ shouldDisplayTextInput && (
+							<RangeTextInput
+								label={ cellProps.label }
+								onChange={ this.onChange }
+								defaultValue={ `${ inputValue }` }
+								value={ inputValue }
+								min={ minimumValue }
+								max={ maximumValue }
+								step={ step }
+								decimalNum={ decimalNum }
+							>
+								{ children }
+							</RangeTextInput>
+						) }
+					</View>
+				</Cell>
+			</View>
 		);
 	}
 }

packages/components/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -114,14 +114,14 @@ class BottomSheetStepperCell extends Component {
 	}
 
 	announceValue( value ) {
-		const { label } = this.props;
+		const { label, unitLabel = '' } = this.props;
 
 		if ( Platform.OS === 'ios' ) {
 			// On Android it triggers the accessibilityLabel with the value change
 			clearTimeout( this.timeoutAnnounceValue );
 			this.timeoutAnnounceValue = setTimeout( () => {
 				AccessibilityInfo.announceForAccessibility(
-					`${ value } ${ label }`
+					`${ value } ${ unitLabel } ${ label }`
 				);
 			}, 300 );
 		}
@@ -130,6 +130,7 @@ class BottomSheetStepperCell extends Component {
 	render() {
 		const {
 			label,
+			unitLabel = '',
 			icon,
 			min,
 			max,
@@ -139,6 +140,7 @@ class BottomSheetStepperCell extends Component {
 			shouldDisplayTextInput = false,
 			preview,
 			onChange,
+			openUnitPicker,
 			decimalNum,
 			cellContainerStyle,
 		} = this.props;
@@ -149,12 +151,26 @@ class BottomSheetStepperCell extends Component {
 			styles.cellLabel,
 			! icon ? styles.cellLabelNoIcon : {},
 		];
-		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. */
-			__( '%1$s. Current value is %2$s' ),
-			label,
-			value
-		);
+		const accessibilityLabel = openUnitPicker
+			? sprintf(
+					/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. %3$s: value measurement unit (example: pixels) */
+					__(
+						'%1$s. Current value is %2$s %3$s. Swipe up or down to adjust, double-tap to change unit'
+					),
+					label,
+					value,
+					unitLabel
+			  )
+			: sprintf(
+					/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. %3$s: value measurement unit (example: pixels) */
+					__(
+						'%1$s. Current value is %2$s %3$s. Swipe up or down to adjust'
+					),
+					label,
+					value,
+					unitLabel
+			  );
+
 		const containerStyle = [
 			styles.rowContainer,
 			isIOS ? styles.containerIOS : styles.containerAndroid,
@@ -168,6 +184,7 @@ class BottomSheetStepperCell extends Component {
 				accessibilityActions={ [
 					{ name: 'increment' },
 					{ name: 'decrement' },
+					{ name: 'activate' },
 				] }
 				onAccessibilityAction={ ( event ) => {
 					switch ( event.nativeEvent.actionName ) {
@@ -177,6 +194,11 @@ class BottomSheetStepperCell extends Component {
 						case 'decrement':
 							this.onDecrementValue();
 							break;
+						case 'activate':
+							if ( openUnitPicker ) {
+								openUnitPicker();
+							}
+							break;
 					}
 				} }
 			>