From d323db4d1b817f8960daede9b91abf12b89fa054 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 23 Nov 2022 16:02:45 -0600
Subject: [PATCH] toolbar/ActionButton: only disable using style

This removes use of the button disable property since it removes the
button from the accessibility tree and also makes tooltips not work.
The styling is kept the same by manually including the disable style.
---
 src/toolbar/ActionButton.tsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx
index 8c76ffa5..16ec77d4 100644
--- a/src/toolbar/ActionButton.tsx
+++ b/src/toolbar/ActionButton.tsx
@@ -1,9 +1,18 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2022 The Pybricks Authors
 
-import { Button, Intent, Spinner, SpinnerSize, useHotkeys } from '@blueprintjs/core';
+import {
+    Button,
+    Classes,
+    Intent,
+    Spinner,
+    SpinnerSize,
+    useHotkeys,
+} from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
-import React, { useEffect, useMemo, useState } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { tooltipDelay } from '../app/constants';
 import { useToolbarItemFocus } from '../components/toolbar/aria';
 
@@ -80,6 +89,12 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
 
     const { toolbarItemFocusProps, excludeFromTabOrder } = useToolbarItemFocus({ id });
 
+    const handleClick = useCallback(() => {
+        if (enabled !== false) {
+            onAction();
+        }
+    }, [enabled, onAction]);
+
     return (
         <Tooltip2
             content={tooltip}
@@ -94,12 +109,13 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
                     id={id}
                     aria-label={label}
                     elementRef={tooltipTargetRef as React.Ref<HTMLButtonElement>}
-                    {...tooltipTargetProps}
+                    {...mergeProps(tooltipTargetProps, {
+                        className: classNames(enabled === false && Classes.DISABLED),
+                    })}
                     // https://github.com/palantir/blueprint/pull/5300
                     aria-haspopup={undefined}
                     intent={Intent.PRIMARY}
-                    onClick={onAction}
-                    disabled={enabled === false}
+                    onClick={handleClick}
                     {...toolbarItemFocusProps}
                     tabIndex={excludeFromTabOrder ? -1 : 0}
                 >