diff --git a/.tool-versions b/.tool-versions
index 2e283ef11..109bcfbd4 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,2 +1,2 @@
-nodejs 20.18.2
+nodejs 20.19.0
 pnpm 9.15.4
diff --git a/shepherd.js/rollup.config.mjs b/shepherd.js/rollup.config.mjs
index 1ca45a299..901042aeb 100644
--- a/shepherd.js/rollup.config.mjs
+++ b/shepherd.js/rollup.config.mjs
@@ -56,9 +56,7 @@ const plugins = [
 
 // If we are running with --environment DEVELOPMENT, serve via browsersync for local development
 if (process.env.DEVELOPMENT) {
-  plugins.push(
-    serve({ contentBase: ['.', 'dist', 'dummy'], open: true })
-  );
+  plugins.push(serve({ contentBase: ['.', 'dist', 'dummy'], open: true }));
   plugins.push(livereload());
 }
 
diff --git a/shepherd.js/src/components/shepherd-element.svelte b/shepherd.js/src/components/shepherd-element.svelte
index 81f3978ec..fb0c9d565 100644
--- a/shepherd.js/src/components/shepherd-element.svelte
+++ b/shepherd.js/src/components/shepherd-element.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, afterUpdate } from 'svelte';
+  import { onDestroy, onMount, afterUpdate } from 'svelte';
   import ShepherdContent from './shepherd-content.svelte';
   import { isUndefined, isString } from '../utils/type-check.ts';
 
@@ -8,13 +8,20 @@
   const LEFT_ARROW = 37;
   const RIGHT_ARROW = 39;
 
-  export let classPrefix,
+  export let attachToElement,
+    attachTofocusableDialogElements,
+    classPrefix,
     element,
     descriptionId,
-    firstFocusableElement,
-    focusableElements,
+    // Focusable attachTo elements
+    focusableAttachToElements,
+    firstFocusableAttachToElement,
+    lastFocusableAttachToElement,
+    // Focusable dialog elements
+    firstFocusableDialogElement,
+    focusableDialogElements,
+    lastFocusableDialogElement,
     labelId,
-    lastFocusableElement,
     step,
     dataStepId;
 
