From 021fea3bcf1d12d508cbb3ad52ae66a074097970 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 3 Oct 2019 14:13:46 +0200
Subject: [PATCH] Components: Try fixing the active state of toolbar SVG icons
 on native mobile

---
 packages/block-library/src/image/edit.js               |  4 ++--
 packages/components/src/button/index.js                |  4 +++-
 packages/components/src/button/index.native.js         | 10 +++++-----
 .../src/date-time/test/__snapshots__/time.js.snap      |  4 ----
 packages/components/src/date-time/time.js              |  2 --
 packages/components/src/toolbar-button/index.js        |  2 +-
 6 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index b5779e71180e7d..3c6381f5f2c751 100644
--- 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
index da3441e7f2982a..75383b36a5dfb7 100644
--- 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
index c4a48c84eb4ff3..baa32028248aa9 100644
--- 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
index d67e11da54846e..77c480312d4a87 100644
--- 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
index 0cfc8c7dc8ea68..7a0a3af107ea03 100644
--- 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
index 8c2374b0284d1d..7c3523fb8790f4 100644
--- 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 }
 			/>