fix(icon-button): ensure aria-pressed is set according to isSelected (#18829)

Author: janhassel

packages/react/src/components/Button/ButtonBase.tsx

@@ -51,8 +51,7 @@ const ButtonBase = React.forwardRef(function ButtonBase<
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]:
-      hasIconOnly && !className?.includes(`${prefix}--btn--icon-only`),
+    [`${prefix}--btn--icon-only`]: hasIconOnly,
     [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost',
   });
 

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -572,7 +572,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-labelledby="tooltip-:r2t:"
-                class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
+                class="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"
                 title="Settings"
                 type="button"
               >
@@ -1005,7 +1005,7 @@ exports[`DataTable renders as expected - Component API should render and match s
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-labelledby="tooltip-:rm:"
-                class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
+                class="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"
                 title="Settings"
                 type="button"
               >

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap

@@ -15,7 +15,7 @@ exports[`TableToolbarMenu renders as expected - Component API should render 1`]
           aria-expanded="false"
           aria-haspopup="true"
           aria-labelledby="tooltip-:r1:"
-          class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
+          class="custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost cds--btn--icon-only"
           title="Add"
           type="button"
         >

packages/react/src/components/IconButton/IconButton.stories.js

@@ -37,16 +37,9 @@ export default {
 };
 
 const DefaultStory = (props) => {
-  const { align, defaultOpen, disabled, kind, label, size } = props;
   return (
     <div style={{ margin: '3rem' }}>
-      <IconButton
-        align={align}
-        defaultOpen={defaultOpen}
-        disabled={disabled}
-        kind={kind}
-        label={label}
-        size={size}>
+      <IconButton {...props}>
         <Edit />
       </IconButton>
     </div>

packages/react/src/components/IconButton/__tests__/IconButton-test.js

@@ -78,4 +78,31 @@ describe('IconButton', () => {
     );
     expect(ref).toHaveBeenCalledWith(screen.getByTestId('icon-button'));
   });
+
+  it('should set aria-pressed="true" if props.isSelected="true" and props.kind="ghost" ', () => {
+    const { rerender } = render(
+      <IconButton label="edit" kind="ghost" isSelected={true}>
+        <Edit />
+      </IconButton>
+    );
+    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('should set aria-pressed="false" if props.isSelected="false" and props.kind="ghost" ', () => {
+    const { rerender } = render(
+      <IconButton label="edit" kind="ghost" isSelected={false}>
+        <Edit />
+      </IconButton>
+    );
+    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('should not set aria-pressed if props.isSelected is provided but props.kind is not "ghost" ', () => {
+    const { rerender } = render(
+      <IconButton label="edit" kind="primary" isSelected={true}>
+        <Edit />
+      </IconButton>
+    );
+    expect(screen.getByRole('button')).not.toHaveAttribute('aria-pressed');
+  });
 });

packages/react/src/components/IconButton/index.tsx

@@ -230,13 +230,9 @@ const IconButton = React.forwardRef(function IconButton(
         kind={kind}
         ref={ref}
         size={size}
-        className={classNames(
-          `${prefix}--btn--icon-only`,
-          {
-            [`${prefix}--btn--selected`]: isSelected,
-          },
-          className
-        )}
+        isSelected={isSelected}
+        hasIconOnly
+        className={className}
         aria-describedby={badgeCount && badgeId}>
         {children}
         {!disabled && badgeCount !== undefined && (