@@ -33,11 +40,35 @@
   onMount(() => {
     // Get all elements that are focusable
     dataStepId = { [`data-${classPrefix}shepherd-step-id`]: step.id };
-    focusableElements = element.querySelectorAll(
-      'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'
-    );
-    firstFocusableElement = focusableElements[0];
-    lastFocusableElement = focusableElements[focusableElements.length - 1];
+    focusableDialogElements = [
+      ...element.querySelectorAll(
+        'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'
+      )
+    ];
+    firstFocusableDialogElement = focusableDialogElements[0];
+    lastFocusableDialogElement =
+      focusableDialogElements[focusableDialogElements.length - 1];
+
+    const attachTo = step._getResolvedAttachToOptions();
+    if (attachTo?.element) {
+      attachToElement = attachTo.element;
+      attachToElement.tabIndex = 0;
+      focusableAttachToElements = [
+        attachToElement,
+        ...attachToElement.querySelectorAll(
+          'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'
+        )
+      ];
+      firstFocusableAttachToElement = focusableAttachToElements[0];
+      lastFocusableAttachToElement =
+        focusableAttachToElements[focusableAttachToElements.length - 1];
+      // Add keydown listener to attachTo element
+      attachToElement.addEventListener('keydown', handleKeyDown);
+    }
+  });
+
+  onDestroy(() => {
+    attachToElement?.removeEventListener('keydown', handleKeyDown);
   });
 
   afterUpdate(() => {
@@ -85,23 +116,43 @@
     const { tour } = step;
     switch (e.keyCode) {
       case KEY_TAB:
-        if (focusableElements.length === 0) {
+        if (
+          (!focusableAttachToElements ||
+            focusableAttachToElements.length === 0) &&
+          focusableDialogElements.length === 0
+        ) {
           e.preventDefault();
           break;
         }
         // Backward tab
         if (e.shiftKey) {
+          // If at the beginning of elements in the dialog, go to last element in attachTo
+          // If attachToElement is undefined, circle around to the last element in the dialog.
           if (
-            document.activeElement === firstFocusableElement ||
+            document.activeElement === firstFocusableDialogElement ||
             document.activeElement.classList.contains('shepherd-element')
           ) {
             e.preventDefault();
-            lastFocusableElement.focus();
+            (
+              lastFocusableAttachToElement ?? lastFocusableDialogElement
+            ).focus();
+          }
+          // If at the beginning of elements in attachTo
+          else if (document.activeElement === firstFocusableAttachToElement) {
+            e.preventDefault();
+            lastFocusableDialogElement.focus();
           }
         } else {
-          if (document.activeElement === lastFocusableElement) {
+          if (document.activeElement === lastFocusableDialogElement) {
+            e.preventDefault();
+            (
+              firstFocusableAttachToElement ?? firstFocusableDialogElement
+            ).focus();
+          }
+          // If at the end of elements in attachTo
+          else if (document.activeElement === lastFocusableAttachToElement) {
             e.preventDefault();
-            firstFocusableElement.focus();
+            firstFocusableDialogElement.focus();
           }
         }
         break;
diff --git a/shepherd.js/src/utils/floating-ui.ts b/shepherd.js/src/utils/floating-ui.ts
index f14436cbf..edeaa0264 100644
--- a/shepherd.js/src/utils/floating-ui.ts
+++ b/shepherd.js/src/utils/floating-ui.ts
@@ -106,6 +106,7 @@ function setPosition(
       // Replaces focusAfterRender modifier.
       .then((step: Step) => {
         if (step?.el) {
+          step.el.tabIndex = 0;
           step.el.focus({ preventScroll: true });
         }
       })
diff --git a/test/cypress/dummy/index.html b/test/cypress/dummy/index.html
index 4025666e1..e4363d25a 100644
--- a/test/cypress/dummy/index.html
+++ b/test/cypress/dummy/index.html
@@ -120,6 +120,12 @@ <h3>Example</h3>
         <div>
           <img src="sheep.svg" />
         </div>
+
+        <div id="complex-attach-to" tabindex="0">
+          <button id="nested-button-1">Button 1</button>
+          <input id="nested-input" type="text" placeholder="Input" />
+          <button id="nested-button-2">Button 2</button>
+        </div>
       </div>
     </div>
 
diff --git a/test/cypress/integration/a11y.cy.js b/test/cypress/integration/a11y.cy.js
index 2944120b9..a64a77d74 100644
--- a/test/cypress/integration/a11y.cy.js
+++ b/test/cypress/integration/a11y.cy.js
@@ -9,7 +9,7 @@ describe('a11y', () => {
     cy.visit('/dummy/', {
       onLoad(contentWindow) {
         if (contentWindow.Shepherd) {
-          return Shepherd = contentWindow.Shepherd;
+          return (Shepherd = contentWindow.Shepherd);
         }
       }
     });
@@ -19,7 +19,9 @@ describe('a11y', () => {
     let tour;
 
     beforeEach(() => {
-      tour = setupTour(Shepherd);
+      tour = setupTour(Shepherd, {}, null, {
+        useModalOverlay: true
+      });
     });
 
     afterEach(() => {
@@ -29,7 +31,292 @@ describe('a11y', () => {
     it('shepherd-element should have focus on tour start', () => {
       tour.start();
 
-      cy.get('.shepherd-element').should('have.focus');
+      cy.document().then(() => {
+        cy.wait(1000);
+        cy.get('.shepherd-element').should('have.focus');
+      });
+    });
+  });
+
+  describe('focus trapping', () => {
+    let tour;
+
+    beforeEach(() => {
+      // Remove extra elements to prevent scrolling issues
+      cy.document().then((document) => {
+        const heroFollowup = document.querySelector('.hero-followup');
+        heroFollowup?.remove();
+        const img = document.querySelector('img');
+        img?.remove();
+      });
+    });
+
+    afterEach(() => {
+      tour?.complete();
+    });
+
+    describe('without attachTo element', () => {
+      beforeEach(() => {
+        // Create a tour without attachTo elements
+        tour = new Shepherd.Tour({
+          defaultStepOptions: {
+            classes: 'shepherd-theme-arrows',
+            scrollTo: true
+          }
+        });
+
+        tour.addStep({
+          title: 'Test Step',
+          text: 'Testing focus trap without attachTo',
+          buttons: [
+            {
+              text: 'Cancel',
+              classes: 'shepherd-button-secondary cancel-button',
+              action: tour.cancel
+            },
+            {
+              text: 'Back',
+              classes: 'shepherd-button-secondary back-button',
+              action: tour.back
+            },
+            {
+              text: 'Next',
+              classes: 'shepherd-button-primary next-button',
+              action: tour.next
+            }
+          ],
+          cancelIcon: {
+            enabled: true
+          }
+        });
+      });
+
+      it('tabs forward through dialog elements and wraps to first', () => {
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+          // Start should focus the dialog
+          cy.get('.shepherd-element').should('have.focus');
+
+          // Tab through dialog elements - start from body to get consistent behavior
+          cy.focused().tab(); // to close button
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+
+          cy.focused().tab(); // to cancel button
+          cy.get('.cancel-button').should('have.focus');
+
+          cy.focused().tab(); // to back button
+          cy.get('.back-button').should('have.focus');
+
+          cy.focused().tab(); // to next button
+          cy.get('.next-button').should('have.focus');
+
+          // Tab from last button should wrap to first (close button)
+          cy.focused().tab();
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+        });
+      });
+
+      it('tabs backward through dialog elements and wraps to last', () => {
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+          // Start at close button
+          cy.focused().tab();
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+
+          // Shift+tab should wrap to last button
+          cy.focused().tab({ shift: true });
+          cy.get('.next-button').should('have.focus');
+
+          // Continue shift+tabbing backward
+          cy.focused().tab({ shift: true });
+          cy.get('.back-button').should('have.focus');
+
+          cy.focused().tab({ shift: true });
+          cy.get('.cancel-button').should('have.focus');
+
+          cy.focused().tab({ shift: true });
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+        });
+      });
+
+      it('prevents focus from escaping to page elements', () => {
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+          // Start at close button
+          cy.get('body').tab();
+
+          // Try to tab out of modal multiple times
+          cy.focused().tab().tab().tab().tab().tab().tab();
+
+          // Should still be within dialog elements
+          cy.focused().should('satisfy', ($el) => {
+            return $el.closest('.shepherd-element').length > 0;
+          });
+        });
+      });
+    });
+
+    describe('with attachTo element', () => {
+      beforeEach(() => {
+        tour = setupTour(Shepherd, {}, null, {
+          useModalOverlay: true
+        });
+      });
+
+      it('includes attachTo element in focus trap and tabs in correct order', () => {
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+
+          // First tab must be from body to enter focus trap
+          cy.focused().tab(); // to close button
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+
+          cy.focused().tab();
+          cy.get('[data-test-popper-link]').should('have.focus');
+
+          cy.focused().tab();
+          cy.get('.cancel-button').should('have.focus');
+
+          cy.focused().tab();
+          cy.get('.next-button').should('have.focus');
+
+          // Tab from last dialog element should go to attachTo element
+          cy.focused().tab();
+          cy.get('.hero-welcome').should('have.focus');
+
+          // Tab from attachTo should go back to first dialog element
+          cy.focused().tab();
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+        });
+      });
+
+      it('handles backward tabbing with attachTo element', () => {
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+
+          // First tab from body to enter focus trap
+          cy.focused().tab();
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+
+          // Shift+tab from first dialog element should go to attachTo
+          cy.focused().tab({ shift: true });
+          cy.get('.hero-welcome').should('have.focus');
+
+          // Shift+tab from attachTo should go to last dialog element
+          cy.focused().tab({ shift: true });
+          cy.get('.next-button').should('have.focus');
+
+          // Continue shift+tabbing backward through dialog
+          cy.focused().tab({ shift: true });
+          cy.get('.cancel-button').should('have.focus');
+
+          cy.focused().tab({ shift: true });
+          cy.get('[data-test-popper-link]').should('have.focus');
+
+          cy.focused().tab({ shift: true });
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+        });
+      });
+
+      it('maintains focus trap boundaries with attachTo element', () => {
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+
+          cy.get('body')
+            .tab()
+            .tab()
+            .tab()
+            .tab()
+            .tab()
+            .tab()
+            .tab()
+            .tab()
+            .tab()
+            .tab();
+
+          // Should still be within dialog or attachTo element
+          cy.focused().should('satisfy', ($el) => {
+            const isInDialog = $el.closest('.shepherd-element').length > 0;
+            const isAttachTo = $el.is('.hero-welcome');
+            return isInDialog || isAttachTo;
+          });
+        });
+      });
+
+      it('handles attachTo element with focusable children', () => {
+        tour = new Shepherd.Tour({
+          defaultStepOptions: {
+            cancelIcon: {
+              enabled: true
+            },
+            classes: 'shepherd-theme-arrows',
+            scrollTo: true
+          },
+          useModalOverlay: true
+        });
+
+        tour.addStep({
+          title: 'Complex AttachTo Test',
+          text: 'Testing with complex attachTo element',
+          attachTo: {
+            element: '#complex-attach-to',
+            on: 'bottom'
+          },
+          buttons: [
+            {
+              text: 'Next',
+              classes: 'next-button',
+              action: tour.next
+            }
+          ]
+        });
+
+        tour.start();
+
+        cy.document().then(() => {
+          cy.wait(1000);
+
+          cy.focused().tab();
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+
+          cy.focused().tab();
+          cy.get('.next-button').should('have.focus');
+
+          // Tab to attachTo elements
+          cy.focused().tab();
+          cy.get('#complex-attach-to').should('have.focus'); // Parent first
+
+          cy.focused().tab();
+          cy.get('#nested-button-1').should('have.focus');
+
+          cy.focused().tab();
+          cy.get('#nested-input').should('have.focus');
+
+          cy.focused().tab();
+          cy.get('#nested-button-2').should('have.focus');
+
+          // Tab from last attachTo child should go back to dialog
+          cy.focused().tab();
+          cy.get('.shepherd-cancel-icon').should('have.focus');
+        });
+
+        // Clean up the test element
+        cy.get('#complex-attach-to').then(($el) => {
+          $el.remove();
+        });
+      });
     });
   });
 
