Components: Add isFocusable state to Button

packages/components/src/button/README.md

@@ -132,6 +132,7 @@ Name | Type | Default | Description
 `isPrimary` | `bool` | `false` | Renders a primary button style.
 `isTertiary` | `bool` | `false` | Renders a text-based button style.
 `isDestructive` | `bool` | `false` | Renders a red text-based button style to indicate destructive behavior.
+`isFocusable` | `bool` | `false` | Whether the button can be focusable even when `disabled`.
 `isLarge` | `bool` | `false` | Increases the size of the button.
 `isSmall` | `bool` | `false` | Decreases the size of the button.
 `isPressed` | `bool` | `false` | Renders a pressed button style.

packages/components/src/button/index.js

@@ -16,6 +16,11 @@ import { forwardRef } from '@wordpress/element';
 import Tooltip from '../tooltip';
 import Icon from '../icon';
 
+const disabledEventsOnDisabledButton = [
+	'onMouseDown',
+	'onClick',
+];
+
 export function Button( props, ref ) {
 	const {
 		href,
@@ -30,6 +35,7 @@ export function Button( props, ref ) {
 		isSecondary,
 		isLink,
 		isDestructive,
+		isFocusable,
 		className,
 		disabled,
 		icon,
@@ -62,13 +68,28 @@ export function Button( props, ref ) {
 		'has-icon': !! icon,
 	} );
 
-	const Tag = href !== undefined && ! disabled ? 'a' : 'button';
+	const trulyDisabled = disabled && ! isFocusable;
+	const Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';
 	const tagProps = Tag === 'a' ?
 		{ href, target } :
-		{ type: 'button', disabled, 'aria-pressed': isPressed };
+		{ type: 'button', disabled: trulyDisabled, 'aria-pressed': isPressed };
+
+	if ( disabled && isFocusable ) {
+		// In this case, the button will be disabled, but still focusable and
+		// perceivable by screen reader users.
+		tagProps[ 'aria-disabled' ] = true;
+
+		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
+			additionalProps[ disabledEvent ] = ( event ) => {
+				event.stopPropagation();
+				// event.stopImmediatePropagation();
+				event.preventDefault();
+			};
+		}
+	}
 
 	// Should show the tooltip if...
-	const shouldShowTooltip = ! disabled && (
+	const shouldShowTooltip = ! trulyDisabled && (
 		// an explicit tooltip is passed or...
 		( showTooltip && label ) ||
 		// there's a shortcut or...

packages/components/src/button/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { text, number } from '@storybook/addon-knobs';
+import { text, boolean, number } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
@@ -11,92 +11,90 @@ import Button from '../';
 
 export default { title: 'Components|Button', component: Button };
 
+function getOptions( defaultLabel = 'Button' ) {
+	const label = text( 'Label', defaultLabel );
+	const disabled = boolean( 'Disabled', false );
+	const isFocusable = disabled && boolean( 'isFocusable', false );
+	return { label, disabled, isFocusable };
+}
+
 export const _default = () => {
-	const label = text( 'Label', 'Default Button' );
+	const { label, ...props } = getOptions( 'Default Button' );
 
-	return (
-		<Button>{ label }</Button>
-	);
+	return <Button { ...props }>{ label }</Button>;
 };
 
 export const primary = () => {
-	const label = text( 'Label', 'Primary Button' );
+	const { label, ...props } = getOptions( 'Primary Button' );
 
 	return (
-		<Button isPrimary>{ label }</Button>
+		<Button isPrimary { ...props }>
+			{ label }
+		</Button>
 	);
 };
 
 export const secondary = () => {
-	const label = text( 'Label', 'Secondary Button' );
+	const { label, ...props } = getOptions( 'Secondary Button' );
 
 	return (
-		<Button isSecondary>{ label }</Button>
+		<Button isSecondary { ...props }>
+			{ label }
+		</Button>
 	);
 };
 
 export const tertiary = () => {
-	const label = text( 'Label', 'Tertiary Button' );
+	const { label, ...props } = getOptions( 'Tertiary Button' );
 
 	return (
-		<Button isTertiary>{ label }</Button>
+		<Button isTertiary { ...props }>
+			{ label }
+		</Button>
 	);
 };
 
 export const small = () => {
-	const label = text( 'Label', 'Small Button' );
+	const { label, ...props } = getOptions( 'Small Button' );
 
 	return (
-		<Button isSmall>{ label }</Button>
+		<Button isSmall { ...props }>
+			{ label }
+		</Button>
 	);
 };
 
 export const pressed = () => {
-	const label = text( 'Label', 'Pressed Button' );
+	const { label, ...props } = getOptions( 'Pressed Button' );
 
 	return (
-		<Button isPressed>{ label }</Button>
-	);
-};
-
-export const disabled = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return (
-		<Button disabled>{ label }</Button>
-	);
-};
-
-export const link = () => {
-	const label = text( 'Label', 'Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank">
+		<Button isPressed { ...props }>
 			{ label }
 		</Button>
 	);
 };
 
-export const disabledLink = () => {
-	const label = text( 'Label', 'Disabled Link Button' );
+export const link = () => {
+	const { label, ...props } = getOptions( 'Link Button' );
 
 	return (
-		<Button href="https://wordpress.org/" target="_blank" disabled>
+		<Button href="https://wordpress.org/" target="_blank" { ...props }>
 			{ label }
 		</Button>
 	);
 };
 
 export const icon = () => {
 	const usedIcon = text( 'Icon', 'ellipsis' );
-	const label = text( 'Label', 'More' );
 	const size = number( 'Size' );
+	const { label, ...props } = getOptions( 'More' );
 
 	return (
 		<Button
 			icon={ usedIcon }
 			label={ label }
 			iconSize={ size }
+			{ ...props }
 		/>
 	);
 };

packages/components/src/button/style.scss

@@ -46,7 +46,7 @@
 
 		}
 
-		&:active:enabled {
+		&:not([aria-disabled="true"]):active:enabled {
 			background: #f3f5f6;
 			color: color(theme(button) shade(5%));
 			border-color: #7e8993;
@@ -87,7 +87,7 @@
 				0 0 0 3px color(theme(button));
 		}
 
-		&:active:enabled {
+		&:not([aria-disabled="true"]):active:enabled {
 			background: color(theme(button) shade(20%));
 			border-color: color(theme(button) shade(20%));
 			color: $white;
@@ -149,7 +149,7 @@
 		height: auto;
 
 		&:not(:disabled):not([aria-disabled="true"]):hover,
-		&:active {
+		&:not([aria-disabled="true"]):active {
 			color: #00a0d2;
 		}
 
@@ -166,7 +166,7 @@
 		color: $alert-red;
 	}
 
-	&:active {
+	&:not([aria-disabled="true"]):active {
 		color: inherit;
 	}
 
@@ -212,7 +212,7 @@
 			outline: none;
 		}
 
-		&:active:focus:enabled {
+		&:not([aria-disabled="true"]):active:focus {
 			box-shadow: none;
 		}
 

packages/components/src/button/test/index.js

@@ -58,6 +58,12 @@ describe( 'Button', () => {
 			expect( button.prop( 'disabled' ) ).toBe( true );
 		} );
 
+		it( 'should add only aria-disabled attribute when isFocusable prop is passed in', () => {
+			const button = shallow( <Button disabled isFocusable /> );
+			expect( button.prop( 'disabled' ) ).toBe( false );
+			expect( button.prop( 'aria-disabled' ) ).toBe( true );
+		} );
+
 		it( 'should not poss the prop target into the element', () => {
 			const button = shallow( <Button target="_blank" /> );
 			expect( button.prop( 'target' ) ).toBeUndefined();