diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 328558eb8ef..cb5a50526e4 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -2438,7 +2438,7 @@ export namespace Components { "collapse": () => Promise; "expand": () => Promise; "focusLink": () => Promise; - "isOpen": () => Promise; + "isOpen": () => Promise; } interface KolTreeItemWc { /** @@ -2460,7 +2460,7 @@ export namespace Components { "collapse": () => Promise; "expand": () => Promise; "focusLink": () => Promise; - "isOpen": () => Promise; + "isOpen": () => Promise; } interface KolTreeWc { /** diff --git a/packages/components/src/components/form/controller.ts b/packages/components/src/components/form/controller.ts index 4a5f99e6038..b36cd00af2a 100644 --- a/packages/components/src/components/form/controller.ts +++ b/packages/components/src/components/form/controller.ts @@ -81,7 +81,16 @@ export const propagateSubmitEventToForm = ( if (form.tagName === 'FORM') { setEventTarget(event, form); form.dispatchEvent(event); - (form as HTMLFormElement).submit(); + if (getExperimentalMode() && (form as HTMLFormElement).noValidate === false) { + devHint(`If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.`, { + force: true, + }); + // (form as HTMLFormElement).noValidate = true; do not make this implicit + } + if (typeof (form as HTMLFormElement).requestSubmit === 'function') { + // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit + (form as HTMLFormElement).requestSubmit(); + } } else if (form.tagName === 'KOL-FORM') { setEventTarget(event, KoliBriDevHelper.querySelector('form', form) as HTMLFormElement); const kolForm = form as FormProps; diff --git a/packages/samples/react/src/scenarios/static-form.tsx b/packages/samples/react/src/scenarios/static-form.tsx index de7d3cb8d1a..95cbc4f609b 100644 --- a/packages/samples/react/src/scenarios/static-form.tsx +++ b/packages/samples/react/src/scenarios/static-form.tsx @@ -41,7 +41,7 @@ export const StaticForm: FC = () => { -
+ diff --git a/packages/schema/src/utils/a11y.tipps.ts b/packages/schema/src/utils/a11y.tipps.ts index 6067116e91c..b267bdc5d33 100644 --- a/packages/schema/src/utils/a11y.tipps.ts +++ b/packages/schema/src/utils/a11y.tipps.ts @@ -11,6 +11,7 @@ export const a11yHint = (msg: string, options?: HintOptions): void => { a11yCache.add(msg); Log.debug(([msg] as unknown[]).concat(options?.details || []), { classifier: `✋ a11y`, + forceLog: !!options?.force, overwriteStyle: '; background-color: #09f', }); } @@ -22,6 +23,7 @@ export const a11yHint = (msg: string, options?: HintOptions): void => { // deprecatedCache.add(msg); // Log.warn(([msg] as unknown[]).concat(options?.details || []), { // classifier: `🔥 deprecated`, +// forceLog: !!options?.force, // overwriteStyle: '; background-color: #f00', // }); // } @@ -33,6 +35,7 @@ export const devHint = (msg: string, options?: HintOptions): void => { devCache.add(msg); Log.debug(([msg] as unknown[]).concat(options?.details || []), { classifier: `💻 dev`, + forceLog: !!options?.force, overwriteStyle: '; background-color: #f09', }); } @@ -41,7 +44,8 @@ export const devWarning = (msg: string, options?: HintOptions): void => { if (devCache.has(msg) === false || !!options?.force) { devCache.add(msg); Log.warn(([msg] as unknown[]).concat(options?.details || []), { - classifier: `💻 dev`, + classifier: `⚠️ dev`, + forceLog: !!options?.force, overwriteStyle: '; background-color: #f09', }); } @@ -54,6 +58,7 @@ export const featureHint = (msg: string, done = false, options?: HintOptions): v msg += done === true ? ' ✅' : ''; Log.debug(([msg] as unknown[]).concat(options?.details || []), { classifier: `🌟 feature`, + forceLog: !!options?.force, overwriteStyle: '; background-color: #309', }); } @@ -68,6 +73,7 @@ export const uiUxHint = (msg: string, options?: HintOptions): void => { uiUxCache.add(msg); Log.debug(([msg] as unknown[]).concat(options?.details || []), { classifier: `📑 ui/ux`, + forceLog: !!options?.force, overwriteStyle: '; background-color: #060;', }); }