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