feat(Row): Row switch announces when it has expanded content

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; // 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 {
@@ -545,38 +556,62 @@ 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>
                       )}
                   />
               )
             : 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={props.switchDisclosure?.live !== 'off'}
+                      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
               );
     }