feat: Add FieldContext to pass props to controls inside Field

change/@fluentui-react-checkbox-7491f15b-367b-482c-9bfc-aa897546d57f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-combobox-95bf9a08-b64f-4a05-81ac-4debdb1a6662.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-903a28f2-111a-4bce-bb47-396da6422862.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Export hooks for FieldContext",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-field-2c40a846-0df9-4d61-9472-ec59670b77a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Add FieldContext to pass props to controls inside Field",
+  "packageName": "@fluentui/react-field",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-input-b5935497-9fbb-4d7f-ba38-e498bba5acd2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-progress-97ad2a19-e138-4e89-b753-89b83e0b42d7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-progress",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-radio-b2e01e06-ab25-451c-af2b-8f7a04175bde.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-radio",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-select-1136d423-6f0b-422f-a1e1-c90accc1dccb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-slider-bc337120-f0bf-4b83-bbdd-93ce62b6216e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-spinbutton-184fd4ef-de9a-4395-858e-45b5dda2e51a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-switch-3d5f6b94-a231-42e7-8dd0-72a9f4756362.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-switch",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-textarea-6e6be83f-e5ec-4a39-86b5-296f450658c2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Hook up FieldContext for use inside a Field",
+  "packageName": "@fluentui/react-textarea",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import { Field } from '@fluentui/react-field';
 import { Checkbox } from './Checkbox';
 import { isConformant } from '../../testing/isConformant';
 import { resetIdsForTests } from '@fluentui/react-utilities';
@@ -165,6 +166,38 @@ describe('Checkbox', () => {
     expect(input.indeterminate).toEqual(true);
   });
 
+  it('gets props from a surrounding Field', () => {
+    const renderedComponent = render(
+      <Field validationMessage="Test error message" required>
+        <Checkbox label="Checkbox" />
+      </Field>,
+    );
+
+    const checkbox = renderedComponent.getByRole('checkbox') as HTMLInputElement;
+    const message = renderedComponent.getByText('Test error message');
+
+    expect(checkbox.getAttribute('aria-describedby')).toEqual(message.id);
+    expect(checkbox.getAttribute('aria-invalid')).toEqual('true');
+    expect(checkbox.required).toBe(true);
+  });
+
+  it('is labelled by both the Field and Checkbox labels, if both are present', () => {
+    const renderedComponent = render(
+      <Field label="Field label">
+        <Checkbox label="Checkbox label" />
+      </Field>,
+    );
+
+    const fieldLabel = renderedComponent.getByText('Field label') as HTMLLabelElement;
+    const checkboxLabel = renderedComponent.getByText('Checkbox label') as HTMLLabelElement;
+    const checkbox = renderedComponent.getByRole('checkbox') as HTMLInputElement;
+
+    // The checkbox should be labelled by both labels using htmlFor and not aria-labelledby
+    expect(checkbox.id).toEqual(fieldLabel.htmlFor);
+    expect(checkbox.id).toEqual(checkboxLabel.htmlFor);
+    expect(checkbox.getAttribute('aria-labelledby')).toBeNull();
+  });
+
   describe('Accessibility Tests', () => {
     it('renders the input slot (as input)', () => {
       const { container } = render(<Checkbox input={{ className: 'test' }} />);

packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import {
   getPartitionedNativeProps,
   resolveShorthand,
@@ -29,6 +30,9 @@ import { useFocusWithin } from '@fluentui/react-tabster';
  * @param ref - reference to `<input>` element of Checkbox
  */
 export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });
+
   const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;
 
   const [checked, setChecked] = useControllableState({

packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Field } from '@fluentui/react-field';
 import { Combobox } from './Combobox';
 import { Option } from '../Option/index';
 import { isConformant } from '../../testing/isConformant';
@@ -848,4 +849,25 @@ describe('Combobox', () => {
 
     expect((getByRole('combobox') as HTMLInputElement).value).toEqual('foo');
   });
+
+  it('gets props from a surrounding Field', () => {
+    const result = render(
+      <Field label="Test label" validationMessage="Test error message" required>
+        <Combobox>
+          <Option>Red</Option>
+          <Option>Green</Option>
+          <Option>Blue</Option>
+        </Combobox>
+      </Field>,
+    );
+
+    const combobox = result.getByRole('combobox') as HTMLInputElement;
+    const label = result.getByText('Test label') as HTMLLabelElement;
+    const message = result.getByText('Test error message');
+
+    expect(combobox.id).toEqual(label.htmlFor);
+    expect(combobox.getAttribute('aria-describedby')).toEqual(message.id);
+    expect(combobox.getAttribute('aria-invalid')).toEqual('true');
+    expect(combobox.required).toBe(true);
+  });
 });

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import {
@@ -29,6 +30,9 @@ import type { ComboboxProps, ComboboxState } from './Combobox.types';
  * @param ref - reference to root HTMLElement of Combobox
  */
 export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
+
   const baseState = useComboboxBaseState({ ...props, editable: true });
   const {
     activeOption,

packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Field } from '@fluentui/react-field';
 import { Dropdown } from './Dropdown';
 import { Option } from '../Option/index';
 import { isConformant } from '../../testing/isConformant';
@@ -652,4 +653,25 @@ describe('Dropdown', () => {
 
     expect(combobox.getAttribute('aria-activedescendant')).toEqual(getByText('Red').id);
   });
+
+  it('gets props from a surrounding Field', () => {
+    const result = render(
+      <Field label="Test label" validationMessage="Test error message" required>
+        <Dropdown>
+          <Option>Red</Option>
+          <Option>Green</Option>
+          <Option>Blue</Option>
+        </Dropdown>
+      </Field>,
+    );
+
+    const combobox = result.getByRole('combobox') as HTMLInputElement;
+    const label = result.getByText('Test label') as HTMLLabelElement;
+    const message = result.getByText('Test error message');
+
+    expect(combobox.id).toEqual(label.htmlFor);
+    expect(combobox.getAttribute('aria-describedby')).toEqual(message.id);
+    expect(combobox.getAttribute('aria-invalid')).toEqual('true');
+    expect(combobox.getAttribute('aria-required')).toEqual('true');
+  });
 });

packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
@@ -21,6 +22,9 @@ import { useMergedRefs } from '@fluentui/react-utilities';
  * @param ref - reference to root HTMLElement of Dropdown
  */
 export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });
