a11y improvements

WordPress · Nov 7, 2019 · b66c94d · b66c94d
1 parent cf85c25
commit b66c94d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js
@@ -7,8 +7,8 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import {
-	RangeControl,
 	PanelBody,
+	BottomSheet,
 } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
@@ -36,27 +36,22 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor
 		setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight );
 	}, [] );
 
-	const changeAttribute = ( value ) => {
-		setAttributes( {
-			height: value,
-		} );
-	};
-
 	const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, styles.staticDarkSpacer );
 
 	return (
 		<View style={ [ defaultStyle, isSelected && styles.selectedSpacer, { height } ] }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Spacer Settings' ) } >
-					<RangeControl
+					<BottomSheet.RangeCell
+						icon={ 'admin-settings' }
 						label={ __( 'Height in pixels' ) }
 						minimumValue={ minSpacerHeight }
 						maximumValue={ sliderSpacerMaxHeight }
 						separatorType={ 'none' }
 						value={ height }
-						onChange={ changeAttribute }
+						attribute="height"
+						setAttributes={ setAttributes }
 						style={ styles.rangeCellContainer }
-						allowReset
 					/>
 				</PanelBody>
 			</InspectorControls>

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider, View } from 'react-native';
+import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider, View, PixelRatio, AppState } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -26,10 +26,12 @@ class BottomSheetRangeCell extends Component {
 		this.handleReset = this.handleReset.bind( this );
 		this.onChangeValue = this.onChangeValue.bind( this );
 		this.onCellPress = this.onCellPress.bind( this );
+		this.handleChangePixelRatio = this.handleChangePixelRatio.bind( this );
 
 		const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue );
+		const fontScale = this.getFontScale();
 
-		this.state = { accessible: true, sliderValue: initialValue, initialValue, hasFocus: false };
+		this.state = { accessible: true, sliderValue: initialValue, initialValue, hasFocus: false, fontScale };
 	}
 
 	componentDidUpdate( ) {
@@ -39,8 +41,23 @@ class BottomSheetRangeCell extends Component {
 		}
 	}
 
+	componentDidMount() {
+		AppState.addEventListener( 'change', this.handleChangePixelRatio );
+	}
+
 	componentWillUnmount() {
 		this.handleToggleFocus();
+		AppState.removeEventListener( 'change', this.handleChangePixelRatio );
+	}
+
+	getFontScale() {
+		return PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale();
+	}
+
+	handleChangePixelRatio( nextAppState ) {
+		if ( nextAppState === 'active' ) {
+			this.setState( { fontScale: this.getFontScale() } );
+		}
 	}
 
 	handleChange( text ) {
@@ -126,7 +143,7 @@ class BottomSheetRangeCell extends Component {
 			...cellProps
 		} = this.props;
 
-		const { hasFocus, sliderValue, accessible } = this.state;
+		const { hasFocus, sliderValue, accessible, fontScale } = this.state;
 
 		const accessibilityLabel =
 		sprintf(
@@ -177,6 +194,7 @@ class BottomSheetRangeCell extends Component {
 							defaultSliderStyle,
 							borderStyles.borderStyle,
 							hasFocus && borderStyles.isSelected,
+							{ width: 40 * fontScale },
 						] }
 						onChangeText={ this.handleChange }
 						onFocus={ this.handleToggleFocus }

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss
@@ -3,8 +3,7 @@
 }
 
 .sliderTextInput {
-	width: 40px;
-	height: 25px;
+	min-height: 25px;
 	align-self: center;
 	margin-left: 10px;
 	border-color: $light-gray-400;

diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -110,6 +110,7 @@
 .cellRowContainer {
 	flex-direction: row;
 	align-items: center;
+	flex-shrink: 1;
 }
 
 .cellIcon {