Components: Try fixing the active state of toolbar SVG icons on nativ…

…e mobile
WordPress · Oct 3, 2019 · 4eb89cc · 4eb89cc
1 parent 0bef434
commit 4eb89cc
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 15 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -599,7 +599,7 @@ export class ImageEdit extends Component {
 							<IconButton
 								className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': this.state.isEditing } ) }
 								label={ __( 'Edit image' ) }
-								aria-pressed={ this.state.isEditing }
+								isToggled={ this.state.isEditing }
 								onClick={ this.toggleIsEditing }
 								icon={ editImageIcon }
 							/>
@@ -747,7 +747,7 @@ export class ImageEdit extends Component {
 												key={ scale }
 												isSmall
 												isPrimary={ isCurrent }
-												aria-pressed={ isCurrent }
+												isToggled={ isCurrent }
 												onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
 											>
 												{ scale }%

diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
@@ -40,7 +40,9 @@ export function Button( props, ref ) {
 	} );
 
 	const tag = href !== undefined && ! disabled ? 'a' : 'button';
-	const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
+	const tagProps = tag === 'a' ?
+		{ href, target } :
+		{ type: 'button', disabled, 'aria-pressed': isToggled };
 
 	return createElement( tag, {
 		...tagProps,

diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
@@ -68,9 +68,9 @@ export function Button( props ) {
 		hint,
 		fixedRatio = true,
 		getStylesFromColorScheme,
+		isToggled,
 		'aria-disabled': ariaDisabled,
 		'aria-label': ariaLabel,
-		'aria-pressed': ariaPressed,
 		'data-subscript': subscript,
 	} = props;
 
@@ -79,11 +79,11 @@ export function Button( props ) {
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
-		...( ariaPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isToggled ? styles.buttonActive : styles.buttonInactive ),
 	};
 
 	const states = [];
-	if ( ariaPressed ) {
+	if ( isToggled ) {
 		states.push( 'selected' );
 	}
 
@@ -94,7 +94,7 @@ export function Button( props ) {
 	const subscriptInactive = getStylesFromColorScheme( styles.subscriptInactive, styles.subscriptInactiveDark );
 
 	const newChildren = Children.map( compact( children ), ( child ) => {
-		return cloneElement( child, { colorScheme: props.preferredColorScheme, active: ariaPressed } );
+		return cloneElement( child, { colorScheme: props.preferredColorScheme, active: isToggled } );
 	} );
 
 	return (
@@ -112,7 +112,7 @@ export function Button( props ) {
 			<View style={ buttonViewStyle }>
 				<View style={ { flexDirection: 'row' } }>
 					{ newChildren }
-					{ subscript && ( <Text style={ ariaPressed ? styles.subscriptActive : subscriptInactive }>{ subscript }</Text> ) }
+					{ subscript && ( <Text style={ isToggled ? styles.subscriptActive : subscriptInactive }>{ subscript }</Text> ) }
 				</View>
 			</View>
 		</TouchableOpacity>

diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap
@@ -321,7 +321,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
         className="components-datetime__time-field components-datetime__time-field-am-pm"
       >
         <ForwardRef(Button)
-          aria-pressed={false}
           className="components-datetime__time-am-button"
           isDefault={true}
           isToggled={false}
@@ -330,7 +329,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
           AM
         </ForwardRef(Button)>
         <ForwardRef(Button)
-          aria-pressed={true}
           className="components-datetime__time-pm-button"
           isDefault={true}
           isToggled={true}
@@ -504,7 +502,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
         className="components-datetime__time-field components-datetime__time-field-am-pm"
       >
         <ForwardRef(Button)
-          aria-pressed={false}
           className="components-datetime__time-am-button"
           isDefault={true}
           isToggled={false}
@@ -513,7 +510,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
           AM
         </ForwardRef(Button)>
         <ForwardRef(Button)
-          aria-pressed={true}
           className="components-datetime__time-pm-button"
           isDefault={true}
           isToggled={true}

diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
@@ -301,7 +301,6 @@ class TimePicker extends Component {
 						{ is12Hour && (
 							<div className="components-datetime__time-field components-datetime__time-field-am-pm">
 								<Button
-									aria-pressed={ am === 'AM' }
 									isDefault
 									className="components-datetime__time-am-button"
 									isToggled={ am === 'AM' }
@@ -310,7 +309,6 @@ class TimePicker extends Component {
 									{ __( 'AM' ) }
 								</Button>
 								<Button
-									aria-pressed={ am === 'PM' }
 									isDefault
 									className="components-datetime__time-pm-button"
 									isToggled={ am === 'PM' }

diff --git a/packages/components/src/toolbar-button/index.js b/packages/components/src/toolbar-button/index.js
@@ -38,7 +38,7 @@ function ToolbarButton( {
 					className,
 					{ 'is-active': isActive }
 				) }
-				aria-pressed={ isActive }
+				isToggled={ isActive }
 				disabled={ isDisabled }
 				{ ...extraProps }
 			/>