fix(time-picker): focus corresponding input when nudge buttons are cl…

…icked (#7650) **Related Issue:** #7533 ## Summary This fixes an issue where clicking the up/down buttons doesn't focus the input that the buttons are changing the value of. --------- Co-authored-by: Erik Harper <[email protected]>
Esri · Sep 5, 2023 · 9c7d846 · 9c7d846
1 parent 73ff874
commit 9c7d846
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 21 deletions.
diff --git a/packages/calcite-components/src/components/time-picker/resources.ts b/packages/calcite-components/src/components/time-picker/resources.ts
@@ -19,6 +19,7 @@ export const CSS = {
   fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
+  inputFocus: "inputFocus",
   meridiem: "meridiem",
   minute: "minute",
   second: "second",

diff --git a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
@@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests";
 import { formatTimePart } from "../../utils/time";
 import { CSS } from "./resources";
-import { getElementXY } from "../../tests/utils";
+import { getElementXY, getFocusedElementProp } from "../../tests/utils";
 
 const letterKeys = [
   "a",
@@ -59,6 +59,106 @@ describe("calcite-time-picker", () => {
     ]);
   });
 
+  describe("focusing", () => {
+    it("should focus input when corresponding nudge up button is clicked", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-time-picker step=".001"></calcite-time-picker>`);
+
+      const minuteElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.minute}`)).getAttribute("aria-label");
+      const minuteUpEl = await page.find(`calcite-time-picker >>> .${CSS.buttonMinuteUp}`);
+
+      await minuteUpEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(minuteElAriaLabel);
+
+      const secondElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.second}`)).getAttribute("aria-label");
+      const secondUpEl = await page.find(`calcite-time-picker >>> .${CSS.buttonSecondUp}`);
+
+      await secondUpEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(secondElAriaLabel);
+
+      const fractionalSecondElAriaLabel = (
+        await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`)
+      ).getAttribute("aria-label");
+      const fractionalSecondUpEl = await page.find(`calcite-time-picker >>> .${CSS.buttonFractionalSecondUp}`);
+
+      await fractionalSecondUpEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(fractionalSecondElAriaLabel);
+
+      const meridiemElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.meridiem}`)).getAttribute(
+        "aria-label"
+      );
+      const meridiemUpEl = await page.find(`calcite-time-picker >>> .${CSS.buttonMeridiemUp}`);
+
+      await meridiemUpEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(meridiemElAriaLabel);
+
+      const hourElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.hour}`)).getAttribute("aria-label");
+      const hourUpEl = await page.find(`calcite-time-picker >>> .${CSS.buttonHourUp}`);
+
+      await hourUpEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(hourElAriaLabel);
+    });
+
+    it("should focus input when corresponding nudge down button is clicked", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-time-picker step=".001"></calcite-time-picker>`);
+
+      const minuteElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.minute}`)).getAttribute("aria-label");
+      const minuteDownEl = await page.find(`calcite-time-picker >>> .${CSS.buttonMinuteDown}`);
+
+      await minuteDownEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(minuteElAriaLabel);
+
+      const secondElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.second}`)).getAttribute("aria-label");
+      const secondDownEl = await page.find(`calcite-time-picker >>> .${CSS.buttonSecondDown}`);
+
+      await secondDownEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(secondElAriaLabel);
+
+      const fractionalSecondElAriaLabel = (
+        await page.find(`calcite-time-picker >>> .${CSS.fractionalSecond}`)
+      ).getAttribute("aria-label");
+      const fractionalSecondDownEl = await page.find(`calcite-time-picker >>> .${CSS.buttonFractionalSecondDown}`);
+
+      await fractionalSecondDownEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(fractionalSecondElAriaLabel);
+
+      const meridiemElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.meridiem}`)).getAttribute(
+        "aria-label"
+      );
+      const meridiemDownEl = await page.find(`calcite-time-picker >>> .${CSS.buttonMeridiemDown}`);
+
+      await meridiemDownEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(meridiemElAriaLabel);
+
+      const hourElAriaLabel = (await page.find(`calcite-time-picker >>> .${CSS.hour}`)).getAttribute("aria-label");
+      const hourDownEl = await page.find(`calcite-time-picker >>> .${CSS.buttonHourDown}`);
+
+      await hourDownEl.click();
+      await page.waitForChanges();
+
+      expect(await getFocusedElementProp(page, "ariaLabel", { shadow: true })).toEqual(hourElAriaLabel);
+    });
+  });
+
   describe("should focus the first focusable element when setFocus is called (ltr)", () => {
     focusable(`calcite-time-picker`, {
       shadowFocusTargetSelector: `.${CSS.input}.${CSS.hour}`,

diff --git a/packages/calcite-components/src/components/time-picker/time-picker.scss b/packages/calcite-components/src/components/time-picker/time-picker.scss
@@ -69,9 +69,12 @@
     &:focus,
     &:hover:focus {
       @apply outline-none;
+      outline-offset: 0;
+    }
+    &.inputFocus,
+    &:hover.inputFocus {
       box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
       z-index: theme("zIndex.header");
-      outline-offset: 0;
     }
   }