[Layout] Add suport for passing in aria attributes

.changeset/slow-rocks-press.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Updated `Box` and `AlphaStack` to accept aria attributes

polaris-react/src/components/AlphaStack/AlphaStack.tsx

@@ -16,7 +16,7 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
 type Gap = ResponsiveProp<SpacingSpaceScale>;
 
-export interface AlphaStackProps {
+export interface AlphaStackProps extends React.AriaAttributes {
   children?: React.ReactNode;
   /** HTML Element type
    * @default 'div'
@@ -34,6 +34,8 @@ export interface AlphaStackProps {
    * @default '4'
    */
   gap?: Gap;
+  /** HTML id attribute */
+  id?: string;
 }
 
 export const AlphaStack = ({
@@ -42,6 +44,8 @@ export const AlphaStack = ({
   align = 'start',
   fullWidth = false,
   gap = '4',
+  id,
+  ...restProps
 }: AlphaStackProps) => {
   const className = classNames(
     styles.AlphaStack,
@@ -59,6 +63,7 @@ export const AlphaStack = ({
     {
       className,
       style: sanitizeCustomProperties(style),
+      ...restProps,
     },
     children,
   );

polaris-react/src/components/Box/Box.tsx

@@ -68,7 +68,7 @@ export type BackgroundColors =
   | ColorsActionTokenAlias
   | ColorsSurfaceTokenAlias;
 
-export interface BoxProps {
+export interface BoxProps extends React.AriaAttributes {
   children?: React.ReactNode;
   /** HTML Element type
    * @default 'div'
@@ -216,6 +216,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       insetInlineEnd,
       zIndex,
       opacity,
+      ...restProps
     },
     ref,
   ) => {
@@ -326,6 +327,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
         id,
         ref,
         style: sanitizeCustomProperties(style),
+        ...restProps,
       },
       children,
     );

polaris-react/src/components/Box/tests/Box.test.tsx

@@ -111,4 +111,17 @@ describe('Box', () => {
       }) as React.CSSProperties,
     });
   });
+
+  it('renders the aria attributes that matches the aria attributes passed in', () => {
+    const box = mountWithApp(
+      <Box aria-required aria-describedby="test">
+        {children}
+      </Box>,
+    );
+
+    expect(box).toContainReactComponent('div', {
+      'aria-required': true,
+      'aria-describedby': 'test',
+    });
+  });
 });