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..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 @@ -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,8 @@ const editButton = cloneNode.querySelector(Review.selectors.editButton); if (editButton) { editButton.setAttribute(Review.selectors.fieldId, item.id); - editButton.setAttribute('aria-label', item?.label?.value); + const currentItemLabel = item?.label?.value; + editButton.setAttribute('aria-label', Granite.I18n.get('Edit') + (currentItemLabel ? " " + currentItemLabel : "")); if (item.enabled === false) { editButton.setAttribute('disabled', true); } 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'); }); }); });