✨ [#462] Add wrapper for disabled-clickable button

src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DisabledClickableButtonWrapper = ({disabled, onDisabledClick, children}) => {
+  if (!disabled) return <>{children}</>;
+
+  return (
+    <div onClick={onDisabledClick} className="openforms-disabled-clickable-button">
+      <div className="openforms-disabled-clickable-button__clickable-wrap">{children}</div>
+    </div>
+  );
+};
+
+DisabledClickableButtonWrapper.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onDisabledClick: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default DisabledClickableButtonWrapper;

src/components/SummaryConfirmation/index.js

@@ -12,6 +12,8 @@ import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 import useFormContext from 'hooks/useFormContext';
 
+import DisabledClickableButtonWrapper from './DisabledClickableButtonWrapper';
+
 const isSubmitEnabled = (statementsInfo = [], statementsValues) => {
   return statementsInfo.every(info => {
     if (!info.validate.required) return true;
@@ -46,15 +48,20 @@ const SummaryConfirmation = ({submissionAllowed, onPrevPage}) => {
         </ToolbarList>
         <ToolbarList>
           {canSubmit ? (
-            <UtrechtButton
-              type="submit"
-              appearance="primary-action-button"
-              name="confirm"
+            <DisabledClickableButtonWrapper
               disabled={submitDisabled}
               onDisabledClick={() => setShowStatementWarnings(true)}
             >
-              <Literal name="confirmText" />
-            </UtrechtButton>
+              <UtrechtButton
+                type="submit"
+                appearance="primary-action-button"
+                name="confirm"
+                disabled={submitDisabled}
+                aria-disabled={submitDisabled}
+              >
+                <Literal name="confirmText" />
+              </UtrechtButton>
+            </DisabledClickableButtonWrapper>
           ) : null}
         </ToolbarList>
       </Toolbar>

src/scss/components/_disabled-clickable-button.scss

@@ -0,0 +1,15 @@
+@import '../mixins/prefix';
+
+.#{prefix(disabled-clickable-button)} {
+  position: relative;
+
+  &__clickable-wrap::before {
+    cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

src/styles.scss

@@ -63,3 +63,4 @@
 @import './scss/components/floating-widget';
 @import './scss/components/date-picker';
 @import './scss/components/input-container';
+@import './scss/components/disabled-clickable-button';