make disabled buttons interactable (#1461)

.changeset/small-hotels-protect.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Changed disabled button behavior to make them focusable and use `aria-disabled` instead of `disabled` attribute.

packages/itwinui-css/src/button/base.scss

@@ -57,9 +57,7 @@
     background: var(--_iui-button-active-stripe-background);
   }
 
-  &[disabled],
-  &:disabled,
-  &[aria-disabled='true'] {
+  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
     --_iui-button-active-stripe-background: var(--iui-color-icon-disabled);
     --_iui-button-text-color: var(--iui-color-text-disabled);
     --_iui-button-icon-fill: var(--iui-color-icon-disabled);

packages/itwinui-css/src/button/borderless.scss

@@ -20,7 +20,7 @@
     outline-width: 1px;
   }
 
-  &:where([disabled], :disabled, [aria-disabled='true']) {
+  &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
     --_iui-button-text-color: var(--iui-color-text-disabled);
     --_iui-button-background-color: transparent;
     --_iui-button-border-color: transparent;

packages/itwinui-css/src/button/default.scss

@@ -22,9 +22,7 @@
     outline-width: 2px;
   }
 
-  &[disabled],
-  &:disabled,
-  &[aria-disabled='true'] {
+  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
     --_iui-button-text-color: var(--iui-color-text-disabled);
     --_iui-button-background-color: var(--iui-color-background-disabled);
     --_iui-button-border-color: var(--iui-color-border-disabled);
@@ -43,9 +41,7 @@
 }
 
 @mixin iui-button-active-disabled {
-  &[disabled],
-  &:disabled,
-  &[aria-disabled='true'] {
+  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
     --_iui-button-background-color: var(--iui-color-background-disabled);
   }
 }

packages/itwinui-css/src/button/split-button.scss

@@ -21,9 +21,7 @@
       z-index: 1;
     }
 
-    &[disabled],
-    &:disabled,
-    &[aria-disabled='true'] {
+    &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       border-inline-end-color: var(--iui-color-border-subtle);
       z-index: -1;
     }
@@ -42,9 +40,7 @@
       border-inline-start-color: $iui-button-split-divider-color;
     }
 
-    &[disabled],
-    &:disabled,
-    &[aria-disabled='true'] {
+    &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       border-inline-start-color: var(--iui-color-border-subtle);
       z-index: -1;
     }

packages/itwinui-css/src/button/variant.scss

@@ -31,9 +31,7 @@
     outline-width: 1px;
   }
 
-  &[disabled],
-  &:disabled,
-  &[aria-disabled='true'] {
+  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
     --_iui-button-background-color: var(--iui-color-background-disabled);
     --_iui-button-border-color: var(--iui-color-border-disabled);
     --_iui-button-text-color: var(--iui-color-text-disabled);

packages/itwinui-css/src/expandable-block/expandable-block.scss

@@ -94,9 +94,7 @@
     }
   }
 
-  &[disabled],
-  &:disabled,
-  &[aria-disabled='true'] {
+  &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
     --_iui-expandable-block-expander-icon-fill: var(--iui-color-icon-disabled);
     --_iui-expandable-block-header-caption-color: var(--iui-color-text-disabled);
     --_iui-expandable-block-header-label-color: var(--iui-color-text-disabled);

packages/itwinui-css/src/side-navigation/side-navigation.scss

@@ -112,7 +112,7 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
 
     &,
     &:hover,
-    &[disabled] {
+    &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       border-color: var(--iui-color-border);
     }
 
@@ -138,8 +138,7 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
       }
     }
 
-    &[disabled],
-    &:disabled {
+    &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       background-color: var(--iui-color-background-backdrop);
     }
 

packages/itwinui-css/src/tabs/base.scss

@@ -53,7 +53,7 @@ $borderless-horizontal-tab-min-height: calc(
       }
     }
 
-    &[disabled] {
+    &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       cursor: not-allowed;
       color: var(--iui-color-text-disabled);
 

packages/itwinui-css/src/tabs/borderless.scss

@@ -50,7 +50,7 @@
     }
   }
 
-  .iui-tab[disabled]:hover {
+  .iui-tab:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']):hover {
     background-color: transparent;
   }
 }

packages/itwinui-css/src/tabs/default.scss

@@ -23,7 +23,7 @@
       background-color: var(--iui-color-background);
     }
 
-    &[disabled] {
+    &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       background-color: var(--iui-color-background-disabled);
     }
 

packages/itwinui-css/src/tabs/pill.scss

@@ -40,7 +40,7 @@
       background-color: var(--iui-color-background-accent-muted);
     }
 
-    &[disabled]:hover {
+    &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']):hover {
       background-color: transparent;
     }
   }

packages/itwinui-css/src/utils/button-base.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+
+:where(.iui-button-base) {
+  font: inherit;
+  border: none;
+  background: transparent;
+  padding: 0;
+}

packages/itwinui-css/src/utils/utils.scss

@@ -1,5 +1,6 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
+@forward 'button-base';
 @forward 'icon';
 @forward 'notification-marker';
 @forward 'popover';

packages/itwinui-react/setupTests.ts

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import '@testing-library/jest-dom';
+import { TextEncoder } from 'util';
 
 window.HTMLElement.prototype.scrollIntoView = () => {};
 window.HTMLElement.prototype.scrollTo = () => {};
