Validate accessible field labels in development

.changeset/shiny-peas-love.md

@@ -0,0 +1,19 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Autosuggest
+  - Dropdown
+  - MonthPicker
+  - PasswordField
+  - RadioGroup
+  - TextField
+  - Textarea
+---
+
+Validate accessible field labels in development
+
+Introduce development-time validation for the `label` prop on form fields to guard against blank values and guide towards the alternative labelling options that are available.
+This validation helps ensure that all fields are accessible to screen readers and other assistive technologies.

packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx

@@ -769,6 +769,7 @@ export const Autosuggest = forwardRef(function <Value>(
         <Box position="relative" ref={rootRef}>
           <Field
             {...restProps}
+            componentName="Autosuggest"
             id={id}
             value={value.text}
             prefix={undefined}

packages/braid-design-system/src/lib/components/Dropdown/Dropdown.tsx

@@ -43,6 +43,7 @@ export const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>(
     return (
       <Field
         {...restProps}
+        componentName="Dropdown"
         disabled={disabled}
         prefix={undefined}
         secondaryMessage={null}

packages/braid-design-system/src/lib/components/MonthPicker/MonthPicker.tsx

@@ -201,6 +201,7 @@ const MonthPicker = ({
       disabled={disabled}
       value={customValueToString(currentValue)}
       {...restProps}
+      componentName="MonthPicker"
       icon={undefined}
       prefix={undefined}
       name={undefined}
@@ -227,7 +228,13 @@ const MonthPicker = ({
   );
 
   const customFieldGroup = (
-    <FieldGroup id={id} tone={tone} disabled={disabled} {...restProps}>
+    <FieldGroup
+      id={id}
+      tone={tone}
+      disabled={disabled}
+      componentName="MonthPicker"
+      {...restProps}
+    >
       {(fieldGroupProps) => (
         <Columns space="xsmall">
           <Column>

packages/braid-design-system/src/lib/components/PasswordField/PasswordField.tsx

@@ -78,6 +78,7 @@ export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     return (
       <Field
         {...restProps}
+        componentName="PasswordField"
         id={id}
         value={value}
         icon={undefined}

packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.tsx

@@ -57,6 +57,7 @@ const RadioGroup = ({
     <FieldGroup
       id={id}
       {...props}
+      componentName="RadioGroup"
       disabled={disabled}
       tone={tone}
       role="radiogroup"

packages/braid-design-system/src/lib/components/TextField/TextField.tsx

@@ -91,6 +91,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     return (
       <Field
         {...restProps}
+        componentName="TextField"
         id={id}
         value={value}
         secondaryMessage={

packages/braid-design-system/src/lib/components/Textarea/Textarea.tsx

@@ -118,6 +118,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <Field
         {...restProps}
+        componentName="Textarea"
         tone={tone}
         value={value}
         icon={undefined}

packages/braid-design-system/src/lib/components/private/Field/Field.tsx

@@ -1,3 +1,4 @@
+import dedent from 'dedent';
 import assert from 'assert';
 import React, { type ReactNode, type AllHTMLAttributes, Fragment } from 'react';
 import clsx from 'clsx';
@@ -88,6 +89,7 @@ type InternalFieldProps = FieldBaseProps &
       secondaryIcon: ReactNode,
       prefix: ReactNode,
     ): ReactNode;
+    componentName: string;
   };
 
 export const Field = ({
@@ -110,13 +112,34 @@ export const Field = ({
   icon,
   prefix,
   required,
+  componentName,
   ...restProps
 }: InternalFieldProps) => {
   assert(
     prefix === undefined || typeof prefix === 'string',
     'Prefix must be a string',
   );
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (
+      'label' in restProps &&
+      typeof restProps.label === 'string' &&
+      restProps.label.trim().length === 0 &&
+      !('aria-label' in restProps) &&
+      !('aria-labelledby' in restProps)
+    ) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        dedent`
+          The "label" prop is required as the accessible name for a ${componentName}.
+          If you are labelling the ${componentName} with another element or using a non-visual label please provide the appropriate props, either "aria-label" or "aria-labelledby".
+
+          See the ${componentName} documentation for more information: https://seek-oss.github.io/braid-design-system/components/${componentName}#indirect-or-hidden-field-labels
+        `,
+      );
+    }
+  }
+
   const messageId = `${id}-message`;
   const descriptionId = description ? `${id}-description` : undefined;
   const fieldBackground: BoxProps['background'] = disabled

packages/braid-design-system/src/lib/components/private/FieldGroup/FieldGroup.tsx

@@ -11,6 +11,7 @@ import buildDataAttributes, {
 } from '../buildDataAttributes';
 import { mergeIds } from '../mergeIds';
 import type { ReactNodeNoStrings } from '../ReactNodeNoStrings';
+import dedent from 'dedent';
 
 type FormElementProps = AllHTMLAttributes<HTMLFormElement>;
 
@@ -52,6 +53,7 @@ type InternalFieldGroupProps = FieldGroupBaseProps &
     role?: FormElementProps['role'];
     messageSpace?: StackProps['space'];
     children(props: FieldGroupRenderProps): ReactNodeNoStrings;
+    componentName: string;
   };
 
 export const FieldGroup = ({
@@ -68,6 +70,7 @@ export const FieldGroup = ({
   required,
   role,
   data,
+  componentName,
   ...restProps
 }: InternalFieldGroupProps) => {
   const labelId = `${id}-label`;
@@ -84,6 +87,26 @@ export const FieldGroup = ({
     ariaLabel = restProps['aria-label'];
   }
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (
+      'label' in restProps &&
+      typeof restProps.label === 'string' &&
+      restProps.label.trim().length === 0 &&
+      !('aria-label' in restProps) &&
+      !('aria-labelledby' in restProps)
+    ) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        dedent`
+          The "label" prop is required as the accessible name for a ${componentName}.
+          If you are labelling the ${componentName} with another element or using a non-visual label please provide the appropriate props, either "aria-label" or "aria-labelledby".
+
+          See the ${componentName} documentation for more information: https://seek-oss.github.io/braid-design-system/components/${componentName}#indirect-or-hidden-field-labels
+        `,
+      );
+    }
+  }
+
   return (
     <Box
       component="fieldset"