@@ -37,14 +324,16 @@ describe('a11y', () => {
     let tour;
 
     beforeEach(() => {
-      tour = setupTour(Shepherd);
+      tour = setupTour(Shepherd, {}, null, {
+        useModalOverlay: true
+      });
 
-      // This is a hack removing the extra page elements so the page does not scroll. Cypress hates scrolling for some reason.
+      // Remove extra elements to prevent scrolling issues
       cy.document().then((document) => {
         const heroFollowup = document.querySelector('.hero-followup');
-        heroFollowup.remove();
+        heroFollowup?.remove();
         const img = document.querySelector('img');
-        img.remove();
+        img?.remove();
       });
     });
 
@@ -77,7 +366,7 @@ describe('a11y', () => {
         cy.wait(1000);
         // Tabbing out of the modal should not be possible and we test this by tabbing from the body
         cy.get('body').tab().tab().tab().tab().tab().tab();
-        cy.get('[data-test-popper-link]').should('have.focus');
+        cy.get('.hero-welcome').should('have.focus');
       });
     });
   });
diff --git a/test/cypress/utils/default-steps.js b/test/cypress/utils/default-steps.js
index 254635208..7fe28298f 100644
--- a/test/cypress/utils/default-steps.js
+++ b/test/cypress/utils/default-steps.js
@@ -20,11 +20,11 @@ export default function(shepherd) {
       buttons: [
         {
           action: shepherd.cancel,
-          classes: 'shepherd-button-secondary',
+          classes: 'shepherd-button-secondary cancel-button',
           text: 'Exit'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
+          classes: 'shepherd-button-example-primary next-button',
           text: 'Next'
         }
       ],
@@ -40,11 +40,11 @@ export default function(shepherd) {
       buttons: [
         {
           action: shepherd.back,
-          classes: 'shepherd-button-secondary',
+          classes: 'shepherd-button-secondary back-button',
           text: 'Back'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
+          classes: 'shepherd-button-example-primary next-button',
           text: 'Next'
         }
       ],
@@ -61,11 +61,11 @@ export default function(shepherd) {
       buttons: [
         {
           action: shepherd.back,
-          classes: 'shepherd-button-secondary',
+          classes: 'shepherd-button-secondary back-button',
           text: 'Back'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
+          classes: 'shepherd-button-example-primary next-button',
           text: 'Next'
         }
       ],
@@ -82,11 +82,11 @@ export default function(shepherd) {
       buttons: [
         {
           action: shepherd.back,
-          classes: 'shepherd-button-secondary',
+          classes: 'shepherd-button-secondary back-button',
           text: 'Back'
         }, {
           action: shepherd.next,
-          classes: 'shepherd-button-example-primary',
+          classes: 'shepherd-button-example-primary next-button',
           text: 'Done'
         }
       ],
diff --git a/test/cypress/utils/setup-tour.js b/test/cypress/utils/setup-tour.js
index a99728a00..a2c79a6cb 100644
--- a/test/cypress/utils/setup-tour.js
+++ b/test/cypress/utils/setup-tour.js
@@ -7,20 +7,31 @@ import defaultSteps from './default-steps';
  * @param {function} customSteps An array of the steps to add to the tour
  * @param {Object} otherOptions A hash of other options to pass to Shepherd
  */
-export default function(Shepherd, globalDefaults, customSteps, otherOptions) {
-  const defaultStepOptions = Object.assign({}, {
-    cancelIcon: {
-      enabled: true
-    }
-  }, globalDefaults);
+export default function (Shepherd, globalDefaults, customSteps, otherOptions) {
+  const defaultStepOptions = Object.assign(
+    {},
+    {
+      cancelIcon: {
+        enabled: true
+      }
+    },
+    globalDefaults
+  );
 
-  const shepherdOptions = Object.assign({}, {
-    defaultStepOptions
-  }, otherOptions);
+  const shepherdOptions = Object.assign(
+    {},
+    {
+      defaultStepOptions,
+    },
+    otherOptions
+  );
 
   const shepherd = new Shepherd.Tour(shepherdOptions);
 
-  const steps = typeof customSteps === 'function' ? customSteps(shepherd) : defaultSteps(shepherd);
+  const steps =
+    typeof customSteps === 'function'
+      ? customSteps(shepherd)
+      : defaultSteps(shepherd);
 
   shepherd.addSteps(steps);