Use Enter as next button and add a new config param

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 @@ <h2>Highlight Feature</h2>
         <button id="disabled-buttons">Disabled Buttons</button>
         <button id="button-config-events">Button Listeners</button>
         <button id="button-tour-events">Tour Button Listeners</button>
+        <button id="button-autofocus-next">Auto Focus Next Button</button>
         <button id="popover-hook-config">Popover Modified in Hook</button>
       </div>
 
@@ -853,6 +855,18 @@ <h2>Usage and Demo</h2>
 
         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 @@ <h2>Usage and Demo</h2>
           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 @@ <h2>Usage and Demo</h2>
           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",
           },

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;

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

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") {

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