diff --git a/src/dom/__tests__/node-belongs.test.ts b/src/dom/__tests__/node-belongs.test.ts
new file mode 100644
index 0000000..7289742
--- /dev/null
+++ b/src/dom/__tests__/node-belongs.test.ts
@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { nodeBelongs } from '../node-belongs';
+
+describe('nodeBelongs', () => {
+  let div: HTMLDivElement;
+
+  beforeEach(() => {
+    div = document.createElement('div');
+    document.documentElement.appendChild(div);
+  });
+
+  afterEach(() => document.documentElement.removeChild(div));
+
+  test('returns "true", when the node and the container are the same element', () => {
+    div.innerHTML = `
+      <div id="container1"></div>
+    `;
+    expect(nodeBelongs(div.querySelector('#container1'), div.querySelector('#container1') as Node)).toBe(true);
+  });
+
+  test('returns "true", when the node is descendant from the container', () => {
+    div.innerHTML = `
+      <div id="container1">
+        <div id="node"></div>
+      </div>
+    `;
+    expect(nodeBelongs(div.querySelector('#container1'), div.querySelector('#node') as Node)).toBe(true);
+  });
+
+  test('returns "false", when the node is not a child of the container', () => {
+    div.innerHTML = `
+      <div id="container1"></div>
+      <div id="node"></div>
+    `;
+    expect(nodeBelongs(div.querySelector('#container1'), div.querySelector('#node') as Node)).toBe(false);
+  });
+
+  test('returns "true" when node belongs to a portal issued from within the container', () => {
+    div.innerHTML = `
+      <div id="container1">
+        <div id="portal"></div>
+      </div>
+      <div data-awsui-referrer-id="portal">
+        <div id="node"></div>
+      </div>
+    `;
+    expect(nodeBelongs(div.querySelector('#container1'), div.querySelector('#node') as Node)).toBe(true);
+  });
+
+  test('returns "true" when the node is a descendant of the container, both inside a portal', () => {
+    div.innerHTML = `
+      <div id="portal"></div>
+      <div data-awsui-referrer-id="portal">
+        <div id="container1">
+          <div id="node"></div>
+        </div>
+      </div>
+    `;
+    expect(nodeBelongs(div.querySelector('#container1'), div.querySelector('#node') as Node)).toBe(true);
+  });
+});
diff --git a/src/dom/node-belongs.ts b/src/dom/node-belongs.ts
new file mode 100644
index 0000000..5ffc3ba
--- /dev/null
+++ b/src/dom/node-belongs.ts
@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { findUpUntil, nodeContains } from '.';
+
+import { isHTMLElement, isNode } from './element-types';
+
+/**
+ * Checks whether the given node (target) belongs to the container.
+ * The function is similar to nodeContains but also accounts for dropdowns with expandToViewport=true.
+ *
+ * @param container Container node
+ * @param target Node that is checked to be a descendant of the container
+ */
+export function nodeBelongs(container: Node | null, target: Node | EventTarget | null): boolean {
+  if (!isNode(target)) {
+    return false;
+  }
+  const portal = findUpUntil(
+    target as HTMLElement,
+    node => node === container || (isHTMLElement(node) && !!node.dataset.awsuiReferrerId)
+  );
+  if (portal && portal === container) {
+    // We found the container as a direct ancestor without a portal
+    return true;
+  }
+  const referrer = isHTMLElement(portal) ? document.getElementById(portal.dataset.awsuiReferrerId ?? '') : null;
+  return referrer ? nodeContains(container, referrer) : nodeContains(container, target);
+}
diff --git a/src/internal/focus-lock/utils.ts b/src/internal/focus-lock/utils.ts
new file mode 100644
index 0000000..d4c11eb
--- /dev/null
+++ b/src/internal/focus-lock/utils.ts
@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Credits to
+// https://github.com/theKashey/focus-lock/blob/33f8b4bd9675d2605b15e2e4015b77fe35fbd6d0/src/utils/tabbables.ts
+const tabbables = [
+  'button:enabled',
+  'select:enabled',
+  'textarea:enabled',
+  'input:enabled',
+
+  'a[href]',
+  'area[href]',
+
+  'summary',
+  'iframe',
+  'object',
+  'embed',
+
+  'audio[controls]',
+  'video[controls]',
+
+  '[tabindex]',
+  '[contenteditable]',
+  '[autofocus]',
+].join(',');
+
+export function isFocusable(element: HTMLElement): boolean {
+  return element.matches(tabbables);
+}
+
+export function getAllFocusables(container: HTMLElement): HTMLElement[] {
+  return Array.prototype.slice.call(container.querySelectorAll(tabbables));
+}
+
+function getFocusables(container: HTMLElement): HTMLElement[] {
+  return getAllFocusables(container).filter((element: HTMLElement) => element.tabIndex !== -1);
+}
+
+export function getFirstFocusable(container: HTMLElement): null | HTMLElement {
+  const focusables = getFocusables(container);
+  return focusables[0] ?? null;
+}
+
+export function getLastFocusable(container: HTMLElement): null | HTMLElement {
+  const focusables = getFocusables(container);
+  return focusables[focusables.length - 1] ?? null;
+}
diff --git a/src/internal/single-tab-stop/__integ__/single-tab-stop.test.ts b/src/internal/single-tab-stop/__integ__/single-tab-stop.test.ts
new file mode 100644
index 0000000..cf572d0
--- /dev/null
+++ b/src/internal/single-tab-stop/__integ__/single-tab-stop.test.ts
@@ -0,0 +1,61 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+
+class SingleTabStopPage extends BasePageObject {
+  getActiveElementId() {
+    return this.browser.execute(function () {
+      return document.activeElement?.id;
+    });
+  }
+}
+
+describe('single tab stop', () => {
+  const setupTest = (testFn: (page: SingleTabStopPage) => Promise<void>) => {
+    return useBrowser(async browser => {
+      const page = new SingleTabStopPage(browser);
+      await browser.url('/single-tab-stop.page');
+      await testFn(page);
+    });
+  };
+
+  const beforeButton = 'button:nth-of-type(1)';
+
+  test(
+    'Expect focus to work as expected for horizontal buttons',
+    setupTest(async page => {
+      await page.click(beforeButton);
+      await page.keys('Tab');
+      await expect(page.getActiveElementId()).resolves.toBe('one');
+
+      await page.keys(['ArrowRight', 'ArrowRight', 'ArrowRight', 'ArrowRight']);
+      await expect(page.getActiveElementId()).resolves.toBe('two');
+    })
+  );
+
+  test(
+    'Expect focus to work as expected for vertical buttons',
+    setupTest(async page => {
+      await page.click(beforeButton);
+      await page.keys(['Tab', 'Tab']);
+      await expect(page.getActiveElementId()).resolves.toBe('four');
+
+      await page.keys(['ArrowDown', 'ArrowDown', 'ArrowDown', 'ArrowDown']);
+      await expect(page.getActiveElementId()).resolves.toBe('five');
+    })
+  );
+
+  test(
+    'Expect focus to not move with horizontal arrow keys for vertical buttons',
+    setupTest(async page => {
+      await page.click(beforeButton);
+      await page.keys(['Tab', 'Tab']);
+      await expect(page.getActiveElementId()).resolves.toBe('four');
+
+      await page.keys('ArrowRight');
+      await expect(page.getActiveElementId()).resolves.toBe('four');
+    })
+  );
+});
diff --git a/src/internal/single-tab-stop/__tests__/index.test.tsx b/src/internal/single-tab-stop/__tests__/index.test.tsx
new file mode 100644
index 0000000..af9748f
--- /dev/null
+++ b/src/internal/single-tab-stop/__tests__/index.test.tsx
@@ -0,0 +1,93 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useRef } from 'react';
+import { render, act } from '@testing-library/react';
+
+import { SingleTabStopNavigationContext, useSingleTabStopNavigation } from '../';
+import { renderWithSingleTabStopNavigation } from './utils';
+
+function Button(props: React.HTMLAttributes<HTMLButtonElement>) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const { tabIndex } = useSingleTabStopNavigation(buttonRef, { tabIndex: props.tabIndex });
+  return <button {...props} ref={buttonRef} tabIndex={tabIndex} />;
+}
+
+test('does not override tab index when keyboard navigation is not active', () => {
+  renderWithSingleTabStopNavigation(<Button id="button" />, { navigationActive: false });
+  expect(document.querySelector('#button')).not.toHaveAttribute('tabIndex');
+});
+
+test('does not override tab index for suppressed elements', () => {
+  const { setCurrentTarget } = renderWithSingleTabStopNavigation(
+    <div>
+      <Button id="button1" />
+      <Button id="button2" />
+      <Button id="button3" tabIndex={-1} />
+      <Button id="button4" />
+      <Button id="button5" tabIndex={-1} />
+    </div>,
+    { navigationActive: true }
+  );
+  act(() => {
+    setCurrentTarget(document.querySelector('#button1'), [
+      document.querySelector('#button1'),
+      document.querySelector('#button2'),
+      document.querySelector('#button3'),
+    ]);
+  });
+
+  expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '0');
+  expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '0');
+  expect(document.querySelector('#button3')).toHaveAttribute('tabIndex', '-1');
+  expect(document.querySelector('#button4')).toHaveAttribute('tabIndex', '-1');
+  expect(document.querySelector('#button5')).toHaveAttribute('tabIndex', '-1');
+});
+
+test('overrides tab index when keyboard navigation is active', () => {
+  const { setCurrentTarget } = renderWithSingleTabStopNavigation(
+    <div>
+      <Button id="button1" />
+      <Button id="button2" />
+    </div>
+  );
+  act(() => {
+    setCurrentTarget(document.querySelector('#button1'));
+  });
+  expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '0');
+  expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-1');
+});
+
+test('does not override explicit tab index with 0', () => {
+  const { setCurrentTarget } = renderWithSingleTabStopNavigation(
+    <div>
+      <Button id="button1" tabIndex={-2} />
+      <Button id="button2" tabIndex={-2} />
+    </div>
+  );
+  act(() => {
+    setCurrentTarget(document.querySelector('#button1'));
+  });
+  expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '-2');
+  expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-2');
+});
+
+test('propagates and suppresses navigation active state', () => {
+  function Component() {
+    const { navigationActive } = useSingleTabStopNavigation(null);
+    return <div>{String(navigationActive)}</div>;
+  }
+  function Test({ navigationActive }: { navigationActive: boolean }) {
+    return (
+      <SingleTabStopNavigationContext.Provider value={{ navigationActive, registerFocusable: () => () => {} }}>
+        <Component />
+      </SingleTabStopNavigationContext.Provider>
+    );
+  }
+
+  const { rerender } = render(<Test navigationActive={true} />);
+  expect(document.querySelector('div')).toHaveTextContent('true');
+
+  rerender(<Test navigationActive={false} />);
+  expect(document.querySelector('div')).toHaveTextContent('false');
+});
diff --git a/src/internal/single-tab-stop/__tests__/utils.tsx b/src/internal/single-tab-stop/__tests__/utils.tsx
new file mode 100644
index 0000000..03eb2d3
--- /dev/null
+++ b/src/internal/single-tab-stop/__tests__/utils.tsx
@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { createRef, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { render } from '@testing-library/react';
+
+import { FocusableChangeHandler, SingleTabStopNavigationContext } from '../';
+
+interface ProviderRef {
+  setCurrentTarget(focusTarget: null | Element, suppressed?: (null | Element)[]): void;
+}
+
+const FakeSingleTabStopNavigationProvider = forwardRef(
+  (
+    { children, navigationActive }: { children: React.ReactNode; navigationActive: boolean },
+    ref: React.Ref<ProviderRef>
+  ) => {
+    const focusablesRef = useRef(new Set<Element>());
+    const focusHandlersRef = useRef(new Map<Element, FocusableChangeHandler>());
+    const registerFocusable = useCallback((focusable: HTMLElement, changeHandler: FocusableChangeHandler) => {
+      focusablesRef.current.add(focusable);
+      focusHandlersRef.current.set(focusable, changeHandler);
+      return () => {
+        focusablesRef.current.delete(focusable);
+        focusHandlersRef.current.delete(focusable);
+      };
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      setCurrentTarget: (focusTarget: null | Element, suppressed: Element[] = []) => {
+        focusablesRef.current.forEach(focusable => {
+          const handler = focusHandlersRef.current.get(focusable)!;
+          handler(focusTarget === focusable || suppressed.includes(focusable));
+        });
+      },
+    }));
+
+    return (
+      <SingleTabStopNavigationContext.Provider value={{ registerFocusable, navigationActive }}>
+        {children}
+      </SingleTabStopNavigationContext.Provider>
+    );
+  }
+);
+
+export function renderWithSingleTabStopNavigation(
+  ui: React.ReactNode,
+  { navigationActive = true }: { navigationActive?: boolean } = {}
+) {
+  const providerRef = createRef<ProviderRef>();
+  const { container, rerender } = render(
+    <FakeSingleTabStopNavigationProvider ref={providerRef} navigationActive={navigationActive}>
+      {ui}
+    </FakeSingleTabStopNavigationProvider>
+  );
+  return {
+    container,
+    rerender,
+    setCurrentTarget: (focusTarget: null | Element, suppressed: (null | Element)[] = []) => {
+      if (!providerRef.current) {
+        throw new Error('Provider is not ready');
+      }
+      providerRef.current.setCurrentTarget(focusTarget, suppressed);
+    },
+  };
+}
diff --git a/src/internal/single-tab-stop/index.tsx b/src/internal/single-tab-stop/index.tsx
new file mode 100644
index 0000000..67e85be
--- /dev/null
+++ b/src/internal/single-tab-stop/index.tsx
@@ -0,0 +1,151 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { nodeBelongs } from '../../dom/node-belongs';
+
+export type FocusableChangeHandler = (isFocusable: boolean) => void;
+
+export const defaultValue: {
+  navigationActive: boolean;
+  registerFocusable(focusable: HTMLElement, handler: FocusableChangeHandler): () => void;
+} = {
+  navigationActive: false,
+  registerFocusable: () => () => {},
+};
+
+/**
+ * Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.
+ * It instructs interactive elements to override tab indices for just a single one to remain user-focusable.
+ */
+export const SingleTabStopNavigationContext = createContext(defaultValue);
+
+export function useSingleTabStopNavigation(
+  focusable: null | React.RefObject<HTMLElement>,
+  options?: { tabIndex?: number }
+) {
+  const { navigationActive: contextNavigationActive, registerFocusable } = useContext(SingleTabStopNavigationContext);
+  const [focusTargetActive, setFocusTargetActive] = useState(false);
+  const navigationDisabled = options?.tabIndex && options?.tabIndex < 0;
+  const navigationActive = contextNavigationActive && !navigationDisabled;
+
+  useLayoutEffect(() => {
+    if (navigationActive && focusable && focusable.current) {
+      const unregister = registerFocusable(focusable.current, isFocusable => setFocusTargetActive(isFocusable));
+      return () => unregister();
+    }
+  });
+
+  let tabIndex = options?.tabIndex;
+  if (navigationActive) {
+    tabIndex = !focusTargetActive ? -1 : options?.tabIndex ?? 0;
+  }
+
+  return { navigationActive, tabIndex };
+}
+
+interface SingleTabStopNavigationProviderProps {
+  navigationActive: boolean;
+  children: React.ReactNode;
+  getNextFocusTarget: () => null | HTMLElement;
+  isElementSuppressed?(focusableElement: Element): boolean;
+  onRegisterFocusable?(focusableElement: Element): void;
+  onUnregisterActive?(focusableElement: Element): void;
+}
+
+export interface SingleTabStopNavigationAPI {
+  updateFocusTarget(): void;
+  getFocusTarget(): null | HTMLElement;
+  isRegistered(element: Element): boolean;
+}
+
+export const SingleTabStopNavigationProvider = forwardRef(
+  (
+    {
+      navigationActive,
+      children,
+      getNextFocusTarget,
+      isElementSuppressed,
+      onRegisterFocusable,
+      onUnregisterActive,
+    }: SingleTabStopNavigationProviderProps,
+    ref: React.Ref<SingleTabStopNavigationAPI>
+  ) => {
+    // A set of registered focusable elements that can use keyboard navigation.
+    const focusables = useRef(new Set<Element>());
+    // A map of registered focusable element handlers to update the respective tab indices.
+    const focusHandlers = useRef(new Map<Element, FocusableChangeHandler>());
+    // A map of focusable element states to avoid issuing unnecessary updates to registered elements.
+    const focusablesState = useRef(new WeakMap<Element, boolean>());
+    // A reference to the currently focused element.
+    const focusTarget = useRef<null | HTMLElement>(null);
+
+    function onUnregisterFocusable(focusableElement: Element) {
+      const isUnregisteringFocusedNode = nodeBelongs(focusableElement, document.activeElement);
+      if (isUnregisteringFocusedNode) {
+        // Wait for unmounted node to get removed from the DOM.
+        setTimeout(() => onUnregisterActive?.(focusableElement), 0);
+      }
+    }
+
+    // Register a focusable element to allow navigating into it.
+    // The focusable element tabIndex is only set to 0 if the element matches the focus target.
+    function registerFocusable(focusableElement: Element, changeHandler: FocusableChangeHandler) {
+      focusables.current.add(focusableElement);
+
+      focusHandlers.current.set(focusableElement, changeHandler);
+      const isFocusable = !!focusablesState.current.get(focusableElement);
+      const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);
+      if (newIsFocusable !== isFocusable) {
+        focusablesState.current.set(focusableElement, newIsFocusable);
+        changeHandler(newIsFocusable);
+      }
+      onRegisterFocusable?.(focusableElement);
+      return () => unregisterFocusable(focusableElement);
+    }
+
+    function unregisterFocusable(focusableElement: Element) {
+      focusables.current.delete(focusableElement);
+      focusHandlers.current.delete(focusableElement);
+      onUnregisterFocusable?.(focusableElement);
+    }
+
+    // Update focus target with next single focusable element and notify all registered focusables of a change.
+    function updateFocusTarget() {
+      focusTarget.current = getNextFocusTarget();
+      for (const focusableElement of focusables.current) {
+        const isFocusable = focusablesState.current.get(focusableElement) ?? false;
+        const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);
+        if (newIsFocusable !== isFocusable) {
+          focusablesState.current.set(focusableElement, newIsFocusable);
+          focusHandlers.current.get(focusableElement)!(newIsFocusable);
+        }
+      }
+    }
+
+    function getFocusTarget() {
+      return focusTarget.current;
+    }
+
+    function isRegistered(element: Element) {
+      return focusables.current.has(element);
+    }
+
+    useImperativeHandle(ref, () => ({ updateFocusTarget, getFocusTarget, isRegistered }));
+
+    return (
+      <SingleTabStopNavigationContext.Provider value={{ navigationActive, registerFocusable }}>
+        {children}
+      </SingleTabStopNavigationContext.Provider>
+    );
+  }
+);
diff --git a/src/internal/single-tab-stop/keyboard-nav-util.tsx b/src/internal/single-tab-stop/keyboard-nav-util.tsx
new file mode 100644
index 0000000..55dbbf0
--- /dev/null
+++ b/src/internal/single-tab-stop/keyboard-nav-util.tsx
@@ -0,0 +1,131 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { SingleTabStopNavigationAPI, SingleTabStopNavigationProvider } from '../../../src/internal/single-tab-stop';
+
+import handleKey from '../../../src/internal/utils/handle-key';
+import { circleIndex } from '../../../src/internal/utils/circle-index';
+import { KeyCode } from '../../../src/internal/keycode';
+import { getAllFocusables } from '../../../src/internal/focus-lock/utils';
+
+export default function SingleTabStopKeyboardNav({
+  children,
+  matchId,
+  direction = 'horizontal',
+}: {
+  children: React.ReactNode;
+  matchId: string;
+  direction?: 'horizontal' | 'vertical';
+}) {
+  const navigationAPI = React.useRef<SingleTabStopNavigationAPI>(null);
+  const containerObjectRef = React.useRef<HTMLDivElement>(null);
+  const focusedIdRef = React.useRef<null | string>(null);
+
+  function onUnregisterActive(focusableElement: HTMLElement) {
+    // Only refocus when the node is actually removed (no such ID anymore).
+    const target = navigationAPI.current?.getFocusTarget();
+
+    if (target && target.dataset.itemid !== focusableElement.dataset.itemid) {
+      target.focus();
+    }
+  }
+
+  function getNextFocusTarget(): null | HTMLElement {
+    if (containerObjectRef.current) {
+      const buttons: HTMLButtonElement[] = Array.from(containerObjectRef.current.querySelectorAll(matchId));
+      return buttons.find(button => button.dataset.itemid === focusedIdRef.current) ?? buttons[0] ?? null;
+    }
+    return null;
+  }
+
+  React.useEffect(() => {
+    navigationAPI.current?.updateFocusTarget();
+  }, []);
+
+  function onFocus(event: React.FocusEvent) {
+    if (event.target instanceof HTMLElement && event.target.dataset.itemid) {
+      focusedIdRef.current = event.target.dataset.itemid;
+    }
+
+    navigationAPI.current?.updateFocusTarget();
+  }
+
+  function onBlur() {
+    navigationAPI.current?.updateFocusTarget();
+  }
+
+  function onKeyDown(event: React.KeyboardEvent) {
+    const focusTarget = navigationAPI.current?.getFocusTarget();
+    const specialKeys = [
+      KeyCode.right,
+      KeyCode.left,
+      KeyCode.up,
+      KeyCode.down,
+      KeyCode.end,
+      KeyCode.home,
+      KeyCode.pageUp,
+      KeyCode.pageDown,
+    ];
+
+    const hasModifierKeys = (event: React.MouseEvent | React.KeyboardEvent) => {
+      return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
+    };
+
+    if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
+      return;
+    }
+    if (!containerObjectRef.current || !focusTarget) {
+      return;
+    }
+    // Ignore navigation when the focused element is not an item.
+    if (document.activeElement && !document.activeElement.matches(matchId)) {
+      return;
+    }
+    event.preventDefault();
+
+    const focusables = getFocusablesFrom(containerObjectRef.current);
+
+    const activeIndex = focusables.indexOf(focusTarget);
+    handleKey(event as any, {
+      onHome: () => focusElement(focusables[0]),
+      onEnd: () => focusElement(focusables[focusables.length - 1]),
+      onInlineStart: () =>
+        direction === 'horizontal' &&
+        focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
+      onInlineEnd: () =>
+        direction === 'horizontal' &&
+        focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
+      onBlockStart: () =>
+        direction === 'vertical' && focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
+      onBlockEnd: () =>
+        direction === 'vertical' && focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
+    });
+  }
+
+  function focusElement(element: HTMLElement) {
+    element.focus();
+  }
+
+  // List all non-disabled and registered focusables: those are eligible for keyboard navigation.
+  function getFocusablesFrom(target: HTMLElement) {
+    function isElementRegistered(element: HTMLElement) {
+      return navigationAPI.current?.isRegistered(element) ?? false;
+    }
+
+    return getAllFocusables(target).filter(el => isElementRegistered(el));
+  }
+
+  return (
+    <div ref={containerObjectRef} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}>
+      <SingleTabStopNavigationProvider
+        ref={navigationAPI}
+        navigationActive={true}
+        getNextFocusTarget={getNextFocusTarget}
+        onUnregisterActive={onUnregisterActive}
+      >
+        {children}
+      </SingleTabStopNavigationProvider>
+    </div>
+  );
+}
diff --git a/src/internal/utils/circle-index.ts b/src/internal/utils/circle-index.ts
new file mode 100644
index 0000000..ca436cd
--- /dev/null
+++ b/src/internal/utils/circle-index.ts
@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Returns given index if it is in range or the opposite range boundary otherwise.
+export function circleIndex(index: number, [from, to]: [number, number]): number {
+  if (index < from) {
+    return to;
+  }
+  if (index > to) {
+    return from;
+  }
+  return index;
+}
diff --git a/src/internal/utils/handle-key.ts b/src/internal/utils/handle-key.ts
new file mode 100644
index 0000000..3d438fc
--- /dev/null
+++ b/src/internal/utils/handle-key.ts
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getIsRtl } from '../direction';
+
+import { KeyCode } from '../keycode';
+import { isHTMLElement, isSVGElement } from '../../dom/element-types';
+
+export function isEventLike(event: any): event is EventLike {
+  return isHTMLElement(event.currentTarget) || isSVGElement(event.currentTarget);
+}
+
+export interface EventLike {
+  keyCode: number;
+  currentTarget: HTMLElement | SVGElement;
+}
+
+export default function handleKey(
+  event: EventLike,
+  {
+    onActivate,
+    onBlockEnd,
+    onBlockStart,
+    onDefault,
+    onEnd,
+    onEscape,
+    onHome,
+    onInlineEnd,
+    onInlineStart,
+    onPageDown,
+    onPageUp,
+  }: {
+    onActivate?: () => void;
+    onBlockEnd?: () => void;
+    onBlockStart?: () => void;
+    onDefault?: () => void;
+    onEnd?: () => void;
+    onEscape?: () => void;
+    onHome?: () => void;
+    onInlineEnd?: () => void;
+    onInlineStart?: () => void;
+    onPageDown?: () => void;
+    onPageUp?: () => void;
+  }
+) {
+  switch (event.keyCode) {
+    case KeyCode.down:
+      onBlockEnd?.();
+      break;
+    case KeyCode.end:
+      onEnd?.();
+      break;
+    case KeyCode.enter:
+    case KeyCode.space:
+      onActivate?.();
+      break;
+    case KeyCode.escape:
+      onEscape?.();
+      break;
+    case KeyCode.home:
+      onHome?.();
+      break;
+    case KeyCode.left:
+      getIsRtl(event.currentTarget) ? onInlineEnd?.() : onInlineStart?.();
+      break;
+    case KeyCode.pageDown:
+      onPageDown?.();
+      break;
+    case KeyCode.pageUp:
+      onPageUp?.();
+      break;
+    case KeyCode.right:
+      getIsRtl(event.currentTarget) ? onInlineStart?.() : onInlineEnd?.();
+      break;
+    case KeyCode.up:
+      onBlockStart?.();
+      break;
+    default:
+      onDefault?.();
+      break;
+  }
+}
diff --git a/src/internal/utils/use-forward-focus.ts b/src/internal/utils/use-forward-focus.ts
new file mode 100644
index 0000000..dd1aa3d
--- /dev/null
+++ b/src/internal/utils/use-forward-focus.ts
@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useImperativeHandle } from 'react';
+
+export interface ForwardFocusRef {
+  focus(): void;
+}
+
+export default function useForwardFocus(
+  mainRef: React.Ref<any>,
+  controlRef: React.RefObject<{ focus: HTMLElement['focus'] }>
+) {
+  useImperativeHandle(
+    mainRef,
+    () => ({
+      focus(...args: Parameters<HTMLElement['focus']>) {
+        controlRef.current?.focus(...args);
+      },
+    }),
+    [controlRef]
+  );
+}
diff --git a/test-pages/src/pages/single-tab-stop.module.scss b/test-pages/src/pages/single-tab-stop.module.scss
new file mode 100644
index 0000000..672b2fc
--- /dev/null
+++ b/test-pages/src/pages/single-tab-stop.module.scss
@@ -0,0 +1,5 @@
+.vertical-container {
+  display: flex;
+  flex-direction: column;
+  inline-size: fit-content;
+}
diff --git a/test-pages/src/pages/single-tab-stop.page.tsx b/test-pages/src/pages/single-tab-stop.page.tsx
new file mode 100644
index 0000000..2d16dd2
--- /dev/null
+++ b/test-pages/src/pages/single-tab-stop.page.tsx
@@ -0,0 +1,61 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from 'react';
+import { useSingleTabStopNavigation } from '../../../src/internal/single-tab-stop';
+
+import SingleTabStopKeyboardNav from '../../../src/internal/single-tab-stop/keyboard-nav-util';
+import useForwardFocus from '../../../src/internal/utils/use-forward-focus';
+
+import styles from './single-tab-stop.module.scss';
+
+export default function SingleTabStop() {
+  const itemsRef = React.useRef<Record<string, any | null>>({});
+
+  return (
+    <div>
+      <button>Before</button>
+      <SingleTabStopKeyboardNav matchId="button">
+        Horizontal:
+        <TestButton id="one" ref={element => (itemsRef.current.one = element)}>
+          One
+        </TestButton>
+        <TestButton id="two" ref={element => (itemsRef.current.two = element)}>
+          Two
+        </TestButton>
+        <TestButton id="three" ref={element => (itemsRef.current.three = element)}>
+          Three
+        </TestButton>
+      </SingleTabStopKeyboardNav>
+      <SingleTabStopKeyboardNav matchId="button" direction="vertical">
+        Vertical:
+        <div className={styles['vertical-container']}>
+          <TestButton id="four" ref={element => (itemsRef.current.four = element)}>
+            Four
+          </TestButton>
+          <TestButton id="five" ref={element => (itemsRef.current.five = element)}>
+            Five
+          </TestButton>
+          <TestButton id="six" ref={element => (itemsRef.current.six = element)}>
+            Six
+          </TestButton>
+        </div>
+      </SingleTabStopKeyboardNav>
+      <button>After</button>
+    </div>
+  );
+}
+
+const TestButton = React.forwardRef(
+  ({ id, children }: { id: string; children: string }, ref: React.Ref<HTMLButtonElement | null>) => {
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    const { tabIndex } = useSingleTabStopNavigation(buttonRef);
+    useForwardFocus(ref, buttonRef);
+
+    return (
+      <button tabIndex={tabIndex} id={id} data-itemid={id} ref={buttonRef}>
+        {children}
+      </button>
+    );
+  }
+);