@automattic/vip-design-system 2.10.4 → 2.11.1

package/build/system/Button/Button.d.ts

@@ -13,6 +13,7 @@ export declare enum ButtonVariant {
 }
 export interface ButtonProps extends ThemeButtonProps {
     disabled?: boolean;
+    preferAriaDisabled?: boolean;
     onClick?: (event: ButtonClickType) => void;
     full?: boolean;
     grow?: boolean;

package/build/system/Button/Button.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "disabled", "onClick", "sx", "full", "grow"];
+var _excluded = ["className", "disabled", "preferAriaDisabled", "onClick", "sx", "full", "grow"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
@@ -19,13 +19,19 @@ export var ButtonVariant = /*#__PURE__*/function (ButtonVariant) {
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
+    preferAriaDisabled = _ref.preferAriaDisabled,
     onClick = _ref.onClick,
     sx = _ref.sx,
     full = _ref.full,
     grow = _ref.grow,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var disabledAttributes = disabled && preferAriaDisabled === true ? {
+    'aria-disabled': true
+  } : {
+    disabled: disabled
+  };
   var handleOnClick = useCallback(function (event) {
-    if (disabled) {
+    if (preferAriaDisabled && disabled) {
       return event.preventDefault();
     }
     if (onClick) {
@@ -38,7 +44,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       '&:focus-visible': function focusVisible(theme) {
         return theme.outline;
       },
-      '&[aria-disabled="true"]': {
+      '&[disabled], &[aria-disabled="true"]': {
         opacity: 0.7,
         backgroundColor: 'input.border.disabled',
         color: 'texts.secondary',
@@ -51,8 +57,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       flexGrow: Boolean(grow) === true ? '1' : undefined,
       width: Boolean(full) === true ? '100%' : undefined
     }, sx)
-  }, rest, {
-    "aria-disabled": disabled,
+  }, rest, disabledAttributes, {
     onClick: handleOnClick,
     className: classNames('vip-button-component', className),
     ref: ref

package/build/system/Button/Button.stories.d.ts

@@ -32,3 +32,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: (args: any) => React.JSX.Element;
+export declare const PreferAriaDisabled: (args: any) => React.JSX.Element;

package/build/system/Button/Button.stories.js

@@ -138,4 +138,14 @@ var Template = function Template(args) {
     })]
   });
 };
-export var Default = Template.bind({});
+var PreferAriaDisabledTemplate = function PreferAriaDisabledTemplate(args) {
+  return _jsx("div", {
+    children: _jsx(Button, _extends({}, args, {
+      disabled: true,
+      preferAriaDisabled: true,
+      children: "Primary"
+    }))
+  });
+};
+export var Default = Template.bind({});
+export var PreferAriaDisabled = PreferAriaDisabledTemplate.bind({});

package/build/system/Button/Button.test.js

@@ -55,8 +55,8 @@ describe('<Button />', function () {
           })), container = _render2.container;
           component = screen.getByText(BUTTON_TEXT);
           expect(component).toBeInTheDocument();
-          expect(component).toHaveAttribute('aria-disabled', 'true');
-          expect(component).not.toHaveAttribute('disabled');
+          expect(component).toHaveAttribute('disabled', '');
+          expect(component).not.toHaveAttribute('aria-disabled');
           fireEvent.click(component);
           expect(onClick).toHaveBeenCalledTimes(0);
 
@@ -73,4 +73,36 @@ describe('<Button />', function () {
       }
     }, _callee2);
   })));
+  it('renders the Button with aria-disabled prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var onClick, _render3, container, component;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          onClick = jest.fn(function () {});
+          _render3 = render(_jsx(Button, {
+            disabled: true,
+            preferAriaDisabled: true,
+            onClick: onClick,
+            children: BUTTON_TEXT
+          })), container = _render3.container;
+          component = screen.getByText(BUTTON_TEXT);
+          expect(component).toBeInTheDocument();
+          expect(component).toHaveAttribute('aria-disabled', 'true');
+          expect(component).not.toHaveAttribute('disabled');
+          fireEvent.click(component);
+          expect(onClick).toHaveBeenCalledTimes(0);
+
+          // Check for accessibility issues
+          _context3.t0 = expect;
+          _context3.next = 11;
+          return axe(container);
+        case 11:
+          _context3.t1 = _context3.sent;
+          (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+        case 13:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
 });

