diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 11ab6a1c51..9a5d6362f5 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1946,6 +1946,10 @@ export namespace Components {
           * Closes the presented modal with the modal controller
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
+        /**
+          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+         */
+        "focusTrap": boolean;
         /**
           * If `true`, a backdrop will be displayed behind the modal.
          */
@@ -7147,6 +7151,10 @@ declare namespace LocalJSX {
         "dataTestId"?: string;
         "delegate"?: BalProps.FrameworkDelegate;
         "demo"?: boolean;
+        /**
+          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+         */
+        "focusTrap"?: boolean;
         /**
           * If `true`, a backdrop will be displayed behind the modal.
          */
diff --git a/packages/core/src/components/bal-modal/bal-modal.tsx b/packages/core/src/components/bal-modal/bal-modal.tsx
index 4a61e4bc0f..3e7f8c59c1 100644
--- a/packages/core/src/components/bal-modal/bal-modal.tsx
+++ b/packages/core/src/components/bal-modal/bal-modal.tsx
@@ -1,5 +1,5 @@
 import { Component, Host, h, State, Method, Listen, Prop, Event, EventEmitter, Element, writeTask } from '@stencil/core'
-import { dismiss, eventMethod, prepareOverlay } from '../../utils/overlays/overlays'
+import { dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay } from '../../utils/overlays/overlays'
 import { attachComponent, detachComponent } from '../../utils/framework-delegate'
 import { OverlayEventDetail, OverlayInterface } from './bal-modal.type'
 import { deepReady, wait } from '../../utils/helpers'
@@ -75,6 +75,25 @@ export class Modal implements OverlayInterface {
    */
   @Prop() backdropDismiss = true
 
+  /**
+   * If `true`, focus will not be allowed to move outside of this overlay.
+   * If `false`, focus will be allowed to move outside of the overlay.
+   *
+   * In most scenarios this property should remain set to `true`. Setting
+   * this property to `false` can cause severe accessibility issues as users
+   * relying on assistive technologies may be able to move focus into
+   * a confusing state. We recommend only setting this to `false` when
+   * absolutely necessary.
+   *
+   * Developers may want to consider disabling focus trapping if this
+   * overlay presents a non-Ionic overlay from a 3rd party library.
+   * Developers would disable focus trapping on the Ionic overlay
+   * when presenting the 3rd party overlay and then re-enable
+   * focus trapping when dismissing the 3rd party overlay and moving
+   * focus back to the Ionic overlay.
+   */
+  @Prop() focusTrap = true
+
   /**
    * @internal
    */
@@ -306,6 +325,7 @@ export class Modal implements OverlayInterface {
           'bal-modal': true,
           'bal-modal--is-closable': this.isClosable,
           'bal-modal--is-active': this.presented,
+          [FOCUS_TRAP_DISABLE_CLASS]: this.focusTrap === false,
           ...getClassMap(this.cssClass),
         }}
         style={{
diff --git a/packages/core/src/utils/overlays/focus-trap.ts b/packages/core/src/utils/overlays/focus-trap.ts
new file mode 100644
index 0000000000..cb03961579
--- /dev/null
+++ b/packages/core/src/utils/overlays/focus-trap.ts
@@ -0,0 +1,103 @@
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have `hidden`
+ * 3. Element does not have `disabled` for non-Ionic components.
+ * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
+ * Note: We need this distinction because `disabled="false"` is
+ * valid usage for the disabled property on bal-button.
+ */
+export const focusableQueryString =
+  '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .bal-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .bal-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])'
+
+/**
+ * Focuses the first descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusFirstDescendant = <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T) => {
+  const firstInput = ref.querySelector<HTMLElement>(focusableQueryString)
+  debugger
+  focusElementInContext(firstInput, fallbackElement ?? ref)
+}
+
+/**
+ * Focuses the last descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export const focusLastDescendant = <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T) => {
+  const inputs = Array.from(ref.querySelectorAll<HTMLElement>(focusableQueryString))
+  const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null
+
+  focusElementInContext(lastInput, fallbackElement ?? ref)
+}
+
+/**
+ * Focuses a particular element in a context. If the element
+ * doesn't have anything focusable associated with it then
+ * a fallback element will be focused.
+ *
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an bal-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of bal-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInContext = <T extends HTMLElement>(
+  hostToFocus: HTMLElement | null | undefined,
+  fallbackElement: T,
+) => {
+  let elementToFocus = hostToFocus
+
+  const shadowRoot = hostToFocus?.shadowRoot
+  if (shadowRoot) {
+    // If there are no inner focusable elements, just focus the host element.
+    elementToFocus = shadowRoot.querySelector<HTMLElement>(focusableQueryString) || hostToFocus
+  }
+
+  if (elementToFocus) {
+    focusVisibleElement(elementToFocus)
+  } else {
+    // Focus fallback element instead of letting focus escape
+    fallbackElement.focus()
+  }
+}
+
+export const focusVisibleElement = (el: HTMLElement) => {
+  el.focus()
+
+  /**
+   * When programmatically focusing an element,
+   * the focus-visible utility will not run because
+   * it is expecting a keyboard event to have triggered this;
+   * however, there are times when we need to manually control
+   * this behavior so we call the `setFocus` method on bal-app
+   * which will let us explicitly set the elements to focus.
+   */
+  if (el.classList.contains('bal-focusable')) {
+    const app = el.closest('bal-app')
+    if (app) {
+      app.setFocus([el])
+    }
+  }
+}
diff --git a/packages/core/src/utils/overlays/overlays.ts b/packages/core/src/utils/overlays/overlays.ts
index ecc51f36a7..63b827f300 100644
--- a/packages/core/src/utils/overlays/overlays.ts
+++ b/packages/core/src/utils/overlays/overlays.ts
@@ -1,6 +1,7 @@
 import { HTMLStencilElement } from '@stencil/core/internal'
 import { balBrowser } from '../browser'
 import { addEventListener, removeEventListener } from '../helpers'
+import { focusableQueryString, focusFirstDescendant, focusLastDescendant, focusVisibleElement } from './focus-trap'
 
 type OverlayInterface = any
 
@@ -18,6 +19,8 @@ export type BackButtonEvent = CustomEvent<BackButtonEventDetail>
 
 export interface HTMLBalOverlayElement extends HTMLStencilElement {
   overlayIndex: number
+  lastFocus: HTMLElement
+  el: HTMLBalOverlayElement
   dismiss(data?: any, role?: string): Promise<boolean>
 }
 
@@ -48,6 +51,13 @@ export const getOverlay = (doc: Document, overlayTag?: string, id?: string): HTM
 export const connectListeners = (doc: Document) => {
   if (lastId === 0) {
     lastId = 1
+    doc.addEventListener(
+      'focus',
+      (ev: FocusEvent) => {
+        trapKeyboardFocus(ev, doc)
+      },
+      true,
+    )
 
     // handle ESC to close overlay
     doc.addEventListener('keyup', ev => {
@@ -61,6 +71,188 @@ export const connectListeners = (doc: Document) => {
   }
 }
 
+export const getPresentedOverlay = (
+  doc: Document,
+  overlayTag?: string,
+  id?: string,
+): HTMLBalOverlayElement | undefined => {
+  const overlays = getPresentedOverlays(doc, overlayTag)
+  return id === undefined ? overlays[overlays.length - 1] : overlays.find(o => o.id === id)
+}
+
+const getPresentedOverlays = (doc: Document, overlayTag?: string): HTMLBalOverlayElement[] => {
+  return getOverlays(doc, overlayTag).filter(o => !isOverlayHidden(o))
+  // return getOverlays(doc, overlayTag);
+}
+
+const isOverlayHidden = (overlay: Element) => overlay.classList.contains('is-hidden') // TODO: is this the right class?
+
+const trapKeyboardFocus = (ev: Event, doc: Document) => {
+  const lastOverlay = getPresentedOverlay(doc, 'bal-modal')
+  const target = ev.target as HTMLElement | null
+
+  /**
+   * If no active overlay, ignore this event.
+   *
+   * If this component uses the shadow dom,
+   * this global listener is pointless
+   * since it will not catch the focus
+   * traps as they are inside the shadow root.
+   * We need to add a listener to the shadow root
+   * itself to ensure the focus trap works.
+   */
+  if (!lastOverlay || !target) {
+    return
+  }
+
+  const trapScopedFocus = () => {
+    /**
+     * If we are focusing the overlay, clear
+     * the last focused element so that hitting
+     * tab activates the first focusable element
+     * in the overlay wrapper.
+     */
+    if (lastOverlay === target) {
+      lastOverlay.lastFocus = undefined
+      /**
+       * Toasts can be presented from an overlay.
+       * However, focus should still be returned to
+       * the overlay when clicking a toast. Normally,
+       * focus would be returned to the last focusable
+       * descendant in the overlay which may not always be
+       * the button that the toast was presented from. In this case,
+       * the focus may be returned to an unexpected element.
+       * To account for this, we make sure to return focus to the
+       * last focused element in the overlay if focus is
+       * moved to the toast.
+       */
+    } else {
+      /**
+       * We do not want to focus the traps, so get the overlay
+       * wrapper element as the traps live outside of the wrapper.
+       */
+      const overlayRoot = lastOverlay
+
+      /* // TODO we currently do not know why this code is needed, it just works without this code
+      if (!overlayRoot.contains(target)) {
+        console.log("!overlayRoot.contains(target)", target, lastOverlay)
+        return;
+      }
+       */
+
+      const overlayWrapper = overlayRoot.querySelector<HTMLElement>('.bal-modal__container')
+      if (!overlayWrapper) {
+        return
+      }
+
+      /**
+       * If the target is inside the wrapper, let the browser
+       * focus as normal and keep a log of the last focused element.
+       * Additionally, if the backdrop was tapped we should not
+       * move focus back inside the wrapper as that could cause
+       * an interactive elements focus state to activate.
+       */
+      if (overlayWrapper.contains(target) || target === overlayRoot.querySelector('bal-modal__background')) {
+        lastOverlay.lastFocus = target
+      } else {
+        /**
+         * Otherwise, we must have focused one of the focus traps.
+         * We need to wrap the focus to either the first element
+         * or the last element.
+         */
+
+        /**
+         * Once we call `focusFirstDescendant` and focus the first
+         * descendant, another focus event will fire which will
+         * cause `lastOverlay.lastFocus` to be updated before
+         * we can run the code after that. We will cache the value
+         * here to avoid that.
+         */
+        const lastFocus = lastOverlay.lastFocus
+
+        // Focus the first element in the overlay wrapper
+        focusFirstDescendant(overlayWrapper, lastOverlay)
+
+        /**
+         * If the cached last focused element is the
+         * same as the active element, then we need
+         * to wrap focus to the last descendant. This happens
+         * when the first descendant is focused, and the user
+         * presses Shift + Tab. The previous line will focus
+         * the same descendant again (the first one), causing
+         * last focus to equal the active element.
+         */
+        if (lastFocus === doc.activeElement) {
+          focusLastDescendant(overlayWrapper, lastOverlay)
+        }
+        lastOverlay.lastFocus = doc.activeElement as HTMLElement
+      }
+    }
+  }
+  const trapShadowFocus = () => {
+    /**
+     * If the target is inside the wrapper, let the browser
+     * focus as normal and keep a log of the last focused element.
+     */
+    if (lastOverlay.contains(target)) {
+      lastOverlay.lastFocus = target
+      /**
+       * Toasts can be presented from an overlay.
+       * However, focus should still be returned to
+       * the overlay when clicking a toast. Normally,
+       * focus would be returned to the last focusable
+       * descendant in the overlay which may not always be
+       * the button that the toast was presented from. In this case,
+       * the focus may be returned to an unexpected element.
+       * To account for this, we make sure to return focus to the
+       * last focused element in the overlay if focus is
+       * moved to the toast.
+       */
+    } else if (target.tagName === 'BAL-TOAST') {
+      focusElementInOverlay(lastOverlay.lastFocus, lastOverlay)
+    } else {
+      /**
+       * Otherwise, we are about to have focus
+       * go out of the overlay. We need to wrap
+       * the focus to either the first element
+       * or the last element.
+       */
+
+      /**
+       * Once we call `focusFirstDescendant` and focus the first
+       * descendant, another focus event will fire which will
+       * cause `lastOverlay.lastFocus` to be updated before
+       * we can run the code after that. We will cache the value
+       * here to avoid that.
+       */
+      const lastFocus = lastOverlay.lastFocus
+
+      // Focus the first element in the overlay wrapper
+      focusFirstDescendant(lastOverlay)
+
+      /**
+       * If the cached last focused element is the
+       * same as the active element, then we need
+       * to wrap focus to the last descendant. This happens
+       * when the first descendant is focused, and the user
+       * presses Shift + Tab. The previous line will focus
+       * the same descendant again (the first one), causing
+       * last focus to equal the active element.
+       */
+      if (lastFocus === doc.activeElement) {
+        focusLastDescendant(lastOverlay)
+      }
+      lastOverlay.lastFocus = doc.activeElement as HTMLElement
+    }
+  }
+
+  if (lastOverlay.shadowRoot) {
+    trapShadowFocus()
+  } else {
+    trapScopedFocus()
+  }
+}
+
 export const dismiss = async (
   overlay: OverlayInterface,
   data: any | undefined,
@@ -103,3 +295,35 @@ export const onceEvent = (element: HTMLElement, eventName: string, callback: (ev
   }
   addEventListener(element, eventName, handler)
 }
+
+/**
+ * Focuses a particular element in an overlay. If the element
+ * doesn't have anything focusable associated with it then
+ * the overlay itself will be focused.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an bal-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of bal-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInOverlay = (hostToFocus: HTMLElement | null | undefined, overlay: HTMLBalOverlayElement) => {
+  let elementToFocus = hostToFocus
+
+  const shadowRoot = hostToFocus?.shadowRoot
+  if (shadowRoot) {
+    // If there are no inner focusable elements, just focus the host element.
+    elementToFocus = shadowRoot.querySelector<HTMLElement>(focusableQueryString) || hostToFocus
+  }
+
+  if (elementToFocus) {
+    focusVisibleElement(elementToFocus)
+  } else {
+    // Focus overlay instead of letting focus escape
+    overlay.focus()
+  }
+}
+
+export const FOCUS_TRAP_DISABLE_CLASS = 'bal-disable-focus-trap'