diff --git a/src/dom/__tests__/node-belongs.test.ts b/src/dom/__tests__/node-belongs.test.ts
new file mode 100644
index 0000000..950597c
--- /dev/null
+++ b/src/dom/__tests__/node-belongs.test.ts
@@ -0,0 +1,67 @@
+// 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);
+  });
+
+  test('returns false if target is not a node', () => {
+    expect(nodeBelongs(div.querySelector('#container1'), {} as any)).toBe(false);
+  });
+});
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/utils.ts b/src/internal/focus-lock-utils/utils.ts
new file mode 100644
index 0000000..d4c11eb
--- /dev/null
+++ b/src/internal/focus-lock-utils/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/__tests__/context.test.tsx b/src/internal/single-tab-stop/__tests__/context.test.tsx
new file mode 100644
index 0000000..7b812c0
--- /dev/null
+++ b/src/internal/single-tab-stop/__tests__/context.test.tsx
@@ -0,0 +1,98 @@
+// 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('subscribed components can be rendered outside single tab stop navigation context', () => {
+  render(<Button />);
+  expect(document.querySelector('button')).not.toHaveAttribute('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__/register.test.tsx b/src/internal/single-tab-stop/__tests__/register.test.tsx
new file mode 100644
index 0000000..6e631e9
--- /dev/null
+++ b/src/internal/single-tab-stop/__tests__/register.test.tsx
@@ -0,0 +1,171 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { createRef, useContext, useRef } from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import {
+  SingleTabStopNavigationAPI,
+  SingleTabStopNavigationContext,
+  SingleTabStopNavigationProvider,
+  useSingleTabStopNavigation,
+} from '../';
+
+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} />;
+}
+
+function ButtonGroup({
+  buttons,
+  getNextFocusTarget,
+  onUnregisterActive,
+  isElementSuppressed,
+  apiRef,
+}: {
+  buttons: string[];
+  getNextFocusTarget: () => null | HTMLElement;
+  onUnregisterActive?: (element: Element) => void;
+  isElementSuppressed?: (element: Element) => boolean;
+  apiRef: React.Ref<SingleTabStopNavigationAPI>;
+}) {
+  return (
+    <SingleTabStopNavigationProvider
+      ref={apiRef}
+      navigationActive={true}
+      getNextFocusTarget={getNextFocusTarget}
+      onUnregisterActive={onUnregisterActive}
+      isElementSuppressed={isElementSuppressed}
+    >
+      <div>
+        {buttons.map(id => (
+          <Button key={id} data-testid={id}>
+            {id}
+          </Button>
+        ))}
+        <button data-testid="X" tabIndex={0}>
+          X
+        </button>
+      </div>
+    </SingleTabStopNavigationProvider>
+  );
+}
+
+function getButton(testId: string) {
+  return document.querySelector(`[data-testid="${testId}"]`) as null | HTMLElement;
+}
+
+test('registers focusable elements', () => {
+  const apiRef = createRef<SingleTabStopNavigationAPI>();
+  const { rerender } = render(
+    <ButtonGroup buttons={['A', 'B', 'C']} getNextFocusTarget={() => getButton('A')} apiRef={apiRef} />
+  );
+  const buttons = [getButton('A')!, getButton('B')!, getButton('C')!, getButton('X')!];
+
+  expect(apiRef.current!.isRegistered(buttons[0])).toBe(true);
+  expect(apiRef.current!.isRegistered(buttons[1])).toBe(true);
+  expect(apiRef.current!.isRegistered(buttons[2])).toBe(true);
+  expect(apiRef.current!.isRegistered(buttons[3])).toBe(false);
+
+  rerender(<ButtonGroup buttons={['A', 'B']} getNextFocusTarget={() => getButton('A')} apiRef={apiRef} />);
+
+  expect(apiRef.current!.isRegistered(buttons[0])).toBe(true);
+  expect(apiRef.current!.isRegistered(buttons[1])).toBe(true);
+  expect(apiRef.current!.isRegistered(buttons[2])).toBe(false);
+  expect(apiRef.current!.isRegistered(buttons[3])).toBe(false);
+});
+
+test('updates and retrieves focus target', () => {
+  const focusTarget = { current: 'A' };
+  const apiRef = createRef<SingleTabStopNavigationAPI>();
+  render(
+    <ButtonGroup buttons={['A', 'B']} getNextFocusTarget={() => getButton(focusTarget.current)} apiRef={apiRef} />
+  );
+
+  expect(getButton('A')).toHaveAttribute('tabIndex', '-1');
+  expect(getButton('B')).toHaveAttribute('tabIndex', '-1');
+  expect(getButton('X')).toHaveAttribute('tabIndex', '0');
+
+  apiRef.current!.updateFocusTarget();
+  expect(apiRef.current!.getFocusTarget()).toBe(getButton('A'));
+  expect(getButton('A')).toHaveAttribute('tabIndex', '0');
+  expect(getButton('B')).toHaveAttribute('tabIndex', '-1');
+  expect(getButton('X')).toHaveAttribute('tabIndex', '0');
+
+  focusTarget.current = 'B';
+  apiRef.current!.updateFocusTarget();
+  expect(apiRef.current!.getFocusTarget()).toBe(getButton('B'));
+  expect(getButton('A')).toHaveAttribute('tabIndex', '-1');
+  expect(getButton('B')).toHaveAttribute('tabIndex', '0');
+  expect(getButton('X')).toHaveAttribute('tabIndex', '0');
+
+  focusTarget.current = 'X';
+  apiRef.current!.updateFocusTarget();
+  expect(apiRef.current!.getFocusTarget()).toBe(getButton('X'));
+  expect(getButton('A')).toHaveAttribute('tabIndex', '-1');
+  expect(getButton('B')).toHaveAttribute('tabIndex', '-1');
+  expect(getButton('X')).toHaveAttribute('tabIndex', '0');
+});
+
+test('ignores elements that are suppressed', () => {
+  const apiRef = createRef<SingleTabStopNavigationAPI>();
+  const { rerender } = render(
+    <ButtonGroup buttons={['A', 'B']} getNextFocusTarget={() => getButton('A')} apiRef={apiRef} />
+  );
+
+  apiRef.current!.updateFocusTarget();
+  expect(getButton('A')).toHaveAttribute('tabIndex', '0');
+  expect(getButton('B')).toHaveAttribute('tabIndex', '-1');
+
+  rerender(
+    <ButtonGroup
+      buttons={['A', 'B']}
+      getNextFocusTarget={() => getButton('A')}
+      isElementSuppressed={element => element === getButton('B')}
+      apiRef={apiRef}
+    />
+  );
+  expect(getButton('A')).toHaveAttribute('tabIndex', '0');
+  expect(getButton('B')).toHaveAttribute('tabIndex', '0');
+});
+
+test('calls onUnregisterActive', async () => {
+  const apiRef = createRef<SingleTabStopNavigationAPI>();
+  const onUnregisterActive = jest.fn();
+  const { rerender } = render(
+    <ButtonGroup
+      buttons={['A', 'B']}
+      getNextFocusTarget={() => getButton('A')}
+      onUnregisterActive={onUnregisterActive}
+      apiRef={apiRef}
+    />
+  );
+
+  getButton('A')!.focus();
+
+  rerender(
+    <ButtonGroup
+      buttons={['A', 'B']}
+      getNextFocusTarget={() => getButton('A')}
+      onUnregisterActive={onUnregisterActive}
+      apiRef={apiRef}
+    />
+  );
+  await waitFor(() => {
+    expect(onUnregisterActive).toHaveBeenCalledWith(getButton('A'));
+  });
+});
+
+test('context defaults', () => {
+  function Button() {
+    const context = useContext(SingleTabStopNavigationContext);
+    // Checking the default registerFocusable is defined.
+    context.registerFocusable(document.createElement('div'), () => {})();
+    return <button>{context.navigationActive ? 'active' : 'inactive'}</button>;
+  }
+
+  render(<Button />);
+
+  expect(document.querySelector('button')!.textContent).toBe('inactive');
+});
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/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;
+  }
+}