From dcc4b98619b241d7cbec49f3040129bc5bb1841c Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Tue, 27 Oct 2026 12:54:51 -0700
Subject: [PATCH 1/6] fix(agentic): expose native Button Toggle semantics

Declare resolved Toggle actions for caller-owned selection, retain native action forwarding, and add checked-state ownership and stable-layout regressions without physical input.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .changeset/sharp-teeth-happen.md              |   5 +
 .../components/src/components/button/SPEC.md  |   6 +-
 .../src/components/button/button.stories.tsx  | 192 +++++++++++++++++-
 .../src/components/button/button.test.tsx     |  70 ++++++-
 .../components/button/spec/accessibility.md   |   8 +
 .../src/components/button/spec/source.json    |   2 +-
 .../src/components/button/spec/usage.md       |  23 +++
 .../src/components/button/useButton.ts        |  14 +-
 8 files changed, 312 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/sharp-teeth-happen.md

diff --git a/.changeset/sharp-teeth-happen.md b/.changeset/sharp-teeth-happen.md
new file mode 100644
index 0000000000..8ea5a12830
--- /dev/null
+++ b/.changeset/sharp-teeth-happen.md
@@ -0,0 +1,5 @@
+---
+"@fluentui-react-native/components": patch
+---
+
+Declare Button's native Toggle action when selected is supplied, preserving caller actions and externally owned checked state.
diff --git a/packages/agentic/components/src/components/button/SPEC.md b/packages/agentic/components/src/components/button/SPEC.md
index efac5fe7e3..bb7ae840f7 100644
--- a/packages/agentic/components/src/components/button/SPEC.md
+++ b/packages/agentic/components/src/components/button/SPEC.md
@@ -65,8 +65,8 @@ layout and requires an action-oriented `accessibilityLabel`.
 - **BTN-004:** Expose button semantics, merge caller accessibility state, warn
   for an unnamed icon-only button, and hide decorative icons.
 - **BTN-005:** Treat `selected` as externally owned state, expose checked
-  accessibility state when that prop is present, and reserve semibold label
-  width to prevent toggle reflow.
+  accessibility state and the resolved native Toggle action when that prop is
+  present, and reserve semibold label width to prevent toggle reflow.
 - **BTN-006:** Follow the [shared focus visual policy](../../../references/higher-order-components.md#focus-visual-policy)
   on the root: default to native rings on Windows/macOS and root-modality-aware
   custom rings on Win32, retaining the same dual-ring geometry.
@@ -112,5 +112,5 @@ Button adds no component-owned motion.
 | BTN-002     | `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx`                 |
 | BTN-003     | `button.styles.ts`, `useButtonStyles.ts`, `button.test.tsx`                 |
 | BTN-004     | `useButton.ts`, `useButtonStyles.ts`, `button.test.tsx`                     |
-| BTN-005     | `useButton.ts`, `renderButton.tsx`, `button.test.tsx`                       |
+| BTN-005     | `useButton.ts`, `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx` |
 | BTN-006     | `useButton.ts`, `useButtonStyles.ts`, `renderButton.tsx`, `button.test.tsx` |
diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index eeae742bf3..774e491db8 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -1,10 +1,12 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import { useState } from 'react';
 import type { ReactNode } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import type { AccessibilityActionEvent } from 'react-native';
 
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { ThemedRoot, useRootInputModality } from '@fluentui-react-native/design';
+import { resolveAccessibilityAction } from '@fluentui-react-native/framework-base';
 import type { FocusKeyboardEvent, FocusRequest } from '@fluentui-react-native/framework-base';
 import type { WdioStory } from '@fluentui-react-native/storybook-desktop/testing';
 
@@ -587,6 +589,194 @@ export const Disabled: Story = {
   },
 };
 
