From 23890d7017d28c87c2105860b94bc1349b782de4 Mon Sep 17 00:00:00 2001
From: Jeff Longshore <madkidflash@gmail.com>
Date: Wed, 3 Dec 2025 15:30:23 -0600
Subject: [PATCH] fix: focus sentinel text being read by jaws

---
 .../ComposedModal/ComposedModal.featureflag.stories.js          | 2 +-
 packages/react/src/components/ComposedModal/ComposedModal.tsx   | 2 ++
 .../react/src/components/Modal/Modal.featureflag.stories.js     | 2 +-
 packages/react/src/components/Modal/Modal.tsx                   | 2 ++
 packages/react/src/components/Notification/Notification.tsx     | 2 ++
 .../__tests__/__snapshots__/Notification-test.js.snap           | 2 ++
 packages/react/src/internal/FloatingMenu.tsx                    | 2 ++
 7 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.stories.js
index 645cbf89ba0f..48cd47833b59 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.stories.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.stories.js
@@ -110,7 +110,7 @@ export const EnableFocusWrapWithoutSentinels = (args) => {
           <span>
             This story is rendered with{' '}
             <LinkTo title="Getting Started/Feature Flags" name="Overview">
-              enable-preview-focus-wrap-without-sentinels
+              enable-focus-wrap-without-sentinels
             </LinkTo>{' '}
             enabled
           </span>
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index 698f0be7de47..2673f0182f8f 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -613,6 +613,7 @@ const ComposedModalDialog = React.forwardRef<
       {/* Non-translatable: Focus-wrap code makes this `<button>` not actually read by screen readers */}
       {!focusTrapWithoutSentinels && (
         <button
+          aria-hidden="true"
           type="button"
           ref={startSentinel}
           className={`${prefix}--visually-hidden`}>
@@ -634,6 +635,7 @@ const ComposedModalDialog = React.forwardRef<
       {/* Non-translatable: Focus-wrap code makes this `<button>` not actually read by screen readers */}
       {!focusTrapWithoutSentinels && (
         <button
+          aria-hidden="true"
           type="button"
           ref={endSentinel}
           className={`${prefix}--visually-hidden`}>
diff --git a/packages/react/src/components/Modal/Modal.featureflag.stories.js b/packages/react/src/components/Modal/Modal.featureflag.stories.js
index c387029167b0..db33d704861e 100644
--- a/packages/react/src/components/Modal/Modal.featureflag.stories.js
+++ b/packages/react/src/components/Modal/Modal.featureflag.stories.js
@@ -116,7 +116,7 @@ export const EnableFocusWrapWithoutSentinels = () => {
           <span>
             This story is rendered with{' '}
             <LinkTo title="Getting Started/Feature Flags" name="Overview">
-              enable-preview-focus-wrap-without-sentinels
+              enable-focus-wrap-without-sentinels
             </LinkTo>{' '}
             enabled
           </span>
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index 8123d055f5e5..90cc0e2a1532 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -770,6 +770,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(
       {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
       {!enableDialogElement && !focusTrapWithoutSentinels && (
         <span
+          aria-hidden="true"
           ref={startTrap}
           tabIndex={0}
           role="link"
@@ -865,6 +866,7 @@ const ModalDialog = React.forwardRef(function ModalDialog(
       {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
       {!enableDialogElement && !focusTrapWithoutSentinels && (
         <span
+          aria-hidden="true"
           ref={endTrap}
           tabIndex={0}
           role="link"
diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
index 8f8447ebf094..9d07ac749c49 100644
--- a/packages/react/src/components/Notification/Notification.tsx
+++ b/packages/react/src/components/Notification/Notification.tsx
@@ -1046,6 +1046,7 @@ export function ActionableNotification({
       onKeyDown={focusTrapWithoutSentinels ? handleKeyDown : () => {}}>
       {!focusTrapWithoutSentinels && (
         <span
+          aria-hidden="true"
           ref={startTrap}
           tabIndex={0}
           role="link"
@@ -1110,6 +1111,7 @@ export function ActionableNotification({
       </div>
       {!focusTrapWithoutSentinels && (
         <span
+          aria-hidden="true"
           ref={endTrap}
           tabIndex={0}
           role="link"
diff --git a/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap b/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
index 41f5966cd227..fb93161cf613 100644
--- a/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
+++ b/packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
@@ -8,6 +8,7 @@ exports[`ActionableNotification should render 1`] = `
     role="alertdialog"
   >
     <span
+      aria-hidden="true"
       class="cds--visually-hidden"
       role="link"
       tabindex="0"
@@ -81,6 +82,7 @@ exports[`ActionableNotification should render 1`] = `
       </button>
     </div>
     <span
+      aria-hidden="true"
       class="cds--visually-hidden"
       role="link"
       tabindex="0"
diff --git a/packages/react/src/internal/FloatingMenu.tsx b/packages/react/src/internal/FloatingMenu.tsx
index dc6cddef3aa7..b047a54ad244 100644
--- a/packages/react/src/internal/FloatingMenu.tsx
+++ b/packages/react/src/internal/FloatingMenu.tsx
@@ -520,6 +520,7 @@ export const FloatingMenu = ({
         {/* Non-translatable: Focus management code makes this `<span>` not actually read by screen readers */}
         {!focusTrapWithoutSentinels && (
           <span
+            aria-hidden="true"
             ref={startSentinelRef}
             tabIndex={0}
             role="link"
@@ -531,6 +532,7 @@ export const FloatingMenu = ({
         {/* Non-translatable: Focus management code makes this `<span>` not actually read by screen readers */}
         {!focusTrapWithoutSentinels && (
           <span
+            aria-hidden="true"
             ref={endSentinelRef}
             tabIndex={0}
             role="link"