feat(RowList, BoxedRowList, Stack): O2DE-7699 RowList with aria-live and aria-atomic attributes

src/__stories__/list-story.tsx

@@ -51,6 +51,10 @@ export default {
             ],
             control: {type: 'select'},
         },
+        'aria-live': {
+            options: ['off', 'polite', 'assertive'],
+            control: {type: 'select'},
+        },
     },
     parameters: {
         fullScreen: true,
@@ -72,9 +76,16 @@ type Args = {
     disabled: boolean;
     danger: boolean;
     overInverse: boolean;
+    'aria-live': 'off' | 'polite' | 'assertive';
+    'aria-atomic': boolean;
 };
 
-const Template: StoryComponent<Args & {boxed?: boolean; inverse?: boolean}> = ({
+const Template: StoryComponent<
+    Args & {
+        boxed?: boolean;
+        inverse?: boolean;
+    }
+> = ({
     boxed,
     headline,
     title,
@@ -91,6 +102,8 @@ const Template: StoryComponent<Args & {boxed?: boolean; inverse?: boolean}> = ({
     overInverse,
     inverse,
     danger,
+    'aria-live': ariaLive,
+    'aria-atomic': ariaAtomic,
 }) => {
     const extraContent = extra ? <Placeholder height={56} /> : undefined;
 
@@ -105,26 +118,45 @@ const Template: StoryComponent<Args & {boxed?: boolean; inverse?: boolean}> = ({
                 controlProps = {href: 'https://example.org', newTab: true, right: null}; // right null removes the chevron
                 break;
             case 'switch':
-                controlProps = {switch: {defaultValue: true, onChange: () => {}}};
+                controlProps = {
+                    switch: {
+                        defaultValue: true,
+                        onChange: () => {},
+                    },
+                };
                 break;
             case 'switch and onPress':
                 controlProps = {
-                    switch: {defaultValue: true, onChange: () => {}},
+                    switch: {
+                        defaultValue: true,
+                        onChange: () => {},
+                    },
                     onPress,
                 };
                 break;
             case 'checkbox':
-                controlProps = {checkbox: {defaultValue: true, onChange: () => {}}};
+                controlProps = {
+                    checkbox: {
+                        defaultValue: true,
+                        onChange: () => {},
+                    },
+                };
                 break;
             case 'checkbox and onPress':
                 controlProps = {
-                    checkbox: {defaultValue: true, onChange: () => {}},
+                    checkbox: {
+                        defaultValue: true,
+                        onChange: () => {},
+                    },
                     onPress,
                 };
                 break;
             case 'checkbox with custom element':
                 controlProps = {
-                    checkbox: {defaultValue: true, onChange: () => {}},
+                    checkbox: {
+                        defaultValue: true,
+                        onChange: () => {},
+                    },
                     right: () => (
                         <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
                             <div style={{width: 32, height: 32, borderRadius: '50%', background: 'pink'}} />
@@ -229,7 +261,7 @@ const Template: StoryComponent<Args & {boxed?: boolean; inverse?: boolean}> = ({
 
     let row = 1;
     const list = (
-        <ListComponent dataAttributes={{testid: 'list'}}>
+        <ListComponent dataAttributes={{testid: 'list'}} aria-live={ariaLive} aria-atomic={ariaAtomic}>
             <RowComponent
                 headline={headline}
                 title={title}
@@ -419,6 +451,8 @@ const defaultArgs = {
     disabled: false,
     danger: false,
     overInverse: false,
+    'aria-live': 'off' as const,
+    'aria-atomic': false as const,
 };
 
 export const RowListStory: StoryComponent<Args> = (args) => <Template {...args} />;

src/__stories__/stack-story.tsx

@@ -34,11 +34,17 @@ const ComponentThatReturnsNullComponent = () => <Null />;
 
 type Args = {
     space: string;
+    'aria-live': 'off' | 'polite' | 'assertive';
+    'aria-atomic': boolean;
 };
 
-export const Default: StoryComponent<Args> = ({space}) => (
+export const Default: StoryComponent<Args> = ({space, 'aria-live': ariaLive, 'aria-atomic': ariaAtomic}) => (
     <div style={{height: '100vh'}}>
-        <Stack space={(Number.isInteger(+space) ? +space : space) as never}>
+        <Stack
+            space={(Number.isInteger(+space) ? +space : space) as never}
+            aria-live={ariaLive}
+            aria-atomic={ariaAtomic}
+        >
             <ComponentThatReturnsNullComponent />
             <Row>One</Row>
             {null}
@@ -54,7 +60,16 @@ export const Default: StoryComponent<Args> = ({space}) => (
 );
 
 Default.storyName = 'Stack';
-
 Default.args = {
     space: '32',
+    'aria-live': 'off' as const,
+    'aria-atomic': false as const,
+};
+Default.argTypes = {
+    space: {control: {type: 'select'}},
+    'aria-live': {
+        options: ['off', 'polite', 'assertive'],
+        control: {type: 'select'},
+    },
+    'aria-atomic': {control: {type: 'boolean'}},
 };

src/list.tsx

@@ -673,25 +673,35 @@ export const Row = React.forwardRef<TouchableElement, RowContentProps>(
     )
 );
 
+type CommonAccessibilityProps = {
+    'aria-live'?: 'polite' | 'off' | 'assertive';
+    'aria-atomic'?: boolean;
+};
+
 type RowListProps = {
     children: React.ReactNode;
     ariaLabelledby?: string;
     role?: string;
     dataAttributes?: DataAttributes;
-};
+} & CommonAccessibilityProps;
 
 export const RowList = ({
     children,
     ariaLabelledby,
     role = 'list',
+    'aria-live': ariaLive = 'off',
+    'aria-atomic': ariaAtomic = false,
     dataAttributes,
 }: RowListProps): JSX.Element => {
     const childrenContent = React.Children.toArray(children).filter(Boolean);
     const lastIndex = childrenContent.length - 1;
+
     return (
         <div
             role={role}
             aria-labelledby={ariaLabelledby}
+            aria-live={ariaLive}
+            aria-atomic={ariaAtomic}
             {...getPrefixedDataAttributes(dataAttributes, 'RowList')}
         >
             {childrenContent.map((child, index) => (
@@ -711,8 +721,8 @@ export const RowList = ({
 // danger + isInverse is not allowed
 type CommonBoxedRowProps =
     | {
-          danger: true;
           isInverse?: false;
+          danger: true;
       }
     | {
           isInverse?: boolean;
@@ -752,18 +762,22 @@ type BoxedRowListProps = {
     ariaLabelledby?: string;
     role?: string;
     dataAttributes?: DataAttributes;
-};
+} & CommonAccessibilityProps;
 
 export const BoxedRowList = ({
     children,
     ariaLabelledby,
     role = 'list',
     dataAttributes,
+    'aria-live': ariaLive = 'off',
+    'aria-atomic': ariaAtomic = false,
 }: BoxedRowListProps): JSX.Element => (
     <Stack
         space={16}
         role={role}
         aria-labelledby={ariaLabelledby}
+        aria-live={ariaLive}
+        aria-atomic={ariaAtomic}
         dataAttributes={{'component-name': 'BoxedRowList', testid: 'BoxedRowList', ...dataAttributes}}
     >
         {children}

src/stack.tsx

@@ -39,6 +39,8 @@ type Props = {
     className?: string;
     role?: string;
     'aria-labelledby'?: string;
+    'aria-live'?: 'polite' | 'off' | 'assertive';
+    'aria-atomic'?: boolean;
     dataAttributes?: DataAttributes;
 };
 
@@ -48,6 +50,8 @@ const Stack = ({
     children,
     role,
     'aria-labelledby': ariaLabelledby,
+    'aria-live': ariaLive,
+    'aria-atomic': ariaAtomic,
     dataAttributes,
 }: Props): JSX.Element => {
     const isFlexStack = typeof space === 'string';
@@ -58,6 +62,8 @@ const Stack = ({
             style={applyCssVars(calcInlineVars(space))}
             role={role}
             aria-labelledby={ariaLabelledby}
+            aria-live={ariaLive}
+            aria-atomic={ariaAtomic}
             {...getPrefixedDataAttributes(dataAttributes)}
         >
             {React.Children.map(children, (child) => (