+
   const baseState = useComboboxBaseState(props);
   const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =
     baseState;

packages/react-components/react-components/etc/react-components.unstable.api.md

@@ -17,6 +17,11 @@ import { comboboxFieldClassNames } from '@fluentui/react-combobox';
 import { ComboboxFieldProps_unstable as ComboboxFieldProps } from '@fluentui/react-combobox';
 import { Field } from '@fluentui/react-field';
 import { fieldClassNames } from '@fluentui/react-field';
+import { FieldContextProvider } from '@fluentui/react-field';
+import { FieldContextValue } from '@fluentui/react-field';
+import { FieldContextValues } from '@fluentui/react-field';
+import { FieldControlProps } from '@fluentui/react-field';
+import { FieldControlPropsOptions } from '@fluentui/react-field';
 import { FieldProps } from '@fluentui/react-field';
 import { FieldSlots } from '@fluentui/react-field';
 import { FieldState } from '@fluentui/react-field';
@@ -116,6 +121,9 @@ import { TreeState } from '@fluentui/react-tree';
 import { useAlert_unstable } from '@fluentui/react-alert';
 import { useAlertStyles_unstable } from '@fluentui/react-alert';
 import { useField_unstable } from '@fluentui/react-field';
+import { useFieldContext_unstable } from '@fluentui/react-field';
+import { useFieldContextValues_unstable } from '@fluentui/react-field';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { useFieldStyles_unstable } from '@fluentui/react-field';
 import { useFlatTree_unstable } from '@fluentui/react-tree';
 import { useInfoButton_unstable } from '@fluentui/react-infobutton';
@@ -181,6 +189,16 @@ export { Field }
 
 export { fieldClassNames }
 
+export { FieldContextProvider }
+
+export { FieldContextValue }
+
+export { FieldContextValues }
+
+export { FieldControlProps }
+
+export { FieldControlPropsOptions }
+
 export { FieldProps }
 
 export { FieldSlots }
@@ -379,6 +397,12 @@ export { useAlertStyles_unstable }
 
 export { useField_unstable }
 
+export { useFieldContext_unstable }
+
+export { useFieldContextValues_unstable }
+
+export { useFieldControlProps_unstable }
+
 export { useFieldStyles_unstable }
 
 export { useFlatTree_unstable }

packages/react-components/react-components/src/unstable/index.ts

@@ -83,11 +83,23 @@ export type { TextareaFieldProps_unstable as TextareaFieldProps } from '@fluentu
 export {
   Field,
   fieldClassNames,
+  FieldContextProvider,
   renderField_unstable,
+  useFieldContext_unstable,
+  useFieldContextValues_unstable,
+  useFieldControlProps_unstable,
   useFieldStyles_unstable,
   useField_unstable,
 } from '@fluentui/react-field';
-export type { FieldProps, FieldSlots, FieldState } from '@fluentui/react-field';
+export type {
+  FieldContextValue,
+  FieldContextValues,
+  FieldControlProps,
+  FieldControlPropsOptions,
+  FieldProps,
+  FieldSlots,
+  FieldState,
+} from '@fluentui/react-field';
 
 export {
   Skeleton,