package/build/system/Button/ButtonSubmit.js

@@ -46,6 +46,7 @@ export var ButtonSubmit = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     ref: ref,
     className: classNames('vip-button-submit-component', "vip-button-submit-" + variant),
     disabled: disabled || loading,
+    preferAriaDisabled: true,
     variant: variant,
     "aria-busy": loading
   }, rest, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.10.4",
+  "version": "2.11.1",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Button/Button.stories.tsx

@@ -119,4 +119,13 @@ const Template = args => (
 	</div>
 );
 
+const PreferAriaDisabledTemplate = args => (
+	<div>
+		<Button { ...args } disabled preferAriaDisabled>
+			Primary
+		</Button>
+	</div>
+);
+
 export const Default = Template.bind( {} );
+export const PreferAriaDisabled = PreferAriaDisabledTemplate.bind( {} );

package/src/system/Button/Button.test.tsx

@@ -33,6 +33,28 @@ describe( '<Button />', () => {
 				{ BUTTON_TEXT }
 			</Button>
 		);
+
+		const component = screen.getByText( BUTTON_TEXT );
+
+		expect( component ).toBeInTheDocument();
+		expect( component ).toHaveAttribute( 'disabled', '' );
+		expect( component ).not.toHaveAttribute( 'aria-disabled' );
+
+		fireEvent.click( component );
+		expect( onClick ).toHaveBeenCalledTimes( 0 );
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Button with aria-disabled prop', async () => {
+		const onClick = jest.fn( () => {} );
+		const { container } = render(
+			<Button disabled preferAriaDisabled onClick={ onClick }>
+				{ BUTTON_TEXT }
+			</Button>
+		);
+
 		const component = screen.getByText( BUTTON_TEXT );
 
 		expect( component ).toBeInTheDocument();

package/src/system/Button/Button.tsx

@@ -21,6 +21,7 @@ export enum ButtonVariant {
 
 export interface ButtonProps extends ThemeButtonProps {
 	disabled?: boolean;
+	preferAriaDisabled?: boolean;
 	onClick?: ( event: ButtonClickType ) => void;
 	full?: boolean;
 	grow?: boolean;
@@ -28,10 +29,13 @@ export interface ButtonProps extends ThemeButtonProps {
 }
 
 const Button = forwardRef< HTMLButtonElement, ButtonProps >(
-	( { className, disabled, onClick, sx, full, grow, ...rest }, ref ) => {
+	( { className, disabled, preferAriaDisabled, onClick, sx, full, grow, ...rest }, ref ) => {
+		const disabledAttributes =
+			disabled && preferAriaDisabled === true ? { 'aria-disabled': true } : { disabled };
+
 		const handleOnClick = useCallback(
 			( event: ButtonClickType ) => {
-				if ( disabled ) {
+				if ( preferAriaDisabled && disabled ) {
 					return event.preventDefault();
 				}
 
@@ -47,7 +51,7 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 				sx={ {
 					'&:focus': 'none',
 					'&:focus-visible': ( theme: ButtonTheme ) => theme.outline,
-					'&[aria-disabled="true"]': {
+					'&[disabled], &[aria-disabled="true"]': {
 						opacity: 0.7,
 						backgroundColor: 'input.border.disabled',
 						color: 'texts.secondary',
@@ -62,7 +66,7 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 					...sx,
 				} }
 				{ ...rest }
-				aria-disabled={ disabled }
+				{ ...disabledAttributes }
 				onClick={ handleOnClick }
 				className={ classNames( 'vip-button-component', className ) }
 				ref={ ref }

package/src/system/Button/ButtonSubmit.tsx

@@ -49,6 +49,7 @@ export const ButtonSubmit = React.forwardRef< HTMLButtonElement, ButtonSubmitPro
 				ref={ ref }
 				className={ classNames( 'vip-button-submit-component', `vip-button-submit-${ variant }` ) }
 				disabled={ disabled || loading }
+				preferAriaDisabled={ true }
 				variant={ variant }
 				aria-busy={ loading }
 				{ ...rest }