diff --git a/src/internal/index.ts b/src/internal/index.ts
index 9a277fa..c3c2d7a 100644
--- a/src/internal/index.ts
+++ b/src/internal/index.ts
@@ -31,6 +31,7 @@ export { getGlobalFlag } from './global-flags';
 export {
   SingleTabStopNavigationAPI,
   SingleTabStopNavigationProvider,
+  SingleTabStopNavigationReset,
   useSingleTabStopNavigation,
 } from './single-tab-stop';
 export { isFocusable, getAllFocusables, getFirstFocusable, getLastFocusable } from './focus-lock-utils/utils';
diff --git a/src/internal/single-tab-stop/__tests__/context.test.tsx b/src/internal/single-tab-stop/__tests__/context.test.tsx
index 7b812c0..cf5f413 100644
--- a/src/internal/single-tab-stop/__tests__/context.test.tsx
+++ b/src/internal/single-tab-stop/__tests__/context.test.tsx
@@ -1,22 +1,59 @@
 // 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 React, { useContext, useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
 
-import { SingleTabStopNavigationContext, useSingleTabStopNavigation } from '../';
+import {
+  SingleTabStopNavigationAPI,
+  SingleTabStopNavigationContext,
+  SingleTabStopNavigationProvider,
+  SingleTabStopNavigationReset,
+  useSingleTabStopNavigation,
+} from '../';
 import { renderWithSingleTabStopNavigation } from './utils';
 
+// Simple STSN subscriber component
 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');
-});
+// Simple STSN provider component
+function Group({
+  id,
+  navigationActive,
+  children,
+}: {
+  id: string;
+  navigationActive: boolean;
+  children: React.ReactNode;
+}) {
+  const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);
+
+  useEffect(() => {
+    navigationAPI.current?.updateFocusTarget();
+  });
+
+  return (
+    <SingleTabStopNavigationProvider
+      ref={navigationAPI}
+      navigationActive={navigationActive}
+      getNextFocusTarget={() => document.querySelector(`#${id}`)!.querySelectorAll('button')[0] as HTMLElement}
+    >
+      <div id={id}>
+        <Button>First</Button>
+        <Button>Second</Button>
+        {children}
+      </div>
+    </SingleTabStopNavigationProvider>
+  );
+}
+
+function findGroupButton(groupId: string, buttonIndex: number) {
+  return document.querySelector(`#${groupId}`)!.querySelectorAll('button')[buttonIndex] as HTMLElement;
+}
 
 test('does not override tab index when keyboard navigation is not active', () => {
   renderWithSingleTabStopNavigation(<Button id="button" />, { navigationActive: false });
@@ -34,14 +71,11 @@ test('does not override tab index for suppressed elements', () => {
     </div>,
     { navigationActive: true }
   );
-  act(() => {
-    setCurrentTarget(document.querySelector('#button1'), [
-      document.querySelector('#button1'),
-      document.querySelector('#button2'),
-      document.querySelector('#button3'),
-    ]);
-  });
-
+  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');
@@ -56,9 +90,7 @@ test('overrides tab index when keyboard navigation is active', () => {
       <Button id="button2" />
     </div>
   );
-  act(() => {
-    setCurrentTarget(document.querySelector('#button1'));
-  });
+  setCurrentTarget(document.querySelector('#button1'));
   expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '0');
   expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-1');
 });
@@ -70,9 +102,7 @@ test('does not override explicit tab index with 0', () => {
       <Button id="button2" tabIndex={-2} />
     </div>
   );
-  act(() => {
-    setCurrentTarget(document.querySelector('#button1'));
-  });
+  setCurrentTarget(document.querySelector('#button1'));
   expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '-2');
   expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-2');
 });
