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 => {