@arbor-education/design-system.components 4.6.1 → 4.6.3

package/src/components/dateTimePicker/DateTimePicker.stories.tsx

@@ -315,6 +315,20 @@ const meta = {
         type: { summary: 'string' },
       },
     },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible name for the input when used outside `<FormField>`. Use when there is no visible label.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    'aria-labelledby': {
+      control: 'text',
+      description: 'ID of a visible element that names the input. Prefer this over `aria-label` when a visible label exists.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 } satisfies Meta<typeof DateTimePicker>;
 
@@ -364,6 +378,7 @@ const DisplayFormatDefaultTemplate = () => {
         value={value}
         onChange={setValue}
         id="format-default"
+        aria-label="Event start date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Value:
@@ -387,6 +402,7 @@ const DisplayFormatFriendlyTemplate = () => {
         value={value}
         onChange={setValue}
         id="format-friendly"
+        aria-label="Event start date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Value:
@@ -410,6 +426,7 @@ const WithTimeOptionsTemplate = () => {
         value={value}
         onChange={setValue}
         id="time-options"
+        aria-label="Appointment date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Appointment:
@@ -433,6 +450,7 @@ const GranularitySecondTemplate = () => {
         value={value}
         onChange={setValue}
         id="granularity-second"
+        aria-label="Precise date and time"
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
         Value (with seconds):
@@ -453,6 +471,7 @@ const ControlledWithDisplayTemplate = () => {
     <div style={{ maxWidth: '280px' }}>
       <DateTimePicker
         id="controlled-display"
+        aria-label="Event date and time"
         onChange={setValue}
       />
       <p style={{ margin: 'var(--spacing-small) 0 0', color: 'var(--color-grey-600)' }}>
@@ -528,7 +547,8 @@ const WithFormFieldAndErrorTemplate = () => {
 export const Default: Story = withDescription(
   {
     args: {
-      id: 'default-datetime',
+      'id': 'default-datetime',
+      'aria-label': 'Event start date and time',
     },
     render: args => (
       <div style={{ maxWidth: '280px' }}>
@@ -551,6 +571,7 @@ export const WithDefaultValue: Story = withDescription(
         {/* 14 April 2026, 14:27 — month is zero-indexed (Apr = 3) */}
         <DateTimePicker
           id="default-value-datetime"
+          aria-label="Event start date and time"
           defaultValue={new Date(2026, 3, 14, 14, 27)}
         />
       </div>
@@ -570,6 +591,7 @@ function EditEventStart() {
   return (
     <DateTimePicker
       id="event-start"
+      aria-label="Event start date and time"
       defaultValue={eventStart}
       onChange={(date) => {
         // date is Date | undefined — not a string
@@ -611,6 +633,7 @@ function PreciseDateTimePickerExample() {
       value={value}
       onChange={setValue}
       id="precise-datetime"
+      aria-label="Precise date and time"
     />
   );
 }
@@ -648,6 +671,7 @@ function FormattedDateTimePickerExample() {
       value={value}
       onChange={setValue}
       id="event-datetime"
+      aria-label="Event start date and time"
     />
   );
 }
@@ -685,6 +709,7 @@ function FriendlyDateTimePickerExample() {
       value={value}
       onChange={setValue}
       id="event-datetime"
+      aria-label="Event start date and time"
     />
   );
 }
@@ -726,6 +751,7 @@ function AppointmentBookingExample() {
       value={value}
       onChange={setValue}
       id="appointment-datetime"
+      aria-label="Appointment date and time"
     />
   );
 }
@@ -748,6 +774,7 @@ export const WithPlaceholder: Story = withDescription(
       <div style={{ maxWidth: '280px' }}>
         <DateTimePicker
           id="placeholder-datetime"
+          aria-label="Event start date and time"
           placeholder="Choose event start"
         />
       </div>
@@ -764,6 +791,7 @@ function GuidedDateTimePickerExample() {
   return (
     <DateTimePicker
       id="event-start"
+      aria-label="Event start date and time"
       placeholder="Choose event start"
       onChange={(date) => {
         console.log('Event start:', date?.toLocaleString('en-GB'));
@@ -790,6 +818,7 @@ export const ErrorState: Story = withDescription(
       <div style={{ maxWidth: '280px' }}>
         <DateTimePicker
           id="error-state-datetime"
+          aria-label="Event start date and time"
           hasError
           aria-invalid={true}
           aria-describedby="error-state-datetime-msg"
@@ -818,6 +847,7 @@ function DateTimePickerWithError() {
     <>
       <DateTimePicker
         id="event-start"
+        aria-label="Event start date and time"
         hasError
         aria-invalid={true}
         aria-describedby="event-start-error"
@@ -860,6 +890,7 @@ function ControlledDateTimePickerExample() {
     <div>
       <DateTimePicker
         id="event-datetime"
+        aria-label="Event date and time"
         onChange={setValue}
       />
       <p>

package/src/components/dateTimePicker/DateTimePicker.test.tsx

@@ -27,6 +27,21 @@ describe('DateTimePicker', () => {
     expect(screen.getByRole('button', { name: 'Open date and time picker' })).toBeInTheDocument();
   });
 
+  test('names the input with aria-label', () => {
+    const { container } = render(<DateTimePicker aria-label="Start date" />);
+    expect(screen.getByLabelText('Start date')).toBe(container.querySelector('input[type="datetime-local"]'));
+  });
+
+  test('names the input with aria-labelledby', () => {
+    const { container } = render(
+      <>
+        <span id="start-date-label">Start date</span>
+        <DateTimePicker aria-labelledby="start-date-label" />
+      </>,
+    );
+    expect(screen.getByLabelText('Start date')).toBe(container.querySelector('input[type="datetime-local"]'));
+  });
+
   test('uses a native datetime-local input with minute stepping by default', () => {
     const { container } = render(<DateTimePicker />);
     const input = container.querySelector('input[type="datetime-local"]');

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -41,6 +41,8 @@ export type DateTimePickerProps = {
   'hasError'?: boolean;
   'aria-describedby'?: string;
   'aria-invalid'?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
   'value'?: Date;
   'defaultValue'?: Date;
   'granularity'?: TimeGranularity;
@@ -59,6 +61,8 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
     hasError,
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': ariaInvalid,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     value,
     defaultValue,
     displayFormat = 'native',
@@ -258,6 +262,8 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
           hasError={hasError}
           aria-describedby={ariaDescribedBy}
           aria-invalid={ariaInvalid}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           className="ds-date-time-picker__input"
         />
         {showFieldHint