From e9ffe9291dd67b86377524b5560f2274c44bba10 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Fri, 3 Oct 2025 13:32:34 +0300 Subject: [PATCH 1/4] FORMS-18632: Info or functionality is unavailable at 320px width equivalent --- .../clientlibs/site/css/datepickerwidget.css | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css index 7072753701..b72103c5cd 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css @@ -24,6 +24,8 @@ outline: solid #CCCCCC 2px; flex-direction: column; width: 433px; + max-width: calc(100vw - 20px); + box-sizing: border-box; } .datetimepicker .dp-clear { @@ -112,7 +114,8 @@ box-sizing: border-box; -moz-box-sizing: border-box; color: #666666; - min-width:40px; + min-width: 40px; + flex: 0 0 calc(100% / 7); } .datetimepicker .view ul.header li { @@ -165,4 +168,39 @@ .datefieldwidget.widgetreadonly .cmp-adaptiveform-datepicker__calendar-icon { display: none; +} + +/* Responsive styles for WCAG 1.4.10 Reflow compliance at 320px */ +@media (max-width: 400px) { + .datetimepicker { + width: calc(100vw - 20px); + left: 10px !important; + right: 10px !important; + } + + .datetimepicker .view ul { + padding: 2px; + } + + .datetimepicker .view ul li { + min-width: 30px; + padding: 3px 1px; + font-size: 0.75rem; + flex: 0 0 calc(100% / 7); + } + + .datetimepicker .dp-header .dp-caption { + flex: 1; + font-size: 0.875rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .datetimepicker .dp-header .dp-leftnav, + .datetimepicker .dp-header .dp-rightnav { + min-width: 35px; + width: 35px; + flex-shrink: 0; + } } \ No newline at end of file From 40df4deddc8e045e0a781e2dff1ad8a733492766 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Thu, 9 Oct 2025 10:32:25 +0300 Subject: [PATCH 2/4] FORMS-18632: Info or functionality is unavailable at 320px width equivalent @sunnym @vavarshn --- .../datepicker.runtime.layout.cy.js | 129 ++++++++++++++++++ 1 file changed, 129 insertions(+) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js index ba57542199..17ab8ef88d 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js @@ -361,4 +361,133 @@ describe("Form Runtime layout of Date Picker ", () => { }); }); + describe("Reflow at 320px width (WCAG 1.4.10)", () => { + + it("should display all date picker controls at 320px viewport width", () => { + cy.viewport(320, 568); + + const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; + + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("be.visible") + .click(); + + cy.get('.datetimepicker.datePickerTarget') + .should("be.visible") + .and("have.css", "display", "flex"); + + cy.get(".dp-leftnav") + .should("be.visible") + .and("be.visible"); + + cy.get(".dp-rightnav") + .should("be.visible") + .and("be.visible"); + + cy.get(".dp-caption") + .should("be.visible"); + }); + + it("should display all days in the first column (Sunday) at 320px", () => { + cy.viewport(320, 568); + + const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; + const date = '2026-02-01'; + + cy.get(`#${datePicker}`).find("input").clear().type(date); + + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("be.visible") + .click(); + + cy.get('.datetimepicker.datePickerTarget').within(() => { + cy.get('ul.header li').first().should("be.visible").and("contain", "Sun"); + + cy.get("#li-day-2").should("be.visible"); + cy.get("#li-day-9").should("be.visible"); + cy.get("#li-day-16").should("be.visible"); + cy.get("#li-day-23").should("be.visible"); + }); + }); + + it("should allow navigation with previous/next buttons at 320px", () => { + cy.viewport(320, 568); + + const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; + const date = '2025-03-01'; + + cy.get(`#${datePicker}`).find("input").clear().type(date); + + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("be.visible") + .click(); + + cy.get(".dp-caption").should("contain", "March"); + cy.get(".dp-leftnav").should("be.visible").click(); + cy.get(".dp-caption").should("contain", "February"); + cy.get(".dp-rightnav").should("be.visible").click(); + cy.get(".dp-caption").should("contain", "March"); + }); + + it("should not cause horizontal overflow at 320px", () => { + cy.viewport(320, 568); + + const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; + + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("be.visible") + .click(); + + cy.get('.datetimepicker.datePickerTarget').then(($picker) => { + const pickerWidth = $picker.outerWidth(); + expect(pickerWidth).to.be.lessThan(320); + }); + + cy.document().then((doc) => { + expect(doc.documentElement.scrollWidth).to.equal(doc.documentElement.clientWidth); + }); + }); + + it("should maintain date column alignment at 320px", () => { + cy.viewport(320, 568); + + const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; + const date = '2025-03-01'; + + cy.get(`#${datePicker}`).find("input").clear().type(date); + + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("be.visible") + .click(); + + cy.get('.datetimepicker.datePickerTarget .view.dp-monthview ul:not(.header)').then(($rows) => { + const firstCellWidth = $rows.eq(0).find('li').eq(0).outerWidth(); + + $rows.each((rowIndex, row) => { + cy.wrap(row).find('li').each((cellIndex, cell) => { + const cellWidth = Cypress.$(cell).outerWidth(); + expect(Math.abs(cellWidth - firstCellWidth)).to.be.lessThan(2); + }); + }); + }); + }); + + it("should allow date selection at 320px viewport", () => { + cy.viewport(320, 568); + + const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; + const date = '2025-03-01'; + + cy.get(`#${datePicker}`).find("input").clear().type(date); + + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") + .should("be.visible") + .click(); + + cy.get("#li-day-10").should("be.visible").click(); + + cy.get(`#${datePicker}`).find("input").blur().should("have.value", "Sunday, 2 March, 2025"); + }); + }); + }) \ No newline at end of file From 1ecac891f8df9c2655ac81a5c65c027b86e2b898 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Mon, 13 Oct 2025 14:34:49 +0300 Subject: [PATCH 3/4] FORMS-18632: Info or functionality is unavailable at 320px width equivalent @sunnym @vavarshn --- .../datepicker.runtime.layout.cy.js | 140 ++---------------- 1 file changed, 15 insertions(+), 125 deletions(-) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js index 17ab8ef88d..f565580892 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js @@ -361,133 +361,23 @@ describe("Form Runtime layout of Date Picker ", () => { }); }); - describe("Reflow at 320px width (WCAG 1.4.10)", () => { + // WCAG 1.4.10 Reflow tests - FORMS-18632 + it("should display navigation controls at 320px viewport", () => { + cy.viewport(320, 568); + const [datePicker] = Object.entries(formContainer._fields)[0]; - it("should display all date picker controls at 320px viewport width", () => { - cy.viewport(320, 568); - - const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; - - cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("be.visible") - .click(); - - cy.get('.datetimepicker.datePickerTarget') - .should("be.visible") - .and("have.css", "display", "flex"); - - cy.get(".dp-leftnav") - .should("be.visible") - .and("be.visible"); - - cy.get(".dp-rightnav") - .should("be.visible") - .and("be.visible"); - - cy.get(".dp-caption") - .should("be.visible"); - }); - - it("should display all days in the first column (Sunday) at 320px", () => { - cy.viewport(320, 568); - - const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; - const date = '2026-02-01'; - - cy.get(`#${datePicker}`).find("input").clear().type(date); - - cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("be.visible") - .click(); - - cy.get('.datetimepicker.datePickerTarget').within(() => { - cy.get('ul.header li').first().should("be.visible").and("contain", "Sun"); - - cy.get("#li-day-2").should("be.visible"); - cy.get("#li-day-9").should("be.visible"); - cy.get("#li-day-16").should("be.visible"); - cy.get("#li-day-23").should("be.visible"); - }); - }); - - it("should allow navigation with previous/next buttons at 320px", () => { - cy.viewport(320, 568); - - const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; - const date = '2025-03-01'; - - cy.get(`#${datePicker}`).find("input").clear().type(date); - - cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("be.visible") - .click(); - - cy.get(".dp-caption").should("contain", "March"); - cy.get(".dp-leftnav").should("be.visible").click(); - cy.get(".dp-caption").should("contain", "February"); - cy.get(".dp-rightnav").should("be.visible").click(); - cy.get(".dp-caption").should("contain", "March"); - }); - - it("should not cause horizontal overflow at 320px", () => { - cy.viewport(320, 568); - - const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; - - cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("be.visible") - .click(); - - cy.get('.datetimepicker.datePickerTarget').then(($picker) => { - const pickerWidth = $picker.outerWidth(); - expect(pickerWidth).to.be.lessThan(320); - }); - - cy.document().then((doc) => { - expect(doc.documentElement.scrollWidth).to.equal(doc.documentElement.clientWidth); - }); - }); - - it("should maintain date column alignment at 320px", () => { - cy.viewport(320, 568); - - const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; - const date = '2025-03-01'; - - cy.get(`#${datePicker}`).find("input").clear().type(date); - - cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("be.visible") - .click(); - - cy.get('.datetimepicker.datePickerTarget .view.dp-monthview ul:not(.header)').then(($rows) => { - const firstCellWidth = $rows.eq(0).find('li').eq(0).outerWidth(); - - $rows.each((rowIndex, row) => { - cy.wrap(row).find('li').each((cellIndex, cell) => { - const cellWidth = Cypress.$(cell).outerWidth(); - expect(Math.abs(cellWidth - firstCellWidth)).to.be.lessThan(2); - }); - }); - }); - }); + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click(); + cy.get(".dp-leftnav").should("be.visible"); + cy.get(".dp-rightnav").should("be.visible"); + }); - it("should allow date selection at 320px viewport", () => { - cy.viewport(320, 568); - - const [datePicker, datePickerFieldView] = Object.entries(formContainer._fields)[0]; - const date = '2025-03-01'; - - cy.get(`#${datePicker}`).find("input").clear().type(date); - - cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon") - .should("be.visible") - .click(); - - cy.get("#li-day-10").should("be.visible").click(); - - cy.get(`#${datePicker}`).find("input").blur().should("have.value", "Sunday, 2 March, 2025"); - }); + it("should display first column dates at 320px", () => { + cy.viewport(320, 568); + const [datePicker] = Object.entries(formContainer._fields)[0]; + + cy.get(`#${datePicker}`).find("input").clear().type('2026-02-01'); + cy.get(`#${datePicker}`).find(".cmp-adaptiveform-datepicker__calendar-icon").click(); + cy.get("#li-day-2").should("be.visible"); }); }) \ No newline at end of file From ff3bd0a1ad5b6a9b6b0733fcd94fde6f585b28a4 Mon Sep 17 00:00:00 2001 From: CezarSTF Date: Mon, 13 Oct 2025 15:51:46 +0300 Subject: [PATCH 4/4] FORMS-18632: Info or functionality is unavailable at 320px width equivalent @sunnym @vavarshn --- .../test-module/specs/datepicker/datepicker.runtime.layout.cy.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js index f565580892..7872c4438f 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.layout.cy.js @@ -361,7 +361,6 @@ describe("Form Runtime layout of Date Picker ", () => { }); }); - // WCAG 1.4.10 Reflow tests - FORMS-18632 it("should display navigation controls at 320px viewport", () => { cy.viewport(320, 568); const [datePicker] = Object.entries(formContainer._fields)[0];