@@ -25,3 +26,5 @@ afterEach(() => {
     .querySelectorAll('[data-tippy-root]')
     .forEach((tippy) => tippy.remove());
 });
+
+global.TextEncoder = TextEncoder;

packages/itwinui-react/src/core/Buttons/Button/Button.tsx

@@ -5,7 +5,7 @@
 import cx from 'classnames';
 import * as React from 'react';
 
-import { Box } from '../../utils/index.js';
+import { Box, ButtonBase } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 export type ButtonProps = {
@@ -27,7 +27,7 @@ export type ButtonProps = {
    * Icon shown after the main button content.
    */
   endIcon?: JSX.Element;
-};
+} & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 
 /**
  * Generic button component
@@ -43,23 +43,18 @@ export const Button = React.forwardRef((props, ref) => {
     children,
     className,
     size,
-    style,
     styleType = 'default',
-    type = 'button',
     startIcon,
     endIcon,
     ...rest
   } = props;
 
   return (
-    <Box
-      as='button'
+    <ButtonBase
       ref={ref}
       className={cx('iui-button', className)}
       data-iui-variant={styleType !== 'default' ? styleType : undefined}
       data-iui-size={size}
-      style={style}
-      type={type}
       {...rest}
     >
       {startIcon && (
@@ -75,7 +70,7 @@ export const Button = React.forwardRef((props, ref) => {
           {endIcon}
         </Box>
       )}
-    </Box>
+    </ButtonBase>
   );
 }) as PolymorphicForwardRefComponent<'button', ButtonProps>;
 

packages/itwinui-react/src/core/Buttons/IconButton/IconButton.test.tsx

@@ -57,7 +57,7 @@ it('renders disabled small icon button correctly', () => {
   const button = container.querySelector('.iui-button') as HTMLButtonElement;
   expect(button).toBeTruthy();
   expect(button).toHaveAttribute('data-iui-size', 'small');
-  expect(button.disabled).toBe(true);
+  expect(button).toHaveAttribute('aria-disabled', 'true');
   button.click();
   expect(onClickMock).not.toHaveBeenCalled();
   const icon = container.querySelector('.iui-button-icon');

packages/itwinui-react/src/core/Buttons/IconButton/IconButton.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { VisuallyHidden, Popover, Box } from '../../utils/index.js';
+import { VisuallyHidden, Popover, Box, ButtonBase } from '../../utils/index.js';
 import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
@@ -33,30 +33,27 @@ export const IconButton = React.forwardRef((props, ref) => {
     children,
     styleType = 'default',
     size,
-    type = 'button',
     className,
     label,
     ...rest
   } = props;
 
   return (
     <IconButtonTooltip label={label}>
-      <Box
-        as='button'
+      <ButtonBase
         ref={ref}
         className={cx('iui-button', className)}
         data-iui-variant={styleType !== 'default' ? styleType : undefined}
         data-iui-size={size}
         data-iui-active={isActive}
         aria-pressed={isActive}
-        type={type}
         {...rest}
       >
         <Box as='span' className='iui-button-icon' aria-hidden>
           {children}
         </Box>
         {label ? <VisuallyHidden>{label}</VisuallyHidden> : null}
-      </Box>
+      </ButtonBase>
     </IconButtonTooltip>
   );
 }) as PolymorphicForwardRefComponent<'button', IconButtonProps>;

packages/itwinui-react/src/core/Carousel/CarouselDot.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { Box } from '../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
 
 type CarouselDotProps = {
   /** Is this dot currently active? */
@@ -24,9 +24,7 @@ export const CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
 
   return (
-    <Box
-      as='button'
-      type='button'
+    <ButtonBase
       role='tab'
       tabIndex={-1}
       className={cx(

packages/itwinui-react/src/core/ExpandableBlock/ExpandableBlock.tsx

@@ -12,6 +12,7 @@ import {
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
+  ButtonBase,
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 
@@ -130,9 +131,7 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
   );
 
   return (
-    <Box
-      as='button'
-      type='button'
+    <ButtonBase
       className={cx('iui-expandable-header', className)}
       aria-expanded={isExpanded}
       aria-disabled={disabled}
@@ -154,7 +153,7 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
           </ExpandableBlock.LabelArea>
         </>
       )}
-    </Box>
+    </ButtonBase>
   );
 }) as PolymorphicForwardRefComponent<'button', ExpandableBlockHeaderOwnProps>;
 ExpandableBlockHeader.displayName = 'ExpandableBlock.Header';

packages/itwinui-react/src/core/Header/HeaderBasicButton.tsx

@@ -4,39 +4,26 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { ButtonProps } from '../Buttons/Button/Button.js';
 
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  const {
-    onClick,
-    className,
-    children,
-    style,
-    startIcon,
-    endIcon,
-    styleType,
-    size,
-    ...rest
-  } = props;
+  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
+    props;
   styleType; // To omit and prevent eslint error.
   size; // To omit and prevent eslint error.
 
   return (
-    <Box
-      as='button'
+    <ButtonBase
       className={cx('iui-header-breadcrumb-button', className)}
-      onClick={onClick}
       ref={ref}
-      type='button'
-      style={style}
       {...rest}
     >
       {startIcon}
       {children}
       {endIcon}
-    </Box>
+    </ButtonBase>
   );
 }) as PolymorphicForwardRefComponent<'button', ButtonProps>;