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

…e mobile
WordPress · Nov 28, 2019 · aa49770 · aa49770
1 parent 2bec0e6
commit aa49770
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 17 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -613,7 +613,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 }
 							/>
@@ -762,7 +762,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
@@ -67,9 +67,9 @@ export function Button( props ) {
 		hint,
 		fixedRatio = true,
 		getStylesFromColorScheme,
+		isToggled,
 		'aria-disabled': ariaDisabled,
 		'aria-label': ariaLabel,
-		'aria-pressed': ariaPressed,
 		'data-subscript': subscript,
 	} = props;
 
@@ -78,11 +78,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' );
 	}
 
@@ -93,7 +93,7 @@ export function Button( props ) {
 	const subscriptInactive = getStylesFromColorScheme( styles.subscriptInactive, styles.subscriptInactiveDark );
 
 	const newChildren = Children.map( children, ( child ) => {
-		return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, __unstableActive: ariaPressed } ) : child;
+		return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, __unstableActive: isToggled } ) : child;
 	} );
 
 	return (
@@ -111,7 +111,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
@@ -50,7 +50,7 @@ function ToolbarButton( {
 				className,
 				{ 'is-active': isActive }
 			) }
-			aria-pressed={ isActive }
+			isToggled={ isActive }
 			disabled={ isDisabled }
 			{ ...extraProps }
 		/>

diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
@@ -356,6 +356,7 @@ exports[`Storyshots Components|Button Small 1`] = `
 
 exports[`Storyshots Components|Button Toggled 1`] = `
 <button
+  aria-pressed={true}
   className="components-button is-toggled"
   type="button"
 >
@@ -3731,7 +3732,7 @@ exports[`Storyshots Components|ToolbarGroup Default 1`] = `
     <button
       aria-label="Bold"
       aria-pressed={true}
-      className="components-button components-icon-button components-toolbar__control is-active"
+      className="components-button components-icon-button components-toolbar__control is-active is-toggled"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -3825,7 +3826,7 @@ exports[`Storyshots Components|ToolbarGroup With Controls Prop 1`] = `
     <button
       aria-label="Bold"
       aria-pressed={true}
-      className="components-button components-icon-button components-toolbar__control is-active"
+      className="components-button components-icon-button components-toolbar__control is-active is-toggled"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}