From 263c87fc4edce8141de404f229ed8977c449da3c Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Tue, 18 Nov 2025 13:21:27 +0100
Subject: [PATCH 1/8] row-switch-announces-when-it-has-expanded-content

---
 src/list.tsx | 69 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/list.tsx b/src/list.tsx
index 3ca012bf83..c4a73902fb 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -28,6 +28,7 @@ import {applyCssVars} from './utils/css';
 import {IconButton, ToggleIconButton} from './icon-button';
 import ScreenReaderOnly from './screen-reader-only';
 import {useTheme} from './hooks';
+import Spinner from './spinner';
 
 import type {IconButtonProps, ToggleIconButtonProps} from './icon-button';
 import type {TouchableElement, TouchableProps} from './touchable';
@@ -274,11 +275,21 @@ interface BasicRowContentProps extends CommonProps {
     atomicReading?: boolean;
 }
 
+type SwitchDisclosure = {
+    expanded: boolean; // ¿hay contenido mostrado debajo?
+    controlsId?: string; // id de la región expandida (si existe)
+    live?: 'off' | 'polite' | 'assertive'; // canal de anuncio al cambiar expanded
+    busy?: boolean; // bloquea UI y marca aria-busy
+    showSpinner?: boolean; // muestra spinner en la derecha
+    onLabelWhenExpanded?: string; // mensaje cuando expanded = true
+};
+
 interface SwitchRowContentProps extends CommonProps {
     onPress?: (() => void) | undefined;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 
     switch: ControlProps | undefined;
+    switchDisclosure?: SwitchDisclosure;
 }
 
 interface CheckboxRowContentProps extends CommonProps {
@@ -545,15 +556,24 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
     if (props.switch || props.checkbox) {
         const Control = props.switch ? Switch : Checkbox;
         const name = props.switch?.name ?? props.checkbox?.name ?? titleId;
+        const computedAriaLabel =
+            ariaLabel ??
+            (props.switchDisclosure?.expanded
+                ? `${title} ${props.switchDisclosure?.onLabelWhenExpanded ?? 'Options available below.'}`
+                : ariaLabel);
+        const rowIsBusy = !!props.switchDisclosure?.busy;
+        const showSpinner = !!props.switchDisclosure?.showSpinner;
 
         return isInteractive
             ? renderRowWithDoubleInteraction(
                   <Control
-                      disabled={disabled}
+                      disabled={disabled || rowIsBusy}
                       name={name}
                       checked={isChecked}
-                      aria-label={ariaLabel}
+                      aria-label={computedAriaLabel}
                       aria-labelledby={titleId}
+                      aria-controls={props.switchDisclosure?.controlsId}
+                      aria-expanded={props.switchDisclosure?.expanded}
                       onChange={toggle}
                       render={({controlElement}) => (
                           <div className={styles.dualActionRight}>{controlElement}</div>
@@ -561,22 +581,37 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                   />
               )
             : renderRowWithSingleControl(
-                  <Control
-                      disabled={disabled}
-                      name={name}
-                      checked={isChecked}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      onChange={toggle}
-                      render={({controlElement, labelId}) => (
-                          <Box paddingX={16} role={role}>
-                              {renderContent({
-                                  labelId,
-                                  control: <Stack space="around">{controlElement}</Stack>,
-                              })}
-                          </Box>
+                  <div
+                      aria-live={props.switchDisclosure?.live ?? 'off'}
+                      aria-atomic
+                      aria-busy={rowIsBusy || undefined}
+                  >
+                      <Control
+                          disabled={disabled || rowIsBusy}
+                          name={name}
+                          checked={isChecked}
+                          aria-label={computedAriaLabel}
+                          aria-labelledby={titleId}
+                          aria-controls={props.switchDisclosure?.controlsId}
+                          aria-expanded={props.switchDisclosure?.expanded}
+                          onChange={toggle}
+                          render={({controlElement, labelId}) => (
+                              <Box paddingX={16} role={role}>
+                                  {renderContent({
+                                      labelId,
+                                      control: <Stack space="around">{controlElement}</Stack>,
+                                  })}
+                              </Box>
+                          )}
+                      />
+                      {showSpinner && (
+                          <div className={styles.rightContent}>
+                              <div className={styles.center}>
+                                  <Spinner aria-hidden />
+                              </div>
+                          </div>
                       )}
-                  />,
+                  </div>,
                   true
               );
     }

From 592463f352100b4942390b9c1b91e12836b12701 Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Tue, 18 Nov 2025 14:00:35 +0100
Subject: [PATCH 2/8] translated comments

---
 src/list.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/list.tsx b/src/list.tsx
index c4a73902fb..8b920860a1 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -276,12 +276,12 @@ interface BasicRowContentProps extends CommonProps {
 }
 
 type SwitchDisclosure = {
-    expanded: boolean; // ¿hay contenido mostrado debajo?
-    controlsId?: string; // id de la región expandida (si existe)
-    live?: 'off' | 'polite' | 'assertive'; // canal de anuncio al cambiar expanded
-    busy?: boolean; // bloquea UI y marca aria-busy
-    showSpinner?: boolean; // muestra spinner en la derecha
-    onLabelWhenExpanded?: string; // mensaje cuando expanded = true
+    expanded: boolean; // is the related content expanded
+    controlsId?: string; // id of the related content (if any)
+    live?: 'off' | 'polite' | 'assertive'; // announcement channel when changing expanded
+    busy?: boolean; // blocks UI and sets aria-busy
+    showSpinner?: boolean; // shows spinner on the right
+    onLabelWhenExpanded?: string; // message when expanded = true
 };
 
 interface SwitchRowContentProps extends CommonProps {

From 00ccb52fc322e3817834ceae10c666a0ab1725ab Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Tue, 18 Nov 2025 14:34:42 +0100
Subject: [PATCH 3/8] modified aria-atomic

---
 src/list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/list.tsx b/src/list.tsx
index 8b920860a1..75c489540e 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -583,7 +583,7 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
             : renderRowWithSingleControl(
                   <div
                       aria-live={props.switchDisclosure?.live ?? 'off'}
-                      aria-atomic
+                      aria-atomic={props.switchDisclosure?.live !== 'off'}
                       aria-busy={rowIsBusy || undefined}
                   >
                       <Control

From a2f065b462967ae40d05ad99c9334fa1d4f98fd9 Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Wed, 19 Nov 2025 14:31:23 +0100
Subject: [PATCH 4/8] WEB-2283: replaced literal with a token

---
 src/list.tsx        | 4 +++-
 src/text-tokens.tsx | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/list.tsx b/src/list.tsx
index 75c489540e..e81e0765e3 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -29,6 +29,7 @@ import {IconButton, ToggleIconButton} from './icon-button';
 import ScreenReaderOnly from './screen-reader-only';
 import {useTheme} from './hooks';
 import Spinner from './spinner';
+import * as tokens from './text-tokens';
 
 import type {IconButtonProps, ToggleIconButtonProps} from './icon-button';
 import type {TouchableElement, TouchableProps} from './touchable';
@@ -429,6 +430,7 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
     const hasControl = hasControlProps(props);
     const isInteractive = !!props.onPress || !!props.href || !!props.to;
     const hasChevron = hasControl ? false : withChevron ?? isInteractive;
+    const {texts, t} = useTheme();
 
     const interactiveProps = {
         href: props.href,
@@ -559,7 +561,7 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
         const computedAriaLabel =
             ariaLabel ??
             (props.switchDisclosure?.expanded
-                ? `${title} ${props.switchDisclosure?.onLabelWhenExpanded ?? 'Options available below.'}`
+                ? `${title} ${props.switchDisclosure?.onLabelWhenExpanded ?? (texts.optionsAvailableBelowAnnouncement || t(tokens.optionsAvailableBelowAnnouncement))}`
                 : ariaLabel);
         const rowIsBusy = !!props.switchDisclosure?.busy;
         const showSpinner = !!props.switchDisclosure?.showSpinner;
diff --git a/src/text-tokens.tsx b/src/text-tokens.tsx
index 97017c21e2..9c44091352 100644
--- a/src/text-tokens.tsx
+++ b/src/text-tokens.tsx
@@ -80,6 +80,7 @@ export type Dictionary = {
     ratingVeryGoodLabel: string;
     ratingQuantitativeLabel: string;
     skipLinkNavLabel: string;
+    optionsAvailableBelowAnnouncement: string;
 };
 
 export type TextToken = Record<Language, string>;
@@ -658,3 +659,10 @@ export const skipLinkNavLabel: TextToken = {
     de: 'Direkt zum Inhalt',
     pt: 'Acesso rápido',
 };
+
+export const optionsAvailableBelowAnnouncement: TextToken = {
+    es: 'Opciones disponibles a continuación',
+    en: 'Options available below',
+    de: 'Optionen unten verfügbar',
+    pt: 'Opções disponíveis a seguir',
+};

From b5821effa69aa55b3258522734ee02df682ab148 Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Tue, 9 Dec 2025 12:01:05 +0100
Subject: [PATCH 5/8] PR changes

---
 src/checkbox.tsx         |   6 ++
 src/list.tsx             | 153 ++++++++++++++++++++++-----------------
 src/radio-button.tsx     |   3 +
 src/switch-component.tsx |   6 ++
 4 files changed, 103 insertions(+), 65 deletions(-)

diff --git a/src/checkbox.tsx b/src/checkbox.tsx
index 6ad6dbaeb3..1d53ec07cb 100644
--- a/src/checkbox.tsx
+++ b/src/checkbox.tsx
@@ -75,6 +75,8 @@ type RenderProps = {
     disabled?: boolean;
     'aria-labelledby'?: string;
     'aria-label'?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
     role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
 };
@@ -90,6 +92,8 @@ type ChildrenProps = {
     disabled?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
     role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
 };
@@ -148,6 +152,8 @@ const Checkbox = React.forwardRef<HTMLDivElement, RenderProps | ChildrenProps>((
             className={disabled ? styles.checkboxContainerDisabled : styles.checkboxContainer}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : labelId}
+            aria-controls={props['aria-controls']}
+            aria-expanded={props['aria-expanded']}
             aria-disabled={disabled}
             {...getPrefixedDataAttributes(props.dataAttributes, 'Checkbox')}
         >
diff --git a/src/list.tsx b/src/list.tsx
index e81e0765e3..41c3324e54 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -28,7 +28,6 @@ import {applyCssVars} from './utils/css';
 import {IconButton, ToggleIconButton} from './icon-button';
 import ScreenReaderOnly from './screen-reader-only';
 import {useTheme} from './hooks';
-import Spinner from './spinner';
 import * as tokens from './text-tokens';
 
 import type {IconButtonProps, ToggleIconButtonProps} from './icon-button';
@@ -265,32 +264,36 @@ export const Content = ({
     );
 };
 
+type ControlDisclosure = {
+    /* is the related content expanded */
+    expanded: boolean;
+    /*  id of the related content (if any) */
+    controlsId?: string;
+    /* announcement channel when changing expanded */
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+    /* blocks UI and sets aria-busy */
+    'aria-busy'?: boolean;
+    /* message  of the SR when expanded = true */
+    onLabelWhenExpanded?: string;
+};
+
 type ControlProps = {
     name?: string;
     value?: boolean;
     defaultValue?: boolean;
     onChange?: (checked: boolean) => void;
+    controlDisclosure?: ControlDisclosure;
 };
 
 interface BasicRowContentProps extends CommonProps {
     atomicReading?: boolean;
 }
 
-type SwitchDisclosure = {
-    expanded: boolean; // is the related content expanded
-    controlsId?: string; // id of the related content (if any)
-    live?: 'off' | 'polite' | 'assertive'; // announcement channel when changing expanded
-    busy?: boolean; // blocks UI and sets aria-busy
-    showSpinner?: boolean; // shows spinner on the right
-    onLabelWhenExpanded?: string; // message when expanded = true
-};
-
 interface SwitchRowContentProps extends CommonProps {
     onPress?: (() => void) | undefined;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 
     switch: ControlProps | undefined;
-    switchDisclosure?: SwitchDisclosure;
 }
 
 interface CheckboxRowContentProps extends CommonProps {
@@ -305,6 +308,7 @@ interface RadioRowContentProps extends CommonProps {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 
     radioValue: string;
+    radio?: ControlProps | undefined;
 }
 
 interface IconButtonRowContentProps extends CommonProps {
@@ -558,34 +562,42 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
     if (props.switch || props.checkbox) {
         const Control = props.switch ? Switch : Checkbox;
         const name = props.switch?.name ?? props.checkbox?.name ?? titleId;
-        const computedAriaLabel =
-            ariaLabel ??
-            (props.switchDisclosure?.expanded
-                ? `${title} ${props.switchDisclosure?.onLabelWhenExpanded ?? (texts.optionsAvailableBelowAnnouncement || t(tokens.optionsAvailableBelowAnnouncement))}`
-                : ariaLabel);
-        const rowIsBusy = !!props.switchDisclosure?.busy;
-        const showSpinner = !!props.switchDisclosure?.showSpinner;
+
+        const controlProps = props.switch ?? props.checkbox;
+        const disclosure = controlProps?.controlDisclosure;
+
+        const optionsBelowText =
+            texts.optionsAvailableBelowAnnouncement || t(tokens.optionsAvailableBelowAnnouncement);
+        const announcementSuffix = disclosure?.onLabelWhenExpanded ?? optionsBelowText;
+        const computedAriaLabel = ariaLabel ?? (disclosure?.expanded ? announcementSuffix : ariaLabel);
+        const rowIsBusy = !!disclosure?.['aria-busy'];
 
         return isInteractive
             ? renderRowWithDoubleInteraction(
-                  <Control
-                      disabled={disabled || rowIsBusy}
-                      name={name}
-                      checked={isChecked}
-                      aria-label={computedAriaLabel}
-                      aria-labelledby={titleId}
-                      aria-controls={props.switchDisclosure?.controlsId}
-                      aria-expanded={props.switchDisclosure?.expanded}
-                      onChange={toggle}
-                      render={({controlElement}) => (
-                          <div className={styles.dualActionRight}>{controlElement}</div>
-                      )}
-                  />
+                  <div
+                      aria-live={disclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
+                      aria-busy={rowIsBusy || undefined}
+                  >
+                      <Control
+                          disabled={disabled || rowIsBusy}
+                          name={name}
+                          checked={isChecked}
+                          aria-label={computedAriaLabel}
+                          aria-labelledby={titleId}
+                          aria-controls={disclosure?.controlsId}
+                          aria-expanded={disclosure?.expanded}
+                          onChange={toggle}
+                          render={({controlElement}) => (
+                              <div className={styles.dualActionRight}>{controlElement}</div>
+                          )}
+                      />
+                  </div>
               )
             : renderRowWithSingleControl(
                   <div
-                      aria-live={props.switchDisclosure?.live ?? 'off'}
-                      aria-atomic={props.switchDisclosure?.live !== 'off'}
+                      aria-live={disclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
                       aria-busy={rowIsBusy || undefined}
                   >
                       <Control
@@ -594,8 +606,8 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                           checked={isChecked}
                           aria-label={computedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={props.switchDisclosure?.controlsId}
-                          aria-expanded={props.switchDisclosure?.expanded}
+                          aria-controls={disclosure?.controlsId}
+                          aria-expanded={disclosure?.expanded}
                           onChange={toggle}
                           render={({controlElement, labelId}) => (
                               <Box paddingX={16} role={role}>
@@ -606,46 +618,57 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                               </Box>
                           )}
                       />
-                      {showSpinner && (
-                          <div className={styles.rightContent}>
-                              <div className={styles.center}>
-                                  <Spinner aria-hidden />
-                              </div>
-                          </div>
-                      )}
                   </div>,
                   true
               );
     }
 
     if (props.radioValue) {
+        const disclosure = props.radio?.controlDisclosure;
+
         return isInteractive
             ? renderRowWithDoubleInteraction(
-                  <RadioButton
-                      value={props.radioValue}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      render={({controlElement}) => (
-                          <Stack space="around">
-                              <Box paddingX={16}>{controlElement}</Box>
-                          </Stack>
-                      )}
-                  />
+                  <div
+                      aria-live={disclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
+                      aria-busy={disclosure?.['aria-busy'] || undefined}
+                      aria-expanded={disclosure?.expanded}
+                  >
+                      <RadioButton
+                          value={props.radioValue}
+                          aria-label={ariaLabel}
+                          aria-labelledby={titleId}
+                          aria-controls={disclosure?.controlsId}
+                          render={({controlElement}) => (
+                              <Stack space="around">
+                                  <Box paddingX={16}>{controlElement}</Box>
+                              </Stack>
+                          )}
+                      />
+                  </div>
               )
             : renderRowWithSingleControl(
-                  <RadioButton
-                      value={props.radioValue}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      render={({controlElement}) => (
-                          <Box paddingX={16} role={role}>
-                              {renderContent({
-                                  labelId: titleId,
-                                  control: <Stack space="around">{controlElement}</Stack>,
-                              })}
-                          </Box>
-                      )}
-                  />,
+                  <div
+                      aria-live={disclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
+                      aria-busy={disclosure?.['aria-busy'] || undefined}
+                      aria-expanded={disclosure?.expanded}
+                  >
+                      <RadioButton
+                          value={props.radioValue}
+                          aria-label={ariaLabel}
+                          aria-labelledby={titleId}
+                          aria-controls={disclosure?.controlsId}
+                          render={({controlElement}) => (
+                              <Box paddingX={16} role={role}>
+                                  {renderContent({
+                                      labelId: titleId,
+                                      control: <Stack space="around">{controlElement}</Stack>,
+                                  })}
+                              </Box>
+                          )}
+                      />
+                  </div>,
                   true
               );
     }
diff --git a/src/radio-button.tsx b/src/radio-button.tsx
index 0b314afd65..5fc45f16f1 100644
--- a/src/radio-button.tsx
+++ b/src/radio-button.tsx
@@ -46,6 +46,7 @@ type PropsRender = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-controls'?: string;
 };
 
 type PropsChildren = {
@@ -56,6 +57,7 @@ type PropsChildren = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-controls'?: string;
 };
 
 const RadioButton = ({
@@ -160,6 +162,7 @@ const RadioButton = ({
             aria-disabled={disabled}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : labelId}
+            aria-controls={rest['aria-controls']}
             onClick={(e) => {
                 e.stopPropagation();
                 if (!disabled) {
diff --git a/src/switch-component.tsx b/src/switch-component.tsx
index 8740499b52..f56232f089 100644
--- a/src/switch-component.tsx
+++ b/src/switch-component.tsx
@@ -35,6 +35,8 @@ type PropsRender = {
     children?: undefined;
     'aria-labelledby'?: string;
     'aria-label'?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
     dataAttributes?: DataAttributes;
 };
 
@@ -48,6 +50,8 @@ type PropsChildren = {
     render?: undefined;
     'aria-labelledby'?: string;
     'aria-label'?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
     dataAttributes?: DataAttributes;
 };
 
@@ -153,6 +157,8 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
             aria-disabled={disabled}
             aria-label={props['aria-label']}
             aria-labelledby={props['aria-label'] ? undefined : labelId}
+            aria-controls={props['aria-controls']}
+            aria-expanded={props['aria-expanded']}
             {...getPrefixedDataAttributes(props.dataAttributes, 'Switch')}
         >
             {props.render ? (

From b5e21c5534720bbdc0aa66818085d290c596c364 Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Wed, 10 Dec 2025 16:56:36 +0100
Subject: [PATCH 6/8] minor changes

---
 src/list.tsx | 65 ++++++++++++++++++++++++++--------------------------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/list.tsx b/src/list.tsx
index 7722c06270..b7114db0fa 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -453,6 +453,16 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
     const isInteractive = !!props.onPress || !!props.href || !!props.to;
     const hasChevron = hasControl ? false : withChevron ?? isInteractive;
     const {texts, t} = useTheme();
+    const optionsBelowText =
+        texts.optionsAvailableBelowAnnouncement || t(tokens.optionsAvailableBelowAnnouncement);
+    const controlDisclosure =
+        props.switch?.controlDisclosure ||
+        props.checkbox?.controlDisclosure ||
+        props.radio?.controlDisclosure;
+    const announcementSuffix = controlDisclosure?.onLabelWhenExpanded ?? optionsBelowText;
+    const expandedAriaLabel =
+        ariaLabel ?? (controlDisclosure?.expanded ? `${title} ${announcementSuffix}` : ariaLabel);
+    const rowIsBusy = !!controlDisclosure?.['aria-busy'];
 
     const interactiveProps = {
         href: props.href,
@@ -581,30 +591,21 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
         const Control = props.switch ? Switch : Checkbox;
         const name = props.switch?.name ?? props.checkbox?.name ?? titleId;
 
-        const controlProps = props.switch ?? props.checkbox;
-        const disclosure = controlProps?.controlDisclosure;
-
-        const optionsBelowText =
-            texts.optionsAvailableBelowAnnouncement || t(tokens.optionsAvailableBelowAnnouncement);
-        const announcementSuffix = disclosure?.onLabelWhenExpanded ?? optionsBelowText;
-        const computedAriaLabel = ariaLabel ?? (disclosure?.expanded ? announcementSuffix : ariaLabel);
-        const rowIsBusy = !!disclosure?.['aria-busy'];
-
         return isInteractive
             ? renderRowWithDoubleInteraction(
                   <div
-                      aria-live={disclosure?.['aria-live'] ?? 'off'}
-                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
+                      aria-live={controlDisclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={controlDisclosure?.['aria-live'] !== 'off'}
                       aria-busy={rowIsBusy || undefined}
                   >
                       <Control
                           disabled={disabled || rowIsBusy}
                           name={name}
                           checked={isChecked}
-                          aria-label={computedAriaLabel}
+                          aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={disclosure?.controlsId}
-                          aria-expanded={disclosure?.expanded}
+                          aria-controls={controlDisclosure?.controlsId}
+                          aria-expanded={controlDisclosure?.expanded}
                           onChange={toggle}
                           render={({controlElement}) => (
                               <div className={styles.dualActionRight}>{controlElement}</div>
@@ -614,18 +615,18 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
               )
             : renderRowWithSingleControl(
                   <div
-                      aria-live={disclosure?.['aria-live'] ?? 'off'}
-                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
+                      aria-live={controlDisclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={controlDisclosure?.['aria-live'] !== 'off'}
                       aria-busy={rowIsBusy || undefined}
                   >
                       <Control
                           disabled={disabled || rowIsBusy}
                           name={name}
                           checked={isChecked}
-                          aria-label={computedAriaLabel}
+                          aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={disclosure?.controlsId}
-                          aria-expanded={disclosure?.expanded}
+                          aria-controls={controlDisclosure?.controlsId}
+                          aria-expanded={controlDisclosure?.expanded}
                           onChange={toggle}
                           render={({controlElement, labelId}) => (
                               <Box paddingX={16} role={role}>
@@ -642,21 +643,19 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
     }
 
     if (props.radioValue) {
-        const disclosure = props.radio?.controlDisclosure;
-
         return isInteractive
             ? renderRowWithDoubleInteraction(
                   <div
-                      aria-live={disclosure?.['aria-live'] ?? 'off'}
-                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
-                      aria-busy={disclosure?.['aria-busy'] || undefined}
-                      aria-expanded={disclosure?.expanded}
+                      aria-live={controlDisclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={controlDisclosure?.['aria-live'] !== 'off'}
+                      aria-busy={controlDisclosure?.['aria-busy'] || undefined}
+                      aria-expanded={controlDisclosure?.expanded}
                   >
                       <RadioButton
                           value={props.radioValue}
-                          aria-label={ariaLabel}
+                          aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={disclosure?.controlsId}
+                          aria-controls={controlDisclosure?.controlsId}
                           render={({controlElement}) => (
                               <Stack space="around">
                                   <Box paddingX={16}>{controlElement}</Box>
@@ -667,16 +666,16 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
               )
             : renderRowWithSingleControl(
                   <div
-                      aria-live={disclosure?.['aria-live'] ?? 'off'}
-                      aria-atomic={disclosure?.['aria-live'] !== 'off'}
-                      aria-busy={disclosure?.['aria-busy'] || undefined}
-                      aria-expanded={disclosure?.expanded}
+                      aria-live={controlDisclosure?.['aria-live'] ?? 'off'}
+                      aria-atomic={controlDisclosure?.['aria-live'] !== 'off'}
+                      aria-busy={controlDisclosure?.['aria-busy'] || undefined}
+                      aria-expanded={controlDisclosure?.expanded}
                   >
                       <RadioButton
                           value={props.radioValue}
-                          aria-label={ariaLabel}
+                          aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={disclosure?.controlsId}
+                          aria-controls={controlDisclosure?.controlsId}
                           render={({controlElement}) => (
                               <Box paddingX={16} role={role}>
                                   {renderContent({

From c197544ee5471d6f7ad555b8af8a1698bab8de2a Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Wed, 10 Dec 2025 17:27:33 +0100
Subject: [PATCH 7/8] added private list-disclosure-story

---
 .../list-disclosure-story.tsx                 | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 src/__private_stories__/list-disclosure-story.tsx

diff --git a/src/__private_stories__/list-disclosure-story.tsx b/src/__private_stories__/list-disclosure-story.tsx
new file mode 100644
index 0000000000..0a30036989
--- /dev/null
+++ b/src/__private_stories__/list-disclosure-story.tsx
@@ -0,0 +1,169 @@
+import * as React from 'react';
+import {
+    Box,
+    Stack,
+    Row,
+    RowList,
+    RadioGroup,
+    NegativeBox,
+    ResponsiveLayout,
+    Title3,
+    Text3,
+    IconShopRegular,
+} from '..';
+
+export default {
+    title: 'Private/Lists/ControlDisclosure',
+    parameters: {
+        fullScreen: true,
+    },
+};
+
+export const ControlDisclosureExample: StoryComponent = () => {
+    // Example state for the radio rows
+    const [fruit, setFruit] = React.useState<'banana' | 'apple'>('banana');
+
+    // Example state for switch + checkbox rows
+    const [switchA, setSwitchA] = React.useState(false);
+    const [checkboxB, setCheckboxB] = React.useState(false);
+
+    return (
+        <Box paddingY={24}>
+            <ResponsiveLayout>
+                <Stack space={32}>
+                    {/* Example 1: Radio rows that expand additional content */}
+                    <Stack space={16}>
+                        <Title3 as="h1">Radio rows with expandable content</Title3>
+
+                        <RadioGroup
+                            name="fruit"
+                            value={fruit}
+                            onChange={(value) => setFruit(value as 'banana' | 'apple')}
+                        >
+                            <RowList>
+                                <Row
+                                    asset={<IconShopRegular />}
+                                    title="Banana"
+                                    description="Yellow"
+                                    radioValue="banana"
+                                    radio={{
+                                        controlDisclosure: {
+                                            expanded: fruit === 'banana',
+                                            controlsId: 'panel-banana',
+                                            'aria-live': 'assertive',
+                                        },
+                                    }}
+                                />
+
+                                <Row
+                                    asset={<IconShopRegular />}
+                                    title="Apple"
+                                    description="Green"
+                                    radioValue="apple"
+                                    radio={{
+                                        controlDisclosure: {
+                                            expanded: fruit === 'apple',
+                                            controlsId: 'panel-apple',
+                                            'aria-live': 'assertive',
+                                        },
+                                    }}
+                                />
+                            </RowList>
+                        </RadioGroup>
+
+                        {fruit === 'banana' && (
+                            <Box id="panel-banana" paddingLeft={16}>
+                                <Stack space={8}>
+                                    <Title3 as="h1">Additional options for BANANA</Title3>
+                                    <Text3 light>
+                                        Example content for Banana. Use this section to validate that the
+                                        radio row triggers the correct ARIA announcements and expansion
+                                        behaviour.
+                                    </Text3>
+                                </Stack>
+                            </Box>
+                        )}
+
+                        {fruit === 'apple' && (
+                            <Box id="panel-apple" paddingLeft={16}>
+                                <Stack space={8}>
+                                    <Title3 as="h1">Additional options for APPLE</Title3>
+                                    <Text3 light>
+                                        Example content for Apple. Expands when the corresponding radio row is
+                                        selected.
+                                    </Text3>
+                                </Stack>
+                            </Box>
+                        )}
+                    </Stack>
+                    {/* Example 2: Switch / Checkbox rows that expand */}
+                    <Stack space={16}>
+                        <Title3 as="h2">Switch and checkbox rows with expandable content</Title3>
+
+                        <NegativeBox>
+                            <RowList>
+                                <Row
+                                    title="Call forwarding A"
+                                    description="Additional options appear when enabled."
+                                    switch={{
+                                        name: 'switch-a',
+                                        value: switchA,
+                                        onChange: setSwitchA,
+                                        controlDisclosure: {
+                                            expanded: switchA,
+                                            controlsId: 'switch-a-panel',
+                                            'aria-live': 'assertive',
+                                            onLabelWhenExpanded: 'Options available below.',
+                                        },
+                                    }}
+                                />
+
+                                <Row
+                                    title="Call forwarding B"
+                                    description="Another example of expandable content."
+                                    checkbox={{
+                                        name: 'checkbox-b',
+                                        value: checkboxB,
+                                        onChange: setCheckboxB,
+                                        controlDisclosure: {
+                                            expanded: checkboxB,
+                                            controlsId: 'switch-b-panel',
+                                            'aria-live': 'assertive',
+                                            onLabelWhenExpanded: 'Options available below.',
+                                        },
+                                    }}
+                                />
+                            </RowList>
+                        </NegativeBox>
+
+                        {switchA && (
+                            <Box id="switch-a-panel" paddingLeft={16}>
+                                <Stack space={8}>
+                                    <Title3 as="h1">Extra options for A</Title3>
+                                    <Text3 light>
+                                        This section becomes visible when the switch is active. Used to
+                                        validate accessibility announcements for switch-based disclosure.
+                                    </Text3>
+                                </Stack>
+                            </Box>
+                        )}
+
+                        {checkboxB && (
+                            <Box id="switch-b-panel" paddingLeft={16}>
+                                <Stack space={8}>
+                                    <Title3 as="h1">Extra options for B</Title3>
+                                    <Text3 light>
+                                        Example content for the checkbox row. Helpful to test both visual and
+                                        screen-reader behaviour.
+                                    </Text3>
+                                </Stack>
+                            </Box>
+                        )}
+                    </Stack>
+                </Stack>
+            </ResponsiveLayout>
+        </Box>
+    );
+};
+
+ControlDisclosureExample.storyName = 'ControlDisclosure';

From 29943be6b1dc733e89026a7e847d93e952575d35 Mon Sep 17 00:00:00 2001
From: AlexandraGallipoliRodrigues
 <alexandra.gallipolirodrigues@telefonica.com>
Date: Thu, 11 Dec 2025 12:05:29 +0100
Subject: [PATCH 8/8] deleted aria-expanded and aria-controls from rows

---
 src/__private_stories__/list-disclosure-story.tsx |  4 ----
 src/checkbox.tsx                                  |  6 ------
 src/list.tsx                                      | 10 ----------
 src/radio-button.tsx                              |  3 ---
 4 files changed, 23 deletions(-)

diff --git a/src/__private_stories__/list-disclosure-story.tsx b/src/__private_stories__/list-disclosure-story.tsx
index 0a30036989..8c2ee84cb1 100644
--- a/src/__private_stories__/list-disclosure-story.tsx
+++ b/src/__private_stories__/list-disclosure-story.tsx
@@ -49,7 +49,6 @@ export const ControlDisclosureExample: StoryComponent = () => {
                                     radio={{
                                         controlDisclosure: {
                                             expanded: fruit === 'banana',
-                                            controlsId: 'panel-banana',
                                             'aria-live': 'assertive',
                                         },
                                     }}
@@ -63,7 +62,6 @@ export const ControlDisclosureExample: StoryComponent = () => {
                                     radio={{
                                         controlDisclosure: {
                                             expanded: fruit === 'apple',
-                                            controlsId: 'panel-apple',
                                             'aria-live': 'assertive',
                                         },
                                     }}
@@ -111,7 +109,6 @@ export const ControlDisclosureExample: StoryComponent = () => {
                                         onChange: setSwitchA,
                                         controlDisclosure: {
                                             expanded: switchA,
-                                            controlsId: 'switch-a-panel',
                                             'aria-live': 'assertive',
                                             onLabelWhenExpanded: 'Options available below.',
                                         },
@@ -127,7 +124,6 @@ export const ControlDisclosureExample: StoryComponent = () => {
                                         onChange: setCheckboxB,
                                         controlDisclosure: {
                                             expanded: checkboxB,
-                                            controlsId: 'switch-b-panel',
                                             'aria-live': 'assertive',
                                             onLabelWhenExpanded: 'Options available below.',
                                         },
diff --git a/src/checkbox.tsx b/src/checkbox.tsx
index a6f4aa4f8e..f51eb9d134 100644
--- a/src/checkbox.tsx
+++ b/src/checkbox.tsx
@@ -84,8 +84,6 @@ type RenderProps = {
     disabled?: boolean;
     'aria-labelledby'?: string;
     'aria-label'?: string;
-    'aria-controls'?: string;
-    'aria-expanded'?: boolean;
     role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
 };
@@ -101,8 +99,6 @@ type ChildrenProps = {
     disabled?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
-    'aria-controls'?: string;
-    'aria-expanded'?: boolean;
     role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
 };
@@ -161,8 +157,6 @@ const Checkbox = React.forwardRef<HTMLDivElement, RenderProps | ChildrenProps>((
             className={disabled ? styles.checkboxContainerDisabled : styles.checkboxContainer}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : labelId}
-            aria-controls={props['aria-controls']}
-            aria-expanded={props['aria-expanded']}
             aria-disabled={disabled}
             {...getPrefixedDataAttributes(props.dataAttributes, 'Checkbox')}
         >
diff --git a/src/list.tsx b/src/list.tsx
index b7114db0fa..549395faf2 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -283,8 +283,6 @@ export const Content = ({
 type ControlDisclosure = {
     /* is the related content expanded */
     expanded: boolean;
-    /*  id of the related content (if any) */
-    controlsId?: string;
     /* announcement channel when changing expanded */
     'aria-live'?: 'off' | 'polite' | 'assertive';
     /* blocks UI and sets aria-busy */
@@ -604,8 +602,6 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                           checked={isChecked}
                           aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={controlDisclosure?.controlsId}
-                          aria-expanded={controlDisclosure?.expanded}
                           onChange={toggle}
                           render={({controlElement}) => (
                               <div className={styles.dualActionRight}>{controlElement}</div>
@@ -625,8 +621,6 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                           checked={isChecked}
                           aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={controlDisclosure?.controlsId}
-                          aria-expanded={controlDisclosure?.expanded}
                           onChange={toggle}
                           render={({controlElement, labelId}) => (
                               <Box paddingX={16} role={role}>
@@ -649,13 +643,11 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                       aria-live={controlDisclosure?.['aria-live'] ?? 'off'}
                       aria-atomic={controlDisclosure?.['aria-live'] !== 'off'}
                       aria-busy={controlDisclosure?.['aria-busy'] || undefined}
-                      aria-expanded={controlDisclosure?.expanded}
                   >
                       <RadioButton
                           value={props.radioValue}
                           aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={controlDisclosure?.controlsId}
                           render={({controlElement}) => (
                               <Stack space="around">
                                   <Box paddingX={16}>{controlElement}</Box>
@@ -669,13 +661,11 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
                       aria-live={controlDisclosure?.['aria-live'] ?? 'off'}
                       aria-atomic={controlDisclosure?.['aria-live'] !== 'off'}
                       aria-busy={controlDisclosure?.['aria-busy'] || undefined}
-                      aria-expanded={controlDisclosure?.expanded}
                   >
                       <RadioButton
                           value={props.radioValue}
                           aria-label={expandedAriaLabel}
                           aria-labelledby={titleId}
-                          aria-controls={controlDisclosure?.controlsId}
                           render={({controlElement}) => (
                               <Box paddingX={16} role={role}>
                                   {renderContent({
diff --git a/src/radio-button.tsx b/src/radio-button.tsx
index 2169b8a003..019d726d6a 100644
--- a/src/radio-button.tsx
+++ b/src/radio-button.tsx
@@ -46,7 +46,6 @@ type PropsRender = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
     'aria-labelledby'?: string;
-    'aria-controls'?: string;
 };
 
 type PropsChildren = {
@@ -57,7 +56,6 @@ type PropsChildren = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
     'aria-labelledby'?: string;
-    'aria-controls'?: string;
 };
 
 const RadioButton = ({
@@ -166,7 +164,6 @@ const RadioButton = ({
             aria-disabled={disabled}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : labelId}
-            aria-controls={rest['aria-controls']}
             onClick={(e) => {
                 e.stopPropagation();
                 if (!disabled) {