feat: require an accessible name on a standalone checkbox

A standalone checkbox renders no visible label, and `aria-label` reached it
only by inheritance, so it appeared in no prop table and nothing flagged one
that shipped unnamed. `Checkbox.Item` names the row and is exempt.

Author: likevy

src/components/Checkbox/Checkbox.tsx

@@ -78,6 +78,13 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * the underlying `TouchableRipple`.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Accessibility label for the checkbox, read by a screen reader in place of
+   * a visible label. A standalone `Checkbox` has no label of its own, so it
+   * needs one here. `Checkbox.Item` names the whole row instead and does not
+   * require it.
+   */
+  'aria-label'?: string;
 };
 
 // Spec dimensions (https://m3.material.io/components/checkbox/specs).
@@ -124,6 +131,12 @@ const RIPPLE_START_SCALE = 0.6;
  *
  * export default MyComponent;
  * ```
+ *
+ * ## Accessibility
+ * A standalone `Checkbox` renders no visible label, so give it an `aria-label`
+ * to name it for assistive tech. Use `Checkbox.Item` when you want a labelled
+ * row: it owns the accessible name and keeps the inner checkbox out of the
+ * accessibility tree so the state is announced once.
  */
 const Checkbox = ({
   status,
@@ -391,6 +404,23 @@ const Checkbox = ({
     rippleScale.value = RIPPLE_START_SCALE;
   }, [isInteractive, pressedSV, rippleHoldSV, rippleAlpha, rippleScale]);
 
+  // `Checkbox.Item` names the row and passes `accessible={false}` here.
+  const isInAccessibilityTree = rest.accessible !== false;
+  const hasAccessibleName = Boolean(
+    rest['aria-label'] ??
+    rest.accessibilityLabel ??
+    rest['aria-labelledby'] ??
+    rest.accessibilityLabelledBy
+  );
+
+  React.useEffect(() => {
+    if (!isInAccessibilityTree || hasAccessibleName) return;
+
+    console.warn(
+      'Checkbox: pass `aria-label` to name the checkbox for assistive tech, or use `Checkbox.Item` for a labelled row.'
+    );
+  }, [isInAccessibilityTree, hasAccessibleName]);
+
   const checked: boolean | 'mixed' =
     status === 'indeterminate' ? 'mixed' : status === 'checked';
 

src/components/__tests__/Checkbox/Checkbox.test.tsx

@@ -506,6 +506,37 @@ describe('Checkbox focus ring', () => {
   });
 });
 
+describe('Checkbox accessible name', () => {
+  it('warns when a standalone checkbox has no accessible name', async () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    await render(<Checkbox status="checked" onPress={() => {}} />);
+
+    expect(console.warn).toHaveBeenCalledWith(
+      expect.stringContaining('aria-label')
+    );
+  });
+
+  it('is named by aria-label', async () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    await render(
+      <Checkbox status="checked" onPress={() => {}} aria-label="Notify me" />
+    );
+
+    expect(screen.getByLabelText('Notify me')).toBeOnTheScreen();
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+
+  it('does not warn for the checkbox inside a labelled Checkbox.Item', async () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    await render(<Checkbox.Item label="Notify me" status="checked" />);
+
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+});
+
 it('renders the focus ring outside the pressable so clipping cannot crop it', async () => {
   await render(
     <Checkbox