diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js index c14f720dd6..0f4a75e9d8 100644 --- a/ui.frontend/src/view/FormFieldBase.js +++ b/ui.frontend/src/view/FormFieldBase.js @@ -356,6 +356,7 @@ class FormFieldBase extends FormField { #registerEventListeners() { this.#addOnFocusEventListener(); this.#addOnHelpIconClickEventListener(); + this.#addOnTabKeyEventListener(); } /** @@ -392,6 +393,33 @@ class FormFieldBase extends FormField { } } + /** + * Adds an event listener for the Tab key to trigger validation before focus moves. + * This ensures that buttons enabled by validation become accessible in the tab order. + * Fixes accessibility issue where Tab skips over buttons that become enabled after blur. + * @private + */ + #addOnTabKeyEventListener() { + const widget = this.getWidget(); + if (widget) { + const handleTabKey = (e) => { + if (e.key === 'Tab') { + const value = e.target.value; + if (value !== undefined && typeof this.setModelValue === 'function') { + this.setModelValue(value); + } + } + }; + if (widget.length && widget.length > 1) { + for (let opt of widget) { + opt.addEventListener('keydown', handleTabKey); + } + } else { + widget.addEventListener('keydown', handleTabKey); + } + } + } + /** * Triggers an event on GuideBridge. * @param {string} eventType - The event type.