Improve disabled support

Author: TylerJDev

packages/react/src/ActionBar/ActionBar.test.tsx

@@ -32,4 +32,18 @@ describe('ActionBar', () => {
     const results = await axe.run(container)
     expect(results).toHaveNoViolations()
   })
+
+  it('should not trigger disabled button', () => {
+    const onClick = jest.fn()
+    const {getByRole} = HTMLRender(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick} disabled></ActionBar.IconButton>
+      </ActionBar>,
+    )
+
+    const button = getByRole('button')
+    button.click()
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
 })

packages/react/src/ActionBar/ActionBar.tsx

@@ -252,17 +252,39 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
   )
 }
 
-export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps, forwardedRef) => {
-  const backupRef = useRef<HTMLElement>(null)
-  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
-  const {size, setChildrenWidth} = React.useContext(ActionBarContext)
-  useIsomorphicLayoutEffect(() => {
-    const text = props['aria-label'] ? props['aria-label'] : ''
-    const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
-    setChildrenWidth({text, width: domRect.width})
-  }, [ref, setChildrenWidth])
-  return <IconButton aria-disabled={props.disabled} ref={ref} size={size} {...props} variant="invisible" />
-})
+export const ActionBarIconButton = forwardRef(
+  ({disabled, onClick, ...props}: ActionBarIconButtonProps, forwardedRef) => {
+    const backupRef = useRef<HTMLElement>(null)
+    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
+    const {size, setChildrenWidth} = React.useContext(ActionBarContext)
+    useIsomorphicLayoutEffect(() => {
+      const text = props['aria-label'] ? props['aria-label'] : ''
+      const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
+      setChildrenWidth({text, width: domRect.width})
+    }, [ref, setChildrenWidth])
+
+    const clickHandler = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (disabled) {
+          return
+        }
+        onClick?.(event)
+      },
+      [disabled, onClick],
+    )
+
+    return (
+      <IconButton
+        aria-disabled={disabled}
+        ref={ref}
+        size={size}
+        onClick={clickHandler}
+        {...props}
+        variant="invisible"
+      />
+    )
+  },
+)
 
 export const VerticalDivider = () => {
   const ref = useRef<HTMLDivElement>(null)