diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index feb8f7113919dd..24497a544a05dc 100644 --- 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 { @@ -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 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 e57cad3ec34d80..94f6e81f7b5122 100644 --- 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 ) { { newChildren } - { subscript && ( { subscript } ) } + { subscript && ( { subscript } ) } 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" >