From 7487f37bc121943ce3bb5bf8474278815395eb1a Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 10 Jul 2023 15:31:26 +0200
Subject: [PATCH] [cm6] use tooltips on disabled toolbar buttons (#13678)

* [cm6] use tooltips on disabled toolbar buttons

* not-allowed cursor

* prettier

* fix css selector

GitOrigin-RevId: f9c61fdabb1141daa2bde76aa4e3cd4da60e029e
---
 .../source-editor/components/toolbar/toolbar-button.tsx    | 4 ++--
 .../source-editor/extensions/toolbar/toolbar-panel.ts      | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-button.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-button.tsx
index 62f575895a..d352d68648 100644
--- a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-button.tsx
+++ b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-button.tsx
@@ -53,10 +53,10 @@ export const ToolbarButton = memo<{
       className={classnames('ol-cm-toolbar-button', className, { hidden })}
       aria-label={label}
       onMouseDown={handleMouseDown}
-      onClick={handleClick}
+      onClick={!disabled ? handleClick : undefined}
       bsStyle={null}
       active={active}
-      disabled={disabled}
+      aria-disabled={disabled}
       type="button"
     >
       {textIcon ? icon : <Icon type={icon} fw accessibilityLabel={label} />}
diff --git a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
index 3e8fd9a957..1fbc0cce88 100644
--- a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
@@ -125,15 +125,16 @@ export const toolbarPanel = () => [
         backgroundColor: 'rgba(125, 125, 125, 0.1)',
         color: 'inherit',
         boxShadow: 'none',
-        '&[disabled]': {
+        '&[aria-disabled="true"]': {
           opacity: '0.2',
         },
       },
       '&.active, &:active': {
         backgroundColor: 'rgba(125, 125, 125, 0.2)',
       },
-      '&[disabled]': {
+      '&[aria-disabled="true"]': {
         opacity: '0.2',
+        cursor: 'not-allowed',
       },
       '.overflow-hidden &': {
         display: 'none',
@@ -152,7 +153,7 @@ export const toolbarPanel = () => [
       '&.active, &:active': {
         backgroundColor: 'rgba(125, 125, 125, 0.4)',
       },
-      '&[disabled]': {
+      '&[aria-disabled="true"]': {
         opacity: 0.2,
       },
     },