@@ -84,7 +114,9 @@ test('propagates and suppresses navigation active state', () => {
   }
   function Test({ navigationActive }: { navigationActive: boolean }) {
     return (
-      <SingleTabStopNavigationContext.Provider value={{ navigationActive, registerFocusable: () => () => {} }}>
+      <SingleTabStopNavigationContext.Provider
+        value={{ navigationActive, registerFocusable: () => () => {}, resetFocusTarget: () => {} }}
+      >
         <Component />
       </SingleTabStopNavigationContext.Provider>
     );
@@ -96,3 +128,162 @@ test('propagates and suppresses navigation active state', () => {
   rerender(<Test navigationActive={false} />);
   expect(document.querySelector('div')).toHaveTextContent('false');
 });
+
+test('subscriber components can be used without provider', () => {
+  function TestComponent(props: React.HTMLAttributes<HTMLButtonElement>) {
+    const ref = useRef(null);
+    const contextResult = useContext(SingleTabStopNavigationContext);
+    const hookResult = useSingleTabStopNavigation(ref, { tabIndex: props.tabIndex });
+    useEffect(() => {
+      contextResult.registerFocusable(ref.current!, () => {});
+      contextResult.resetFocusTarget();
+    });
+    return (
+      <div ref={ref}>
+        Context: {`${contextResult.navigationActive}`}, Hook: {`${hookResult.navigationActive}:${hookResult.tabIndex}`}
+      </div>
+    );
+  }
+  const { container } = render(<TestComponent />);
+  expect(container.textContent).toBe('Context: false, Hook: false:undefined');
+});
+
+describe('nested contexts', () => {
+  test('tab indices are distributed correctly when switching contexts from inner to outer', () => {
+    const { rerender } = render(
+      <Group id="outer-most" navigationActive={false}>
+        <Group id="outer" navigationActive={false}>
+          <Group id="inner" navigationActive={true}>
+            {null}
+          </Group>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer-most', 1)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer', 0)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer', 1)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+
+    rerender(
+      <Group id="outer-most" navigationActive={false}>
+        <Group id="outer" navigationActive={true}>
+          <Group id="inner" navigationActive={true}>
+            {null}
+          </Group>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer-most', 1)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+
+    rerender(
+      <Group id="outer-most" navigationActive={true}>
+        <Group id="outer" navigationActive={true}>
+          <Group id="inner" navigationActive={true}>
+            {null}
+          </Group>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer-most', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('tab indices are distributed correctly when switching contexts from outer to inner', () => {
+    const { rerender } = render(
+      <Group id="outer-most" navigationActive={true}>
+        <Group id="outer" navigationActive={true}>
+          <Group id="inner" navigationActive={true}>
+            {null}
+          </Group>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer-most', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+
+    rerender(
+      <Group id="outer-most" navigationActive={false}>
+        <Group id="outer" navigationActive={true}>
+          <Group id="inner" navigationActive={true}>
+            {null}
+          </Group>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer-most', 1)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+
+    rerender(
+      <Group id="outer-most" navigationActive={false}>
+        <Group id="outer" navigationActive={false}>
+          <Group id="inner" navigationActive={true}>
+            {null}
+          </Group>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer-most', 1)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer', 0)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('outer', 1)).not.toHaveAttribute('tabindex');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('ignores parent context when reset is used', () => {
+    const { rerender } = render(
+      <Group id="outer-most" navigationActive={true}>
+        <SingleTabStopNavigationReset>
+          <Group id="outer" navigationActive={true}>
+            <Group id="inner" navigationActive={true}>
+              {null}
+            </Group>
+          </Group>
+        </SingleTabStopNavigationReset>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer-most', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+
+    rerender(
+      <Group id="outer-most" navigationActive={true}>
+        <Group id="outer" navigationActive={true}>
+          <SingleTabStopNavigationReset>
+            <Group id="inner" navigationActive={true}>
+              {null}
+            </Group>
+          </SingleTabStopNavigationReset>
+        </Group>
+      </Group>
+    );
+    expect(findGroupButton('outer-most', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('outer-most', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 0)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('outer', 1)).toHaveAttribute('tabindex', '-1');
+    expect(findGroupButton('inner', 0)).toHaveAttribute('tabindex', '0');
+    expect(findGroupButton('inner', 1)).toHaveAttribute('tabindex', '-1');
+  });
+});
diff --git a/src/internal/single-tab-stop/__tests__/utils.tsx b/src/internal/single-tab-stop/__tests__/utils.tsx
index 03eb2d3..3bddd0b 100644
--- a/src/internal/single-tab-stop/__tests__/utils.tsx
+++ b/src/internal/single-tab-stop/__tests__/utils.tsx
@@ -36,7 +36,9 @@ const FakeSingleTabStopNavigationProvider = forwardRef(
     }));
 
     return (
-      <SingleTabStopNavigationContext.Provider value={{ registerFocusable, navigationActive }}>
+      <SingleTabStopNavigationContext.Provider
+        value={{ navigationActive, registerFocusable, resetFocusTarget: () => {} }}
+      >
         {children}
       </SingleTabStopNavigationContext.Provider>
     );
diff --git a/src/internal/single-tab-stop/index.tsx b/src/internal/single-tab-stop/index.tsx
index 808dade..6b6fd31 100644
--- a/src/internal/single-tab-stop/index.tsx
+++ b/src/internal/single-tab-stop/index.tsx
@@ -11,16 +11,19 @@ import React, {
   useState,
 } from 'react';
 
+import { useEffectOnUpdate } from '../use-effect-on-update';
 import nodeBelongs from '../../dom/node-belongs';
 
 export type FocusableChangeHandler = (isFocusable: boolean) => void;
 
-export const defaultValue: {
+const defaultValue: {
   navigationActive: boolean;
   registerFocusable(focusable: HTMLElement, handler: FocusableChangeHandler): () => void;
+  resetFocusTarget(): void;
 } = {
   navigationActive: false,
   registerFocusable: () => () => {},
+  resetFocusTarget: () => {},
 };
 
 /**
@@ -68,6 +71,12 @@ export interface SingleTabStopNavigationAPI {
   isRegistered(element: Element): boolean;
 }
 
+export function SingleTabStopNavigationReset({ children }: { children: React.ReactNode }) {
+  return (
+    <SingleTabStopNavigationContext.Provider value={defaultValue}>{children}</SingleTabStopNavigationContext.Provider>
+  );
+}
+
 export const SingleTabStopNavigationProvider = forwardRef(
   (
     {
@@ -99,9 +108,12 @@ export const SingleTabStopNavigationProvider = forwardRef(
 
     // 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);
+    function registerFocusable(focusableElement: HTMLElement, changeHandler: FocusableChangeHandler) {
+      // In case the contexts are nested, we must that the components register to all of them,
+      // so that switching between contexts dynamically is possible.
+      const parentUnregister = parentContext.registerFocusable(focusableElement, changeHandler);
 
+      focusables.current.add(focusableElement);
       focusHandlers.current.set(focusableElement, changeHandler);
       const isFocusable = !!focusablesState.current.get(focusableElement);
       const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);
@@ -110,9 +122,12 @@ export const SingleTabStopNavigationProvider = forwardRef(
         changeHandler(newIsFocusable);
       }
       onRegisterFocusable?.(focusableElement);
-      return () => unregisterFocusable(focusableElement);
-    }
 
+      return () => {
+        parentUnregister();
+        unregisterFocusable(focusableElement);
+      };
+    }
     function unregisterFocusable(focusableElement: Element) {
       focusables.current.delete(focusableElement);
       focusHandlers.current.delete(focusableElement);
@@ -120,32 +135,49 @@ export const SingleTabStopNavigationProvider = forwardRef(
     }
 
     // Update focus target with next single focusable element and notify all registered focusables of a change.
-    function updateFocusTarget() {
+    function updateFocusTarget(forceUpdate = false) {
       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) {
+        if (newIsFocusable !== isFocusable || forceUpdate) {
           focusablesState.current.set(focusableElement, newIsFocusable);
           focusHandlers.current.get(focusableElement)!(newIsFocusable);
         }
       }
     }
-
+    function resetFocusTarget() {
+      updateFocusTarget(true);
+    }
     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>
-    );
+    // Only one STSN context should be active at a time.
+    // The outer context is preferred over the inners. The components using STSN
+    // must either work with either outer or inner context, or an explicit switch mechanism
+    // needs to be implemented (that turns the outer context on and off based on user interaction).
+    const parentContext = useContext(SingleTabStopNavigationContext);
+    const value = parentContext.navigationActive
+      ? parentContext
+      : { navigationReset: false, navigationActive, registerFocusable, updateFocusTarget, resetFocusTarget };
+
+    // When contexts switching occurs, it is essential that the now-active one updates the focus target
+    // to ensure the tab indices are correctly set.
+    useEffectOnUpdate(() => {
+      if (parentContext.navigationActive) {
+        parentContext.resetFocusTarget();
+      } else {
+        resetFocusTarget();
+      }
+      // The updateFocusTarget and its dependencies must be pure.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [parentContext.navigationActive]);
+
+    return <SingleTabStopNavigationContext.Provider value={value}>{children}</SingleTabStopNavigationContext.Provider>;
   }
 );
diff --git a/src/internal/testing.ts b/src/internal/testing.ts
index e591f6e..4493fd7 100644
--- a/src/internal/testing.ts
+++ b/src/internal/testing.ts
@@ -5,3 +5,4 @@ export { clearOneTimeMetricsCache } from './base-component/metrics/metrics';
 export { clearMessageCache } from './logging';
 export { setGlobalFlag } from './global-flags';
 export { clearVisualRefreshState } from './visual-mode';
+export { renderWithSingleTabStopNavigation } from './single-tab-stop/__tests__/utils';
diff --git a/src/internal/use-effect-on-update/index.ts b/src/internal/use-effect-on-update/index.ts
new file mode 100644
index 0000000..429dbe9
--- /dev/null
+++ b/src/internal/use-effect-on-update/index.ts
@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+// useEffect, which skips the initial render
+export function useEffectOnUpdate(callback: EffectCallback, deps: DependencyList) {
+  const isFirstRender = useRef<boolean>(true);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      return callback();
+    }
+    // This is a useEffect extension, will be validated at the call site
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}