From 3ab526796acb4f16dc4852e19e6867dc03b3f0ef Mon Sep 17 00:00:00 2001 From: Stefan Dragomir Date: Fri, 21 Mar 2025 19:31:58 +0200 Subject: [PATCH 1/2] FORMS-18673: Visual heading text is not marked as heading @sunnym @vavarshn --- ui.frontend/src/constants.js | 11 +++++++++++ ui.frontend/src/view/FormFieldBase.js | 6 ++++++ ui.frontend/src/view/FormPanel.js | 15 +++++++++++++++ 3 files changed, 32 insertions(+) diff --git a/ui.frontend/src/constants.js b/ui.frontend/src/constants.js index 04d6f8078e..9350037d74 100644 --- a/ui.frontend/src/constants.js +++ b/ui.frontend/src/constants.js @@ -361,6 +361,17 @@ export const Constants = { */ ARIA_CURRENT : "aria-current", + /** + * Aria Level attribute. + * @type {string} + */ + ARIA_LEVEL : "aria-level", + + /** + * Role attribute. + * @type {string} + */ + ROLE : "role", /** * Prefix path for all AF HTTP APIs. diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js index aa7d99b446..9c0c367a7a 100644 --- a/ui.frontend/src/view/FormFieldBase.js +++ b/ui.frontend/src/view/FormFieldBase.js @@ -604,6 +604,12 @@ class FormFieldBase extends FormField { this.toggleAttribute(this.label, label.visible, Constants.ARIA_HIDDEN, true); this.label.setAttribute(Constants.DATA_ATTRIBUTE_VISIBLE, label.visible); } + + const bemClass = Array.from(this.element.classList).filter(bemClass => !bemClass.includes('--'))[0]; + if (bemClass && this.label.parentElement.classList.contains(`${bemClass}__label-container`)) { + this.label.setAttribute(Constants.ROLE, "heading"); + this.label.setAttribute(Constants.ARIA_LEVEL, "2"); + } } } diff --git a/ui.frontend/src/view/FormPanel.js b/ui.frontend/src/view/FormPanel.js index 0c39a3037d..1a01400c19 100644 --- a/ui.frontend/src/view/FormPanel.js +++ b/ui.frontend/src/view/FormPanel.js @@ -180,6 +180,21 @@ class FormPanel extends FormFieldBase { this.element.setAttribute(Constants.DATA_ATTRIBUTE_VALID, valid); } + /** + * Updates the HTML state based on the label state of the field. + * @param {Object} label - The label. + */ + updateLabel(label) { + super.updateLabel(label); + + const bemClass = Array.from(this.element.classList).filter(bemClass => !bemClass.includes('--'))[0]; + const labelContainer = this.element.querySelector(`.${bemClass}__label-container`); + if (labelContainer) { + labelContainer.querySelector("label").setAttribute(Constants.ROLE, "heading"); + labelContainer.querySelector("label").setAttribute(Constants.ARIA_LEVEL, "2"); + } + } + /** * Gets the child view at the specified index. * This method needs to be implemented in every layout. From 48804d10f90d3a54a9cdde27c6238f1a615181fb Mon Sep 17 00:00:00 2001 From: Stefan Dragomir Date: Thu, 22 May 2025 17:05:59 +0300 Subject: [PATCH 2/2] FORMS-18673: Removing hardcoded level --- ui.frontend/src/constants.js | 6 ------ ui.frontend/src/view/FormFieldBase.js | 1 - ui.frontend/src/view/FormPanel.js | 1 - 3 files changed, 8 deletions(-) diff --git a/ui.frontend/src/constants.js b/ui.frontend/src/constants.js index 9350037d74..4dfca40686 100644 --- a/ui.frontend/src/constants.js +++ b/ui.frontend/src/constants.js @@ -361,12 +361,6 @@ export const Constants = { */ ARIA_CURRENT : "aria-current", - /** - * Aria Level attribute. - * @type {string} - */ - ARIA_LEVEL : "aria-level", - /** * Role attribute. * @type {string} diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js index 9c0c367a7a..69a9c6dc73 100644 --- a/ui.frontend/src/view/FormFieldBase.js +++ b/ui.frontend/src/view/FormFieldBase.js @@ -608,7 +608,6 @@ class FormFieldBase extends FormField { const bemClass = Array.from(this.element.classList).filter(bemClass => !bemClass.includes('--'))[0]; if (bemClass && this.label.parentElement.classList.contains(`${bemClass}__label-container`)) { this.label.setAttribute(Constants.ROLE, "heading"); - this.label.setAttribute(Constants.ARIA_LEVEL, "2"); } } } diff --git a/ui.frontend/src/view/FormPanel.js b/ui.frontend/src/view/FormPanel.js index 1a01400c19..eb92267680 100644 --- a/ui.frontend/src/view/FormPanel.js +++ b/ui.frontend/src/view/FormPanel.js @@ -191,7 +191,6 @@ class FormPanel extends FormFieldBase { const labelContainer = this.element.querySelector(`.${bemClass}__label-container`); if (labelContainer) { labelContainer.querySelector("label").setAttribute(Constants.ROLE, "heading"); - labelContainer.querySelector("label").setAttribute(Constants.ARIA_LEVEL, "2"); } }