@sapudex/web-components 2.31.0 → 2.32.1

package/cypress/specs/StepInput.cy.tsx

@@ -0,0 +1,507 @@
+import { UDExStepInput } from "../support/component-imports.js";
+
+// ---------------------------------------------------------------------------
+// Helper: asserts focus has moved to the native <input> inside udex-text-field.
+// _incValue()/_decValue() call this.input.focus() when a boundary is hit.
+//
+// With nested shadow DOMs, document.activeElement returns the outermost shadow
+// host visible to the document (<udex-step-input>). To confirm focus is
+// specifically on <udex-text-field>, we traverse one level deeper using
+// shadowRoot.activeElement on the step-input's shadow root.
+// ---------------------------------------------------------------------------
+function assertFocusIsInput() {
+  cy.get("[udex-step-input]").then(($host) => {
+    cy.document().then((doc) => {
+      const stepInput = $host[0];
+      const textField = stepInput.shadowRoot?.querySelector("[udex-text-field]");
+      expect(
+        doc.activeElement === stepInput && stepInput.shadowRoot?.activeElement === textField,
+        "focus is inside the text field after boundary was reached",
+      ).to.be.true;
+    });
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Cypress component tests — StepInput focus management on button disable
+// ---------------------------------------------------------------------------
+describe("UDExStepInput — focus management on button disable", () => {
+  // -------------------------------------------------------------------------
+  // Scenario 1: increment to max via click
+  //   Setup: value=4, min=0, max=5, step=1
+  //   Action: click the + button (value becomes 5, _incIconDisabled becomes true)
+  //   Expect: focus moves to the inner text input, NOT lost to document.body
+  // -------------------------------------------------------------------------
+  describe("incrementing to max value — click", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-inc-to-max"
+          value={4}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("disables the increment button after reaching max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+    });
+
+    // Updated: source sends focus to this.input (inner text input), not the opposite button
+    it("moves focus to the text input when increment button becomes disabled on click", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+      assertFocusIsInput();
+    });
+
+    it("keeps the decrement button enabled after incrementing to max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("not.have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 2: increment to max via keyboard (Enter on the + button)
+  //   Setup: value=4, min=0, max=5, step=1
+  //   Action: focus the + button, press Enter (triggers onClick → _incValue)
+  //   Expect: focus moves to the inner text input
+  // -------------------------------------------------------------------------
+  describe("incrementing to max value — Enter key", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-inc-to-max-kbd"
+          value={4}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("moves focus to the text input when increment button becomes disabled via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      assertFocusIsInput();
+    });
+
+    it("disables the increment button after reaching max via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 3: decrement to min via click
+  //   Setup: value=1, min=0, max=5, step=1
+  //   Action: click the - button (value becomes 0, _decIconDisabled becomes true)
+  //   Expect: focus moves to the inner text input
+  // -------------------------------------------------------------------------
+  describe("decrementing to min value — click", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-dec-to-min"
+          value={1}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("disables the decrement button after reaching min", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+    });
+
+    // Updated: source sends focus to this.input (inner text input), not the opposite button
+    it("moves focus to the text input when decrement button becomes disabled on click", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+      assertFocusIsInput();
+    });
+
+    it("keeps the increment button enabled after decrementing to min", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("not.have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 4: decrement to min via keyboard (Enter on the - button)
+  //   Setup: value=1, min=0, max=5, step=1
+  //   Action: focus the - button, press Enter (triggers onClick → _decValue)
+  //   Expect: focus moves to the inner text input
+  // -------------------------------------------------------------------------
+  describe("decrementing to min value — Enter key", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-dec-to-min-kbd"
+          value={1}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("moves focus to the text input when decrement button becomes disabled via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      assertFocusIsInput();
+    });
+
+    it("disables the decrement button after reaching min via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 5: min equals max — both buttons disabled on render
+  //   Both buttons are disabled from the start; clicking them (forced) must
+  //   not change the value because _incIconInactive / _decIconInactive is true.
+  // -------------------------------------------------------------------------
+  describe("min equals max — both buttons disabled on render", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-min-eq-max"
+          value={3}
+          min={3}
+          max={3}
+          step={1}
+        />,
+      );
+    });
+
+    it("disables the increment button when min equals max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+    });
+
+    it("disables the decrement button when min equals max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+    });
+
+    it("does not change value when increment button is clicked while both are disabled", () => {
+      // The click guard (_incIconInactive) prevents any value change.
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click({ force: true }); // force because the element is disabled
+      cy.get("[udex-step-input]").should("have.attr", "value", "3");
+    });
+
+    it("does not change value when decrement button is clicked while both are disabled", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click({ force: true });
+      cy.get("[udex-step-input]").should("have.attr", "value", "3");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 6: focus stays inside the component boundary
+  //   After hitting a boundary the active element must still be a descendant
+  //   of udex-step-input — focus must never escape to document.body.
+  //   This validates the core WCAG requirement for focus management.
+  // -------------------------------------------------------------------------
+  describe("focus stays inside component when a button becomes disabled", () => {
+    it("focus remains within step-input after incrementing to max", () => {
+      cy.mount(
+        <UDExStepInput value={4} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      cy.document().then((doc) => {
+        cy.get("[udex-step-input]").then(($host) => {
+          const activeEl = doc.activeElement;
+          expect(
+            activeEl === $host[0] || $host[0].contains(activeEl),
+            "focus stays within udex-step-input after incrementing to max",
+          ).to.be.true;
+        });
+      });
+    });
+
+    it("focus remains within step-input after decrementing to min", () => {
+      cy.mount(
+        <UDExStepInput value={1} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      cy.document().then((doc) => {
+        cy.get("[udex-step-input]").then(($host) => {
+          const activeEl = doc.activeElement;
+          expect(
+            activeEl === $host[0] || $host[0].contains(activeEl),
+            "focus stays within udex-step-input after decrementing to min",
+          ).to.be.true;
+        });
+      });
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 7: focus is NOT redirected when boundary is not reached
+  //   _incValue / _decValue must only redirect focus when the boundary is hit.
+  //   Increments and decrements that land in the middle of the range must leave
+  //   focus on the clicked button (default browser behaviour).
+  // -------------------------------------------------------------------------
+  describe("focus is not redirected when boundary is not reached", () => {
+    it("does not redirect focus to text input after a non-boundary increment", () => {
+      cy.mount(
+        <UDExStepInput value={2} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // Button must still be enabled (value 3, below max 5)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("not.have.attr", "disabled");
+
+      // Focus must NOT have been redirected to the text field
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[udex-text-field]")
+        .then(($textField) => {
+          cy.document().then((doc) => {
+            const activeEl = doc.activeElement;
+            expect(
+              activeEl === $textField[0] || $textField[0].contains(activeEl),
+              "focus was NOT incorrectly redirected to text input after non-boundary increment",
+            ).to.be.false;
+          });
+        });
+    });
+
+    it("does not redirect focus to text input after a non-boundary decrement", () => {
+      cy.mount(
+        <UDExStepInput value={3} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      // Button must still be enabled (value 2, above min 0)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("not.have.attr", "disabled");
+
+      // Focus must NOT have been redirected to the text field
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[udex-text-field]")
+        .then(($textField) => {
+          cy.document().then((doc) => {
+            const activeEl = doc.activeElement;
+            expect(
+              activeEl === $textField[0] || $textField[0].contains(activeEl),
+              "focus was NOT incorrectly redirected to text input after non-boundary decrement",
+            ).to.be.false;
+          });
+        });
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 8: aria-live region suppressed on boundary hit
+  //   When _incValue / _decValue hits a boundary and redirects focus to the
+  //   input, the aria-live region must be empty so the screen reader does not
+  //   double-announce the value (once from the live region and once from the
+  //   focused input).
+  // -------------------------------------------------------------------------
+  describe("aria-live region suppressed on boundary hit", () => {
+    it("clears the aria-live region when incrementing to max", () => {
+      cy.mount(
+        <UDExStepInput value={4} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // The increment button must be disabled (boundary reached)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+
+      // The aria-live div must be empty to prevent SR double-announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "");
+    });
+
+    it("clears the aria-live region when decrementing to min", () => {
+      cy.mount(
+        <UDExStepInput value={1} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      // The decrement button must be disabled (boundary reached)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+
+      // The aria-live div must be empty to prevent SR double-announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 9: aria-live region still announces for mid-range changes
+  //   When the value changes but does NOT hit a boundary, the aria-live
+  //   region must contain the updated value so the screen reader announces
+  //   it normally.
+  // -------------------------------------------------------------------------
+  describe("aria-live region announces value for mid-range changes", () => {
+    it("shows the updated value in the aria-live region after a non-boundary increment", () => {
+      cy.mount(
+        <UDExStepInput value={2} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // The increment button must still be enabled (value 3, below max 5)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("not.have.attr", "disabled");
+
+      // The aria-live div must contain the new value for SR announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "3");
+    });
+
+    it("shows the updated value in the aria-live region after a non-boundary decrement", () => {
+      cy.mount(
+        <UDExStepInput value={3} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      // The decrement button must still be enabled (value 2, above min 0)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("not.have.attr", "disabled");
+
+      // The aria-live div must contain the new value for SR announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "2");
+    });
+
+    it("shows the precision-formatted value in the aria-live region", () => {
+      cy.mount(
+        <UDExStepInput value={2} min={0} max={5} step={0.1} valuePrecision={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // The aria-live div must contain the precision-formatted value
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "2.1");
+    });
+  });
+});