fix(button): forward expanded state to the interactive control

src/components/Button/Button.tsx

@@ -82,6 +82,10 @@ export type Props = Omit<ViewProps, 'style'> & {
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
   'aria-label'?: string;
+  /**
+   * Indicates whether the element's controlled content is expanded.
+   */
+  'aria-expanded'?: boolean;
   /**
    * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
    */
@@ -171,6 +175,7 @@ const Button = ({
   textColor: customTextColor,
   children,
   'aria-label': ariaLabel,
+  'aria-expanded': ariaExpanded,
   accessibilityHint,
   role = 'button',
   hitSlop,
@@ -328,6 +333,7 @@ const Button = ({
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
         delayLongPress={delayLongPress}
         aria-label={ariaLabel}
+        aria-expanded={ariaExpanded}
         accessibilityHint={accessibilityHint}
         role={role}
         aria-disabled={disabled}

src/components/__tests__/Button.test.tsx

@@ -24,6 +24,22 @@ it('renders text button by default', async () => {
   expect(tree).toMatchSnapshot();
 });
 
+it.each<[boolean, 'toBeExpanded' | 'toBeCollapsed']>([
+  [true, 'toBeExpanded'],
+  [false, 'toBeCollapsed'],
+])(
+  'exposes aria-expanded=%s on the interactive button',
+  async (expanded, matcher) => {
+    await render(
+      <Button aria-expanded={expanded} onPress={() => {}}>
+        Show details
+      </Button>
+    );
+
+    expect(screen.getByRole('button', { name: 'Show details' }))[matcher]();
+  }
+);
+
 it('renders text button with mode', async () => {
   const tree = (
     await render(<Button mode="text">Text Button</Button>)