From 145db5deaa26535e774f53e51c2e9a281cf92cbb Mon Sep 17 00:00:00 2001 From: Stefan Dragomir Date: Thu, 30 Oct 2025 20:52:50 +0200 Subject: [PATCH 1/3] FORMS-21002: Programmatic label does not convey purpose of control @sunnym @vavarshn --- .../review/v1/review/clientlibs/site/js/reviewview.js | 9 +++++---- .../form/review/v1/review/template/fieldTemplate.html | 2 +- .../form/review/v1/review/template/panelTemplate.html | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js index 2e12c323bb..1245bdadbf 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js @@ -115,9 +115,6 @@ if(value){ value.setAttribute('aria-labelledby', id); } - if(editButton && editButton.getAttribute(Review.DATA_ATTRIBUTE_VISIBLE) === 'true'){ - editButton.setAttribute('aria-describedby', id); - } } static isRepeatable(item) { @@ -308,7 +305,11 @@ const editButton = cloneNode.querySelector(Review.selectors.editButton); if (editButton) { editButton.setAttribute(Review.selectors.fieldId, item.id); - editButton.setAttribute('aria-label', item?.label?.value); + const currentAriaLabel = editButton.getAttribute('aria-label'); + const currentItemLabel = item?.label?.value; + if (currentItemLabel && !currentAriaLabel.includes(currentItemLabel)) { + editButton.setAttribute('aria-label', currentAriaLabel + " " + currentItemLabel); + } if (item.enabled === false) { editButton.setAttribute('disabled', true); } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html index 35ce3308e2..6b997d7328 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html @@ -18,6 +18,6 @@
- +
\ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html index c8ec2e4e33..c83187f465 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html @@ -18,7 +18,7 @@
- +
From dfc4be55204cb6c4ca395bc36f55cc34d908ae94 Mon Sep 17 00:00:00 2001 From: Stefan Dragomir Date: Fri, 21 Nov 2025 21:25:32 +0200 Subject: [PATCH 2/3] FORMS-21002: Translation via JS instead of HTM --- .../form/review/v1/review/clientlibs/site/js/reviewview.js | 5 +---- .../form/review/v1/review/template/fieldTemplate.html | 2 +- .../form/review/v1/review/template/panelTemplate.html | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js index 1245bdadbf..84417c3f9d 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/clientlibs/site/js/reviewview.js @@ -305,11 +305,8 @@ const editButton = cloneNode.querySelector(Review.selectors.editButton); if (editButton) { editButton.setAttribute(Review.selectors.fieldId, item.id); - const currentAriaLabel = editButton.getAttribute('aria-label'); const currentItemLabel = item?.label?.value; - if (currentItemLabel && !currentAriaLabel.includes(currentItemLabel)) { - editButton.setAttribute('aria-label', currentAriaLabel + " " + currentItemLabel); - } + editButton.setAttribute('aria-label', Granite.I18n.get('Edit') + (currentItemLabel ? " " + currentItemLabel : "")); if (item.enabled === false) { editButton.setAttribute('disabled', true); } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html index 6b997d7328..35ce3308e2 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/fieldTemplate.html @@ -18,6 +18,6 @@
- +
\ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html index c83187f465..c8ec2e4e33 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/review/v1/review/template/panelTemplate.html @@ -18,7 +18,7 @@
- +
From 44f891601bfed985997b5e8e3a078ae64ffad8f8 Mon Sep 17 00:00:00 2001 From: Stefan Dragomir Date: Mon, 24 Nov 2025 12:36:39 +0200 Subject: [PATCH 3/3] FORMS-21002: Adding test cases for aria-label --- .../review.repeatability.runtime.spec.js | 10 ++++-- .../specs/review/review.runtime.spec.js | 35 +++++++++++++++---- 2 files changed, 36 insertions(+), 9 deletions(-) diff --git a/ui.tests/test-module/specs/review/review.repeatability.runtime.spec.js b/ui.tests/test-module/specs/review/review.repeatability.runtime.spec.js index 4dad25a9e0..512aaedfd0 100644 --- a/ui.tests/test-module/specs/review/review.repeatability.runtime.spec.js +++ b/ui.tests/test-module/specs/review/review.repeatability.runtime.spec.js @@ -69,7 +69,10 @@ describe("Form with Review component with repeatablity", () => { cy.get(`.${bemBlock}__container .${bemBlock}__panel`).eq(0).within(() => { cy.get(`.${bemBlock}__label-container`).should('exist'); cy.get(`.${bemBlock}__label`).contains('Personal Information'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Personal Information'); cy.get(`.${bemBlock}__content`).should('exist').within(() => { cy.get(`.${bemBlock}__field`).eq(0).within(() => { @@ -122,7 +125,10 @@ describe("Form with Review component with repeatablity", () => { cy.get(`.${bemBlock}__content`).should('exist').within(() => { cy.get(`.${bemBlock}__label-container`).should('exist'); cy.get(`.${bemBlock}__label`).contains('Address'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Address'); cy.get(`.${bemBlock}__content`).should('exist').within(() => { cy.get(`.${bemBlock}__field`).eq(0).within(() => { diff --git a/ui.tests/test-module/specs/review/review.runtime.spec.js b/ui.tests/test-module/specs/review/review.runtime.spec.js index b5b39d7396..613c048d35 100644 --- a/ui.tests/test-module/specs/review/review.runtime.spec.js +++ b/ui.tests/test-module/specs/review/review.runtime.spec.js @@ -66,13 +66,19 @@ describe("Form with Review component", () => { cy.get(`.${bemBlock}__field`).eq(0).within(() => { cy.get(`.${bemBlock}__label`).contains('First name'); cy.get(`.${bemBlock}__value`).contains('john'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'First name'); }); cy.get(`.${bemBlock}__field`).eq(1).within(() => { cy.get(`.${bemBlock}__label`).contains('Last name'); cy.get(`.${bemBlock}__value`).contains('deo'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Last name'); }); cy.get(`.${bemBlock}__field`).eq(2).within(() => { @@ -85,31 +91,46 @@ describe("Form with Review component", () => { cy.get(`.${bemBlock}__field`).eq(3).within(() => { cy.get(`.${bemBlock}__label`).contains('Email Address'); cy.get(`.${bemBlock}__value`).contains('abc@gmail.com'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Email Address'); }); cy.get(`.${bemBlock}__field`).eq(4).within(() => { cy.get(`.${bemBlock}__label`).contains('Mobile Number'); cy.get(`.${bemBlock}__value`).contains('+91987654321'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Mobile Number'); }); cy.get(`.${bemBlock}__field`).eq(5).within(() => { cy.get(`.${bemBlock}__label`).contains('DOB'); cy.get(`.${bemBlock}__value`).contains('2020-10-10'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'DOB'); }); cy.get(`.${bemBlock}__field`).eq(6).within(() => { cy.get(`.${bemBlock}__label`).contains('Gender'); cy.get(`.${bemBlock}__value`).contains('Male'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Gender'); }); cy.get(`.${bemBlock}__field`).eq(7).within(() => { cy.get(`.${bemBlock}__label`).contains('Interest'); cy.get(`.${bemBlock}__value`).contains('Music , Football'); - cy.get(`.${bemBlock}__edit-button`).should('have.attr', 'data-cmp-visible', 'true'); + cy.get(`.${bemBlock}__edit-button`) + .should('have.attr', 'data-cmp-visible', 'true') + .should('have.attr', 'aria-label') + .and('contain', 'Interest'); }); }); });