+export const NativeToggleSemantics: Story = {
+  render: () => {
+    const Scene = () => {
+      const [action, setAction] = useState({ count: 0, name: 'none' });
+      const [presses, setPresses] = useState(0);
+      return (
+        <View style={styles.story}>
+          <Button content="Not selected" selected={false} testID="button-native-toggle-off" />
+          <Button
+            content="Selected"
+            selected
+            testID="button-native-toggle-on"
+            onAccessibilityAction={(event: AccessibilityActionEvent) => {
+              const name = event.nativeEvent.actionName;
+              setAction((previous) => ({ count: previous.count + 1, name }));
+            }}
+            onPress={() => setPresses((count) => count + 1)}
+          />
+          <Button
+            content="Unavailable selection"
+            selected
+            disabled
+            testID="button-native-toggle-disabled"
+            onAccessibilityAction={(event: AccessibilityActionEvent) => {
+              const name = event.nativeEvent.actionName;
+              setAction((previous) => ({ count: previous.count + 1, name }));
+            }}
+            onPress={() => setPresses((count) => count + 1)}
+          />
+          <StoryStatus testID="button-native-toggle-actions">{`${action.count}:${action.name}`}</StoryStatus>
+          <StoryStatus testID="button-native-toggle-presses">{String(presses)}</StoryStatus>
+        </View>
+      );
+    };
+    return <Scene />;
+  },
+  wdio: {
+    'BTN-005 exposes caller-owned native checked state with and without disabled': async ({ browser, expect }) => {
+      const off = await browser.$('~button-native-toggle-off');
+      const on = await browser.$('~button-native-toggle-on');
+      const disabled = await browser.$('~button-native-toggle-disabled');
+      expect(await off.getTagName()).toBe('button');
+      expect(await on.getTagName()).toBe('button');
+      expect(await off.getProperty('checked')).toBe(false);
+      expect(await on.getProperty('checked')).toBe(true);
+      await expect(disabled).toBeDisabled();
+      expect(await disabled.getProperty('checked')).toBe(true);
+    },
+    'BTN-005 Win32 Toggle forwards once without a press or a controlled selection change': async ({ browser, expect, platform, skip }) => {
+      if (platform !== 'win32') {
+        skip('This case qualifies Win32 native Toggle transport.');
+        return;
+      }
+      if (!browser.capabilities['furn:features']?.accessibilityClick) {
+        skip('Native accessibility click is unavailable.');
+        return;
+      }
+      expect(browser.capabilities['furn:clickMode']).toBe('accessibility');
+      const button = await browser.$('~button-native-toggle-on');
+      const actions = await browser.$('~button-native-toggle-actions');
+      const presses = await browser.$('~button-native-toggle-presses');
+      await expect(actions).toHaveAttribute('name', '0:none');
+      await expect(presses).toHaveAttribute('name', '0');
+      expect(await button.getProperty('checked')).toBe(true);
+      await button.click();
+      await expect(actions).toHaveAttribute('name', '1:Toggle');
+      await expect(presses).toHaveAttribute('name', '0');
+      expect(await button.getProperty('checked')).toBe(true);
+    },
+    'BTN-004 Win32 disabled public activation rejects without callbacks or a checked-state change': async ({
+      browser,
+      expect,
+      platform,
+      skip,
+    }) => {
+      if (platform !== 'win32') {
+        skip('This case qualifies the Win32 disabled accessibility-click route, not disabled-provider dispatch.');
+        return;
+      }
+      if (!browser.capabilities['furn:features']?.accessibilityClick) {
+        skip('Native accessibility click is unavailable.');
+        return;
+      }
+      expect(browser.capabilities['furn:clickMode']).toBe('accessibility');
+      const button = await browser.$('~button-native-toggle-disabled');
+      await expect(button).toBeDisabled();
+      expect(await button.getProperty('checked')).toBe(true);
+      await expect(button.click()).rejects.toThrow();
+      await expect(await browser.$('~button-native-toggle-actions')).toHaveAttribute('name', '0:none');
+      await expect(await browser.$('~button-native-toggle-presses')).toHaveAttribute('name', '0');
+      expect(await button.getProperty('checked')).toBe(true);
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Toggle state remains externally owned. Native Toggle declarations come from Button, not this fixture. Action counters observe the original native event separately from onPress.',
+      },
+    },
+  },
+};
+
+export const NativeToggleSelection: Story = {
+  render: () => {
+    const Scene = () => {
+      const [selected, setSelected] = useState(false);
+      const [actions, setActions] = useState(0);
+      const [presses, setPresses] = useState(0);
+      const toggle = resolveAccessibilityAction('toggle', Platform.OS).name;
+      return (
+        <View style={styles.story}>
+          <Button
+            content="Favorite"
+            selected={selected}
+            testID="button-native-selection"
+            onAccessibilityAction={(event: AccessibilityActionEvent) => {
+              if (event.nativeEvent.actionName === toggle) {
+                setActions((count) => count + 1);
+                setSelected((value) => !value);
+              }
+            }}
+            onPress={() => {
+              setPresses((count) => count + 1);
+              setSelected((value) => !value);
+            }}
+          />
+          <StoryStatus testID="button-native-selection-state">{String(selected)}</StoryStatus>
+          <StoryStatus testID="button-native-selection-actions">{String(actions)}</StoryStatus>
+          <StoryStatus testID="button-native-selection-presses">{String(presses)}</StoryStatus>
+        </View>
+      );
+    };
+    return <Scene />;
+  },
+  wdio: {
+    'BTN-002 BTN-005 Win32 native Toggle updates caller selection without reflow or duplicate presses': async ({
+      browser,
+      expect,
+      platform,
+      skip,
+    }) => {
+      if (platform !== 'win32') {
+        skip('This case qualifies caller handling of Win32 native Toggle events.');
+        return;
+      }
+      if (!browser.capabilities['furn:features']?.accessibilityClick) {
+        skip('Native accessibility click is unavailable.');
+        return;
+      }
+      expect(browser.capabilities['furn:clickMode']).toBe('accessibility');
+      const { expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
+      const button = await browser.$('~button-native-selection');
+      const state = await browser.$('~button-native-selection-state');
+      const actions = await browser.$('~button-native-selection-actions');
+      const presses = await browser.$('~button-native-selection-presses');
+      await expect(state).toHaveAttribute('name', 'false');
+      await expect(actions).toHaveAttribute('name', '0');
+      await expect(presses).toHaveAttribute('name', '0');
+      await expectNativeState(browser, 'button-native-selection', 'checked', false);
+      const before = await browser.getElementRect(await button.elementId);
+      await button.click();
+      await expect(state).toHaveAttribute('name', 'true');
+      await expect(actions).toHaveAttribute('name', '1');
+      await expectNativeState(browser, 'button-native-selection', 'checked', true);
+      const selected = await browser.getElementRect(await button.elementId);
+      expect(selected.width).toBe(before.width);
+      expect(selected.height).toBe(before.height);
+      await button.click();
+      await expect(state).toHaveAttribute('name', 'false');
+      await expect(actions).toHaveAttribute('name', '2');
+      await expect(presses).toHaveAttribute('name', '0');
+      await expectNativeState(browser, 'button-native-selection', 'checked', false);
+      const reset = await browser.getElementRect(await button.elementId);
+      expect(reset.width).toBe(before.width);
+      expect(reset.height).toBe(before.height);
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The caller handles the native Toggle action and pointer onPress independently. This input-independent case checks native checked state and same-control bounds across both caller-owned transitions.',
+      },
+    },
+  },
+};
+
 export const WithLongText: Story = {
   render: () => (
     <StoryGroup label="Content width">
diff --git a/packages/agentic/components/src/components/button/button.test.tsx b/packages/agentic/components/src/components/button/button.test.tsx
index ba5c564178..beb873d68e 100644
--- a/packages/agentic/components/src/components/button/button.test.tsx
+++ b/packages/agentic/components/src/components/button/button.test.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @fluentui-react-native/framework-base */
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import type { Pressable, PressableProps, ViewStyle } from 'react-native';
 
 import { fireEvent } from '@testing-library/react-native';
@@ -185,6 +185,74 @@ describe('Button', () => {
     expect(getRoot(component).props.accessibilityState).toEqual({ disabled: false });
   });
 
+  it.each([false, true])('declares a native toggle action for selected=%s and owns the checked alias', async (selected) => {
+    const component = await renderButton({ content: 'Favorite', selected, 'aria-checked': !selected });
+    const root = getRoot(component);
+
+    expect(root.props.accessibilityActions).toEqual([{ name: 'Toggle' }]);
+    expect(root.props.accessibilityState.checked).toBe(selected);
+  });
+
+  it.each([
+    ['win32', 'Toggle'],
+    ['windows', 'toggle'],
+    ['macos', 'Toggle'],
+  ] as const)('resolves the native toggle action on %s', async (platform, action) => {
+    const replacement = jest.replaceProperty(Platform, 'OS', platform as typeof Platform.OS);
+    try {
+      const component = await renderButton({ content: 'Favorite', selected: false });
+
+      expect(getRoot(component).props.accessibilityActions).toEqual([{ name: action }]);
+    } finally {
+      replacement.restore();
+    }
+  });
+
+  it('preserves caller action labels and custom actions while deduplicating toggle declarations', async () => {
+    const component = await renderButton({
+      content: 'Favorite',
+      selected: false,
+      accessibilityActions: [{ name: 'toggle' }, { name: 'Toggle', label: 'Choose favorite' }, { name: 'custom', label: 'Details' }],
+    });
+
+    expect(getRoot(component).props.accessibilityActions).toEqual([
+      { name: 'Toggle', label: 'Choose favorite' },
+      { name: 'custom', label: 'Details' },
+    ]);
+  });
+
+  it('does not add a toggle action to an ordinary button', async () => {
+    const actions = [{ name: 'custom', label: 'Details' }];
+    const component = await renderButton({ content: 'Save', accessibilityActions: actions });
+
+    expect(getRoot(component).props.accessibilityActions).toBe(actions);
+    expect(getRoot(component).props['aria-checked']).toBeUndefined();
+  });
+
+  it.each([false, true])('preserves the caller action handler with disabled=%s', async (disabled) => {
+    const onAccessibilityAction = jest.fn();
+    const component = await renderButton({ content: 'Favorite', selected: true, disabled, onAccessibilityAction });
+    const root = getRoot(component);
+
+    expect(root.props.onAccessibilityAction).toBe(onAccessibilityAction);
+    expect(root.props.accessibilityState).toEqual({ disabled, checked: true });
+    expect(root.props.accessibilityActions).toEqual([{ name: 'Toggle' }]);
+  });
+
+  it('forwards the original native toggle event without synthesizing a press or changing controlled state', async () => {
+    const onAccessibilityAction = jest.fn();
+    const onPress = jest.fn();
+    const component = await renderButton({ content: 'Favorite', selected: false, onAccessibilityAction, onPress });
+    const event = { nativeEvent: { actionName: 'Toggle' } };
+
+    await fireEvent(getRoot(component), 'accessibilityAction', event);
+
+    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+    expect(onAccessibilityAction).toHaveBeenCalledWith(event);
+    expect(onPress).not.toHaveBeenCalled();
+    expect(getRoot(component).props.accessibilityState.checked).toBe(false);
+  });
+
   it('places the icon after content and applies user styles last', async () => {
     const style: ViewStyle = { backgroundColor: 'hotpink' };
     const component = await renderButton({
diff --git a/packages/agentic/components/src/components/button/spec/accessibility.md b/packages/agentic/components/src/components/button/spec/accessibility.md
index dac469bd93..9a394e0558 100644
--- a/packages/agentic/components/src/components/button/spec/accessibility.md
+++ b/packages/agentic/components/src/components/button/spec/accessibility.md
@@ -29,6 +29,14 @@ Disabled buttons communicate unavailable state, do not activate, and are
 removed from keyboard focus. Toggle-style buttons remain one button and
 announce their checked state from the externally supplied `selected` value.
 
+Supplying `selected`, including `false`, declares the platform's resolved
+Toggle action so Win32 UI Automation can expose checked state. Caller action
+labels and custom declarations are retained. The component-owned checked
+value also takes precedence over a conflicting `aria-checked` alias.
+Native action events are forwarded unchanged through `onAccessibilityAction`;
+they neither mutate `selected` nor synthesize `onPress`. An owner handling a
+native Toggle updates its own state from that event.
+
 The focus target follows the [shared focus visual policy](../../../../references/higher-order-components.md#focus-visual-policy).
 Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
 to a private `FocusRing` slot. Its configured ring Views remain mounted on the
diff --git a/packages/agentic/components/src/components/button/spec/source.json b/packages/agentic/components/src/components/button/spec/source.json
index 8912cd0710..4f1759b9f0 100644
--- a/packages/agentic/components/src/components/button/spec/source.json
+++ b/packages/agentic/components/src/components/button/spec/source.json
@@ -166,7 +166,7 @@
     },
     {
       "id": "BTN-005",
-      "evidence": ["useButton.ts", "renderButton.tsx", "button.test.tsx"]
+      "evidence": ["useButton.ts", "renderButton.tsx", "button.test.tsx", "button.stories.tsx"]
     },
     {
       "id": "BTN-006",
diff --git a/packages/agentic/components/src/components/button/spec/usage.md b/packages/agentic/components/src/components/button/spec/usage.md
index 183d554eac..8936d0e566 100644
--- a/packages/agentic/components/src/components/button/spec/usage.md
+++ b/packages/agentic/components/src/components/button/spec/usage.md
@@ -40,6 +40,29 @@ Do not use `disabled` to represent an unselected value. Avoid introducing new
 uses of this Button-specific selection API when a dedicated ToggleButton
 contract is required for alignment with current Flex guidance.
 
+Native Toggle actions arrive through `onAccessibilityAction`, independently
+of pointer and keyboard `onPress`. A caller supporting that transport also
+handles the resolved Toggle name and updates its own selected value:
+
+```tsx
+const toggleName = resolveAccessibilityAction('toggle', Platform.OS).name;
+
+<Button
+  content="Favorite"
+  selected={favorite}
+  onPress={() => setFavorite((value) => !value)}
+  onAccessibilityAction={(event) => {
+    if (event.nativeEvent.actionName === toggleName) {
+      setFavorite((value) => !value);
+    }
+  }}
+/>;
+```
+
+Import `Platform` from `react-native` and `resolveAccessibilityAction` from
+`@fluentui-react-native/framework-base`. Button declares the native action;
+the caller need not supply `accessibilityActions` or synthesize a press.
+
 Content wraps when a consumer constrains the root. Supply a content-slot
 override only when a product deliberately needs a different truncation or
 text presentation policy.
diff --git a/packages/agentic/components/src/components/button/useButton.ts b/packages/agentic/components/src/components/button/useButton.ts
index f67b845db4..b66ea94587 100644
--- a/packages/agentic/components/src/components/button/useButton.ts
+++ b/packages/agentic/components/src/components/button/useButton.ts
@@ -1,7 +1,13 @@
 import type { ButtonProps, ButtonState } from './button.types';
-import { useAccessibilityLabelWarning, useFocusablePressable, useSlot, useOptionalSlot } from '@fluentui-react-native/framework-base';
+import {
+  resolveAccessibilityAction,
+  useAccessibilityLabelWarning,
+  useFocusablePressable,
+  useSlot,
+  useOptionalSlot,
+} from '@fluentui-react-native/framework-base';
 import { useThemeState } from '@fluentui-react-native/design';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 import type { PressableProps } from 'react-native';
 import { useFocusVisuals } from '../../common/useFocusVisuals';
 import { Icon } from '../../primitives/icon/icon';
@@ -50,6 +56,10 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
   const themeState = useThemeState();
   const nativeProps: PressableProps = {
     ...rest,
+    accessibilityActions: isToggleButton
+      ? resolveAccessibilityAction('toggle', Platform.OS, rest.accessibilityActions).accessibilityActions
+      : rest.accessibilityActions,
+    'aria-checked': isToggleButton ? selected : rest['aria-checked'],
     role: 'button',
     accessibilityState: {
       ...accessibilityState,

From 1f4a05f3545d1de3be7fb60f247fdbfd7e93ea44 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Tue, 27 Oct 2026 13:06:20 -0700
Subject: [PATCH 2/6] fix(button): project content names and demonstrate native
 toggle ownership

Preserve explicit naming and label references. Add runtime and native naming regressions, and allow the caller-owned selection example to use real native action transport without physical input.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .changeset/sharp-teeth-happen.md              |  2 +-
 .../components/src/components/button/SPEC.md  | 19 +++++----
 .../src/components/button/button.stories.tsx  | 39 ++++++++++++++++--
 .../src/components/button/button.test.tsx     | 41 +++++++++++++++++++
 .../components/button/spec/accessibility.md   |  5 +++
 .../src/components/button/spec/source.json    |  2 +-
 .../src/components/button/useButton.ts        |  8 ++++
 7 files changed, 102 insertions(+), 14 deletions(-)

diff --git a/.changeset/sharp-teeth-happen.md b/.changeset/sharp-teeth-happen.md
index 8ea5a12830..d1e7907cd9 100644
--- a/.changeset/sharp-teeth-happen.md
+++ b/.changeset/sharp-teeth-happen.md
@@ -2,4 +2,4 @@
 "@fluentui-react-native/components": patch
 ---
 
-Declare Button's native Toggle action when selected is supplied, preserving caller actions and externally owned checked state.
+Expose Button's plain content as its native name and declare Toggle when selected is supplied, preserving explicit naming, caller actions and externally owned checked state.
diff --git a/packages/agentic/components/src/components/button/SPEC.md b/packages/agentic/components/src/components/button/SPEC.md
index bb7ae840f7..ca76ee56bd 100644
--- a/packages/agentic/components/src/components/button/SPEC.md
+++ b/packages/agentic/components/src/components/button/SPEC.md
@@ -62,7 +62,8 @@ layout and requires an action-oriented `accessibilityLabel`.
   with the selected-icon fallback and wrapping content behavior.
 - **BTN-003:** Resolve appearance, selection, disabled, pressed, and hovered
   visual state from Flex tokens; user root style wins last.
-- **BTN-004:** Expose button semantics, merge caller accessibility state, warn
+- **BTN-004:** Expose button semantics and a native name from plain content
+  unless the caller supplies naming, merge caller accessibility state, warn
   for an unnamed icon-only button, and hide decorative icons.
 - **BTN-005:** Treat `selected` as externally owned state, expose checked
   accessibility state and the resolved native Toggle action when that prop is
@@ -106,11 +107,11 @@ Button adds no component-owned motion.
 
 ## Conformance
 
-| Requirement | Evidence                                                                    |
-| ----------- | --------------------------------------------------------------------------- |
-| BTN-001     | `button.types.ts`, `useButton.ts`, `button.test.tsx`                        |
-| BTN-002     | `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx`                 |
-| BTN-003     | `button.styles.ts`, `useButtonStyles.ts`, `button.test.tsx`                 |
-| BTN-004     | `useButton.ts`, `useButtonStyles.ts`, `button.test.tsx`                     |
-| BTN-005     | `useButton.ts`, `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx` |
-| BTN-006     | `useButton.ts`, `useButtonStyles.ts`, `renderButton.tsx`, `button.test.tsx` |
+| Requirement | Evidence                                                                      |
+| ----------- | ----------------------------------------------------------------------------- |
+| BTN-001     | `button.types.ts`, `useButton.ts`, `button.test.tsx`                          |
+| BTN-002     | `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx`                   |
+| BTN-003     | `button.styles.ts`, `useButtonStyles.ts`, `button.test.tsx`                   |
+| BTN-004     | `useButton.ts`, `useButtonStyles.ts`, `button.test.tsx`, `button.stories.tsx` |
+| BTN-005     | `useButton.ts`, `renderButton.tsx`, `button.test.tsx`, `button.stories.tsx`   |
+| BTN-006     | `useButton.ts`, `useButtonStyles.ts`, `renderButton.tsx`, `button.test.tsx`   |
diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index 774e491db8..b8e3b73fc9 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -525,8 +525,8 @@ export const ExternallyDrivenSelection: Story = {
     'updates and resets caller-owned selection': async ({ browser, expect, skip }) => {
       const features = browser.capabilities['furn:features'];
       if (!features) throw new Error('Desktop Driver did not provide feature capabilities.');
-      if (!features.physicalClick) {
-        skip('This test requires physical pointer input.');
+      if (!features.physicalClick && !features.accessibilityClick) {
+        skip('This test requires native accessibility activation or physical pointer input.');
         return;
       }
       const favorite = await browser.$('~agentic-storybook-button-favorite');
@@ -543,12 +543,18 @@ export const ExternallyDrivenSelection: Story = {
   render: () => {
     const ToggleGroup = () => {
       const [selected, setSelected] = useState(false);
+      const toggle = resolveAccessibilityAction('toggle', Platform.OS).name;
       return (
         <StoryGroup label={selected ? 'Selected' : 'Not selected'} labelTestID="agentic-storybook-button-selection-state">
           <Button
             content="Favorite"
             icon={regularStarIcon}
             onPress={() => setSelected(!selected)}
+            onAccessibilityAction={(event: AccessibilityActionEvent) => {
+              if (event.nativeEvent.actionName === toggle) {
+                setSelected((value) => !value);
+              }
+            }}
             selected={selected}
             selectedIcon={filledStarIcon}
             testID="agentic-storybook-button-favorite"
@@ -563,7 +569,7 @@ export const ExternallyDrivenSelection: Story = {
     docs: {
       description: {
         story:
-          'A toggle button never changes its own state. The caller owns selected and updates it from onPress, which is why an external action such as Reset can change it just as easily.',
+          'A toggle button never changes its own state. The caller handles onPress and the native Toggle action independently; an external Reset can change the same caller-owned value. Pointer/focus policy is tested separately.',
       },
     },
   },
@@ -589,6 +595,33 @@ export const Disabled: Story = {
   },
 };
 
+export const NativeNames: Story = {
+  render: () => (
+    <View style={styles.story}>
+      <Button content="Save" testID="button-name-plain" />
+      <Button content={{ children: 'Slot label' }} testID="button-name-slot" />
+      <Button content={0} testID="button-name-number" />
+      <Button content="Save" accessibilityLabel="Create document" testID="button-name-explicit" />
+      <Button content="Save" aria-label="ARIA action" testID="button-name-aria" />
+    </View>
+  ),
+  wdio: {
+    'BTN-004 exposes plain, slot and numeric native names while preserving caller names': async ({ browser, expect }) => {
+      for (const [id, name] of [
+        ['button-name-plain', 'Save'],
+        ['button-name-slot', 'Slot label'],
+        ['button-name-number', '0'],
+        ['button-name-explicit', 'Create document'],
+        ['button-name-aria', 'ARIA action'],
+      ]) {
+        const button = await browser.$(`~${id}`);
+        expect(await button.getTagName()).toBe('button');
+        expect(await button.getProperty('name')).toBe(name);
+      }
+    },
+  },
+};
+
 export const NativeToggleSemantics: Story = {
   render: () => {
     const Scene = () => {
diff --git a/packages/agentic/components/src/components/button/button.test.tsx b/packages/agentic/components/src/components/button/button.test.tsx
index beb873d68e..8691fad177 100644
--- a/packages/agentic/components/src/components/button/button.test.tsx
+++ b/packages/agentic/components/src/components/button/button.test.tsx
@@ -78,6 +78,47 @@ describe('Button', () => {
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
+  it.each([
+    ['Save', 'Save'],
+    [0, '0'],
+    [{ children: 'From slot' }, 'From slot'],
+    [{ children: 0 }, '0'],
+  ] as const)('projects plain content %j onto the native name', async (content, name) => {
+    const component = await renderButton({ content });
+
+    expect(getRoot(component).props.accessibilityLabel).toBe(name);
+  });
+
+  it.each([{ accessibilityLabel: 'Custom name' }, { 'aria-label': 'Custom name' }])(
+    'preserves explicit native or ARIA naming %j',
+    async (naming) => {
+      const component = await renderButton({ content: 'Save', ...naming });
+
+      expect(getRoot(component).props.accessibilityLabel).toBe('Custom name');
+    },
+  );
+
+  it.each([{ accessibilityLabelledBy: 'external-label' }, { 'aria-labelledby': 'external-label' }])(
+    'does not add a competing name for an explicit label reference %j',
+    async (naming) => {
+      const component = await renderButton({ content: 'Save', ...naming });
+
+      expect(getRoot(component).props.accessibilityLabel).toBeUndefined();
+    },
+  );
+
+  it('preserves an explicitly empty native label', async () => {
+    const component = await renderButton({ content: 'Save', accessibilityLabel: '' });
+
+    expect(getRoot(component).props.accessibilityLabel).toBe('');
+  });
+
+  it('does not infer a native name from rich content', async () => {
+    const component = await renderButton({ content: { children: <View /> } });
+
+    expect(getRoot(component).props.accessibilityLabel).toBeUndefined();
+  });
+
   it('disables interaction and exposes disabled accessibility state', async () => {
     const onPress = jest.fn();
     const component = await renderButton({ content: 'Unavailable', disabled: true, onPress });
diff --git a/packages/agentic/components/src/components/button/spec/accessibility.md b/packages/agentic/components/src/components/button/spec/accessibility.md
index 9a394e0558..bccbaeb182 100644
--- a/packages/agentic/components/src/components/button/spec/accessibility.md
+++ b/packages/agentic/components/src/components/button/spec/accessibility.md
@@ -12,6 +12,11 @@ The root defaults to `accessible={true}` and is focusable unless disabled.
 Callers may provide an accessible name through `accessibilityLabel` or
 `accessibilityLabelledBy`.
 
+Without explicit native or ARIA naming or a labelled-by reference, plain
+string or numeric content (including plain content-slot children) becomes
+the native accessible name. Rich content requires caller-supplied naming.
+Explicit names, including an empty native label, retain their existing precedence.
+
 ## Icon-only buttons
 
 An icon-only button must provide a concise label that describes its action,
diff --git a/packages/agentic/components/src/components/button/spec/source.json b/packages/agentic/components/src/components/button/spec/source.json
index 4f1759b9f0..75bcb05c7f 100644
--- a/packages/agentic/components/src/components/button/spec/source.json
+++ b/packages/agentic/components/src/components/button/spec/source.json
@@ -162,7 +162,7 @@
     },
     {
       "id": "BTN-004",
-      "evidence": ["useButton.ts", "useButtonStyles.ts", "button.test.tsx"]
+      "evidence": ["useButton.ts", "useButtonStyles.ts", "button.test.tsx", "button.stories.tsx"]
     },
     {
       "id": "BTN-005",
diff --git a/packages/agentic/components/src/components/button/useButton.ts b/packages/agentic/components/src/components/button/useButton.ts
index b66ea94587..eb478d4ffc 100644
--- a/packages/agentic/components/src/components/button/useButton.ts
+++ b/packages/agentic/components/src/components/button/useButton.ts
@@ -41,6 +41,13 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
   const hasIcon = iconProp !== undefined && iconProp !== null;
   const hasSelectedIcon = selectedIconProp !== undefined && selectedIconProp !== null;
   const iconOnly = !hasContent && (hasIcon || hasSelectedIcon);
+  const contentChildren = contentProp && typeof contentProp === 'object' && 'children' in contentProp ? contentProp.children : contentProp;
+  const contentLabel = typeof contentChildren === 'string' || typeof contentChildren === 'number' ? String(contentChildren) : undefined;
+  const hasExplicitName =
+    rest.accessibilityLabel !== undefined ||
+    rest['aria-label'] !== undefined ||
+    rest.accessibilityLabelledBy !== undefined ||
+    rest['aria-labelledby'] !== undefined;
 
   // A button renders selection but never changes it: a press is an action, so the caller owns the selected value.
   const isToggleButton = selected !== undefined;
@@ -56,6 +63,7 @@ export function useButton_unstable(props: ButtonProps): ButtonState {
   const themeState = useThemeState();
   const nativeProps: PressableProps = {
     ...rest,
+    ...(!hasExplicitName && { accessibilityLabel: contentLabel }),
     accessibilityActions: isToggleButton
       ? resolveAccessibilityAction('toggle', Platform.OS, rest.accessibilityActions).accessibilityActions
       : rest.accessibilityActions,

From 2f98ee6366752f8ae916b7f28b25ff286bb8ebb2 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Tue, 27 Oct 2026 13:12:06 -0700
Subject: [PATCH 3/6] test(button): handle the reset control's native action in
 its owner

Keep native accessibility actions distinct from onPress while qualifying caller-owned reset without physical input.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../components/src/components/button/button.stories.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index b8e3b73fc9..6dce6f63f8 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -559,7 +559,13 @@ export const ExternallyDrivenSelection: Story = {
             selectedIcon={filledStarIcon}
             testID="agentic-storybook-button-favorite"
           />
-          <Button appearance="subtle" content="Reset" onPress={() => setSelected(false)} testID="agentic-storybook-button-reset" />
+          <Button
+            appearance="subtle"
+            content="Reset"
+            onAccessibilityAction={() => setSelected(false)}
+            onPress={() => setSelected(false)}
+            testID="agentic-storybook-button-reset"
+          />
         </StoryGroup>
       );
     };

From 29a5f4efbe312422cf9a245415c00d45f2aecb29 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Tue, 27 Oct 2026 13:16:47 -0700
Subject: [PATCH 4/6] test(button): use the native accessibility tap for
 ordinary reset

Keep ordinary accessibility taps and declared Toggle actions distinct from pointer/keyboard onPress; exercise each real transport through its caller.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../components/src/components/button/button.stories.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index 6dce6f63f8..1ade9b30e0 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -562,7 +562,7 @@ export const ExternallyDrivenSelection: Story = {
           <Button
             appearance="subtle"
             content="Reset"
-            onAccessibilityAction={() => setSelected(false)}
+            onAccessibilityTap={() => setSelected(false)}
             onPress={() => setSelected(false)}
             testID="agentic-storybook-button-reset"
           />
@@ -575,7 +575,7 @@ export const ExternallyDrivenSelection: Story = {
     docs: {
       description: {
         story:
-          'A toggle button never changes its own state. The caller handles onPress and the native Toggle action independently; an external Reset can change the same caller-owned value. Pointer/focus policy is tested separately.',
+          'A toggle button never changes its own state. The caller handles onPress, native Toggle actions, and the Reset accessibility tap independently. Pointer/focus policy is tested separately.',
       },
     },
   },

From 04db193f6ca421c7eb19b4ae66cb432c6becb468 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 12:27:27 -0700
Subject: [PATCH 5/6] test(button): qualify native selection by desktop
 contract

Keep portable button role and enabled-state assertions shared, isolate Windows checked projection, and require physical macOS caller activation without changing product behavior.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1
---
 .../components/src/components/button/SPEC.md  |  8 ++++
 .../src/components/button/button.stories.tsx  | 44 ++++++++++++++++---
 .../components/button/spec/accessibility.md   | 11 ++++-
 .../src/components/button/spec/usage.md       |  2 +
 4 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/packages/agentic/components/src/components/button/SPEC.md b/packages/agentic/components/src/components/button/SPEC.md
index ca76ee56bd..54207440e6 100644
--- a/packages/agentic/components/src/components/button/SPEC.md
+++ b/packages/agentic/components/src/components/button/SPEC.md
@@ -93,6 +93,14 @@ Windows and macOS use React Native press, hover, and focus events. `Enter` and
 `Space` activation are supplied by the native `Pressable` button behavior.
 Disabled buttons are not focusable.
 
+The checked React Native state and resolved Toggle declaration do not imply
+identical native accessibility projection. Windows exposes toggle state through
+UI Automation. With the pinned macOS renderer and desktop provider, the retained
+AXButton role has no supported native `checked` read, and Toggle is a custom
+action rather than an AXPress mapping. Native role and enabled-state checks
+remain shared; checked projection is qualified separately on Windows.
+Caller-owned pointer transitions on macOS require physical input.
+
 Button adds no component-owned motion.
 
 ## Divergences from Flex
diff --git a/packages/agentic/components/src/components/button/button.stories.tsx b/packages/agentic/components/src/components/button/button.stories.tsx
index 1ade9b30e0..a178b57d9a 100644
--- a/packages/agentic/components/src/components/button/button.stories.tsx
+++ b/packages/agentic/components/src/components/button/button.stories.tsx
@@ -522,21 +522,34 @@ export const ExternallyDrivenSelection: Story = {
     'starts unselected': async ({ browser, expect }) => {
       await expect(await browser.$('~agentic-storybook-button-selection-state')).toHaveText('Not selected');
     },
-    'updates and resets caller-owned selection': async ({ browser, expect, skip }) => {
+    'updates and resets caller-owned selection': async ({ browser, expect, platform, skip }) => {
       const features = browser.capabilities['furn:features'];
       if (!features) throw new Error('Desktop Driver did not provide feature capabilities.');
+      if (platform === 'macos' && !features.physicalClick) {
+        skip('macOS caller-owned selection requires physical pointer input; the custom Toggle action is not an AXPress route.');
+        return;
+      }
       if (!features.physicalClick && !features.accessibilityClick) {
         skip('This test requires native accessibility activation or physical pointer input.');
         return;
       }
+      const { clickPhysical } = await import('../../common/desktopFocus.wdio.ts');
       const favorite = await browser.$('~agentic-storybook-button-favorite');
       const reset = await browser.$('~agentic-storybook-button-reset');
       const status = await browser.$('~agentic-storybook-button-selection-state');
       await expect(favorite).toBeEnabled();
       await expect(status).toHaveText('Not selected');
-      await favorite.click();
+      if (platform === 'macos') {
+        await clickPhysical(browser, 'agentic-storybook-button-favorite');
+      } else {
+        await favorite.click();
+      }
       await expect(status).toHaveText('Selected');
-      await reset.click();
+      if (platform === 'macos') {
+        await clickPhysical(browser, 'agentic-storybook-button-reset');
+      } else {
+        await reset.click();
+      }
       await expect(status).toHaveText('Not selected');
     },
   },
@@ -575,7 +588,7 @@ export const ExternallyDrivenSelection: Story = {
     docs: {
       description: {
         story:
-          'A toggle button never changes its own state. The caller handles onPress, native Toggle actions, and the Reset accessibility tap independently. Pointer/focus policy is tested separately.',
+          'A toggle button never changes its own state. The caller handles pointer onPress, Windows native Toggle activation, and the Reset accessibility tap independently. macOS uses physical pointer input because its custom Toggle is not an AXPress route. Pointer/focus policy is tested separately.',
       },
     },
   },
@@ -665,15 +678,34 @@ export const NativeToggleSemantics: Story = {
     return <Scene />;
   },
   wdio: {
-    'BTN-005 exposes caller-owned native checked state with and without disabled': async ({ browser, expect }) => {
+    'BTN-004 BTN-005 exposes native button roles and enabled or disabled state': async ({ browser, expect }) => {
       const off = await browser.$('~button-native-toggle-off');
       const on = await browser.$('~button-native-toggle-on');
       const disabled = await browser.$('~button-native-toggle-disabled');
       expect(await off.getTagName()).toBe('button');
       expect(await on.getTagName()).toBe('button');
+      expect(await disabled.getTagName()).toBe('button');
+      await expect(off).toBeEnabled();
+      await expect(on).toBeEnabled();
+      await expect(disabled).toBeDisabled();
+    },
+    'BTN-005 Windows native checked projection reflects caller selection including disabled': async ({
+      browser,
+      expect,
+      platform,
+      skip,
+    }) => {
+      if (platform === 'macos') {
+        skip(
+          'Native checked projection is unsupported for the retained macOS AXButton role; shared role and enabled-state checks run separately.',
+        );
+        return;
+      }
+      const off = await browser.$('~button-native-toggle-off');
+      const on = await browser.$('~button-native-toggle-on');
+      const disabled = await browser.$('~button-native-toggle-disabled');
       expect(await off.getProperty('checked')).toBe(false);
       expect(await on.getProperty('checked')).toBe(true);
-      await expect(disabled).toBeDisabled();
       expect(await disabled.getProperty('checked')).toBe(true);
     },
     'BTN-005 Win32 Toggle forwards once without a press or a controlled selection change': async ({ browser, expect, platform, skip }) => {
diff --git a/packages/agentic/components/src/components/button/spec/accessibility.md b/packages/agentic/components/src/components/button/spec/accessibility.md
index bccbaeb182..7ee5b75f69 100644
--- a/packages/agentic/components/src/components/button/spec/accessibility.md
+++ b/packages/agentic/components/src/components/button/spec/accessibility.md
@@ -32,7 +32,7 @@ Both icon slots are decorative children of the named root and set
 
 Disabled buttons communicate unavailable state, do not activate, and are
 removed from keyboard focus. Toggle-style buttons remain one button and
-announce their checked state from the externally supplied `selected` value.
+provide checked React Native state from the externally supplied `selected` value.
 
 Supplying `selected`, including `false`, declares the platform's resolved
 Toggle action so Win32 UI Automation can expose checked state. Caller action
@@ -42,6 +42,15 @@ Native action events are forwarded unchanged through `onAccessibilityAction`;
 they neither mutate `selected` nor synthesize `onPress`. An owner handling a
 native Toggle updates its own state from that event.
 
+Native projection is platform-specific. Windows UI Automation exposes toggle
+state, but the pinned macOS renderer and desktop provider do not expose a
+supported `checked` property for the retained AXButton role. macOS Toggle is a
+custom action, not an implied AXPress/default activation route. Shared native
+tests still verify button roles and enabled/disabled state; Windows checked-state
+and Win32 action-transport tests qualify their respective native contracts.
+Unsupported macOS checked projection is reported explicitly, not treated as false
+or inferred from the rendered selection label.
+
 The focus target follows the [shared focus visual policy](../../../../references/higher-order-components.md#focus-visual-policy).
 Windows/macOS default to the native ring, with no custom subtree. Win32 defaults
 to a private `FocusRing` slot. Its configured ring Views remain mounted on the
diff --git a/packages/agentic/components/src/components/button/spec/usage.md b/packages/agentic/components/src/components/button/spec/usage.md
index 8936d0e566..6b0d2a69fd 100644
--- a/packages/agentic/components/src/components/button/spec/usage.md
+++ b/packages/agentic/components/src/components/button/spec/usage.md
@@ -62,6 +62,8 @@ const toggleName = resolveAccessibilityAction('toggle', Platform.OS).name;
 Import `Platform` from `react-native` and `resolveAccessibilityAction` from
 `@fluentui-react-native/framework-base`. Button declares the native action;
 the caller need not supply `accessibilityActions` or synthesize a press.
+On macOS this is a custom action declaration, not a guarantee that default
+AX activation invokes Toggle.
 
 Content wraps when a consumer constrains the root. Supply a content-slot
 override only when a product deliberately needs a different truncation or

From 1120de61f24db7a29f792cb3ed5788b670df8b17 Mon Sep 17 00:00:00 2001
From: Srividya Ramaswamy <sriramas@microsoft.com>
Date: Wed, 28 Oct 2026 13:01:21 -0700
Subject: [PATCH 6/6] chore(button): record contiguous qualification trailers

Keep the validated source unchanged and preserve append-only history.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4b66f3ef-85ac-4405-bd35-dcc167a077b1