PRXT - fix: improve TimePicker accessibility

__tests__/components/common/TimePicker.test.tsx

@@ -3,25 +3,47 @@ import React from 'react';
 import TimePicker from '../../../components/common/TimePicker';
 
 describe('TimePicker', () => {
-  it('changes hours and minutes via inputs', () => {
+  it('labels hour and minute inputs for accessibility', () => {
     const onChange = jest.fn();
     render(<TimePicker hours={9} minutes={15} onTimeChange={onChange} />);
-    fireEvent.change(screen.getByPlaceholderText('HH'), { target: { value: '10' } });
+
+    const hoursInput = screen.getByLabelText('Hours');
+    const minutesInput = screen.getByLabelText('Minutes');
+
+    fireEvent.change(hoursInput, { target: { value: '10' } });
     expect(onChange).toHaveBeenCalledWith(10, 15);
-    fireEvent.change(screen.getByPlaceholderText('MM'), { target: { value: '45' } });
+
+    fireEvent.change(minutesInput, { target: { value: '45' } });
     expect(onChange).toHaveBeenCalledWith(9, 45);
   });
 
   it('toggles am/pm respecting minTime', () => {
     const onChange = jest.fn();
-    render(<TimePicker hours={9} minutes={0} onTimeChange={onChange} minTime={{ hours: 8, minutes: 0 }} />);
-    fireEvent.click(screen.getByText('AM'));
+    render(
+      <TimePicker hours={9} minutes={0} onTimeChange={onChange} minTime={{ hours: 8, minutes: 0 }} />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Toggle AM/PM' }));
     expect(onChange).toHaveBeenCalledWith(21, 0);
   });
 
-  it('disables options before minTime', () => {
+  it('describes minimum time and disables earlier quick options', () => {
     const onChange = jest.fn();
-    render(<TimePicker hours={9} minutes={0} onTimeChange={onChange} minTime={{ hours: 9, minutes: 30 }} />);
+    render(
+      <TimePicker hours={9} minutes={0} onTimeChange={onChange} minTime={{ hours: 9, minutes: 30 }} />
+    );
+
+    const hoursInput = screen.getByLabelText('Hours');
+    const minutesInput = screen.getByLabelText('Minutes');
+
+    const describedBy = hoursInput.getAttribute('aria-describedby');
+    expect(describedBy).toBeTruthy();
+
+    const description = document.getElementById(describedBy ?? '');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('Earliest selectable time is 9:30 AM.');
+
+    expect(minutesInput.getAttribute('aria-describedby')).toBe(describedBy);
+
     const early = screen.getByText('9 AM') as HTMLButtonElement;
     const later = screen.getByText('12 PM');
     expect(early).toBeDisabled();

components/common/TimePicker.tsx

@@ -1,3 +1,5 @@
+import { useId, type ChangeEvent } from "react";
+
 interface TimePickerProps {
   readonly hours: number;
   readonly minutes: number;
@@ -11,12 +13,28 @@ interface TimeOption {
   minutes: number;
 }
 
+const formatTime = (timeHours: number, timeMinutes: number) => {
+  const period = timeHours >= 12 ? "PM" : "AM";
+  const hour12 = timeHours % 12 === 0 ? 12 : timeHours % 12;
+  const minuteLabel = timeMinutes.toString().padStart(2, "0");
+  return `${hour12}:${minuteLabel} ${period}`;
+};
+
 export default function TimePicker({
   hours,
   minutes,
   onTimeChange,
   minTime = null,
 }: TimePickerProps) {
+  const baseId = useId();
+  const hoursInputId = `${baseId}-hours`;
+  const minutesInputId = `${baseId}-minutes`;
+  const minTimeDescriptionId = minTime ? `${baseId}-min-time` : undefined;
+  const minTimeDescription =
+    minTime !== null
+      ? `Earliest selectable time is ${formatTime(minTime.hours, minTime.minutes)}.`
+      : undefined;
+
   const timeOptions: TimeOption[] = [
     { label: "12 AM", hours: 0, minutes: 0 },
     { label: "6 AM", hours: 6, minutes: 0 },
@@ -50,7 +68,7 @@ export default function TimePicker({
     return false;
   };
 
-  const onHoursChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onHoursChange = (e: ChangeEvent<HTMLInputElement>) => {
     const val = parseInt(e.target.value, 10);
     if (isNaN(val)) return;
     const newHours = isPm ? (val === 12 ? 12 : val + 12) : val === 12 ? 0 : val;
@@ -60,7 +78,7 @@ export default function TimePicker({
     }
   };
 
-  const onMinutesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onMinutesChange = (e: ChangeEvent<HTMLInputElement>) => {
     const val = parseInt(e.target.value, 10);
     if (isNaN(val)) return;
 
@@ -75,37 +93,54 @@ export default function TimePicker({
         <div className="tw-flex tw-items-center tw-mb-5">
           <div className="tw-flex tw-items-center tw-space-x-2 tw-flex-1">
             <div className="tw-w-20 tw-relative">
+              <label className="tw-sr-only" htmlFor={hoursInputId}>
+                Hours
+              </label>
               <input
                 type="number"
                 min="1"
                 max="12"
                 value={displayHours}
                 onChange={onHoursChange}
+                id={hoursInputId}
+                aria-describedby={minTimeDescriptionId}
                 className="tw-w-full tw-bg-[#2A2A33] tw-border-0 tw-text-white tw-rounded-lg tw-p-2 tw-ring-1 tw-ring-iron-700/30 focus:tw-ring-primary-400 focus:tw-outline-none tw-transition-all tw-duration-300 [appearance:textfield] [&::-webkit-outer-spin-button]:tw-appearance-none [&::-webkit-inner-spin-button]:tw-appearance-none"
                 placeholder="HH"
               />
             </div>
             <span className="tw-text-iron-50 tw-font-bold">:</span>
             <div className="tw-w-20 tw-relative">
+              <label className="tw-sr-only" htmlFor={minutesInputId}>
+                Minutes
+              </label>
               <input
                 type="number"
                 min="0"
                 max="59"
                 value={minutes}
                 onChange={onMinutesChange}
+                id={minutesInputId}
+                aria-describedby={minTimeDescriptionId}
                 className="tw-w-full tw-bg-[#2A2A33] tw-border-0 tw-text-white tw-rounded-lg tw-p-2 tw-ring-1 tw-ring-iron-700/30 focus:tw-ring-primary-400 focus:tw-outline-none tw-transition-all tw-duration-300 [appearance:textfield] [&::-webkit-outer-spin-button]:tw-appearance-none [&::-webkit-inner-spin-button]:tw-appearance-none"
                 placeholder="MM"
               />
             </div>
             <button
               onClick={toggleAmPm}
+              aria-label="Toggle AM/PM"
               className="tw-bg-[#2A2A33] hover:tw-bg-[#32323C] tw-text-white tw-rounded-lg tw-px-3 tw-py-2 tw-transition-all tw-duration-200 tw-border-0 tw-shadow-md hover:tw-shadow-lg hover:tw-translate-y-[-1px] tw-ml-1"
             >
               {isPm ? "PM" : "AM"}
             </button>
           </div>
         </div>
 
+        {minTimeDescription ? (
+          <p id={minTimeDescriptionId} className="tw-sr-only">
+            {minTimeDescription}
+          </p>
+        ) : null}
+
         <div className="tw-grid tw-grid-cols-3 tw-gap-1.5">
           {timeOptions.map((option) => {
             const disabled = isTimeDisabled(option.hours, option.minutes);