diff --git a/index.html b/index.html index bb8aa002..ac7f362b 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,8 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; @@ -196,6 +197,7 @@

Highlight Feature

+ @@ -853,6 +855,18 @@

Usage and Demo

driverObj.drive(); }); + document.getElementById("button-autofocus-next").addEventListener("click", () => { + const driverObj = driver({ + autoFocusNextButton: true, + steps: [ + { popover: { title: "Some title", description: "Some description" } }, + { popover: { title: "Another title", description: "Some description" } }, + { popover: { title: "Yet another title", description: "Some description" } }, + ], + }); + + driverObj.drive(); + }); document.getElementById("popover-hook-config").addEventListener("click", () => { const driverObj = driver({ @@ -917,7 +931,8 @@

Usage and Demo

element: ".page-header h1 sup", popover: { title: "Buggy Highlight", - description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", + description: + "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", side: "bottom", align: "start", }, @@ -929,7 +944,8 @@

Usage and Demo

element: ".container", popover: { title: "Buggy Highlight", - description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", + description: + "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", side: "bottom", align: "start", }, diff --git a/src/config.ts b/src/config.ts index 7696f921..1ec26623 100644 --- a/src/config.ts +++ b/src/config.ts @@ -19,6 +19,7 @@ export type Config = { overlayClickBehavior?: "close" | "nextStep"; stagePadding?: number; stageRadius?: number; + autoFocusNextButton?: boolean; disableActiveInteraction?: boolean; @@ -38,7 +39,7 @@ export type Config = { doneBtnText?: string; // Called after the popover is rendered - onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State, driver: Driver }) => void; + onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State; driver: Driver }) => void; // State based callbacks, called upon state changes onHighlightStarted?: DriverHook; diff --git a/src/driver.ts b/src/driver.ts index 9108aff9..c6f8dcfe 100644 --- a/src/driver.ts +++ b/src/driver.ts @@ -173,6 +173,8 @@ export function driver(options: Config = {}): Driver { listen("escapePress", handleClose); listen("arrowLeftPress", handleArrowLeft); listen("arrowRightPress", handleArrowRight); + + (document.querySelector("#driver-popover-content") as HTMLDivElement)?.focus(); } function drive(stepIndex: number = 0) { diff --git a/src/events.ts b/src/events.ts index ae643f71..00c0b98e 100644 --- a/src/events.ts +++ b/src/events.ts @@ -57,6 +57,8 @@ function onKeyup(e: KeyboardEvent) { if (e.key === "Escape") { emit("escapePress"); + } else if (e.key === "Enter") { + emit("arrowRightPress"); } else if (e.key === "ArrowRight") { emit("arrowRightPress"); } else if (e.key === "ArrowLeft") { diff --git a/src/utils.ts b/src/utils.ts index 1ff37daf..d3aae6d0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -8,8 +8,9 @@ export function easeInOutQuad(elapsed: number, initialValue: number, amountOfCha } export function getFocusableElements(parentEls: Element[] | HTMLElement[]) { - const focusableQuery = - 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'; + const focusableQuery = getConfig("autoFocusNextButton") + ? "button.driver-popover-next-btn:not([disabled])" + : 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'; return parentEls .flatMap(parentEl => {