[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

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} />}

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,
       },
     },