Ajr datepicker polish

packages/gamut/src/DatePicker/DatePicker.tsx

@@ -156,21 +156,23 @@ export const DatePicker: React.FC<DatePickerProps> = (props) => {
           {mode === 'range' ? (
             <>
               <DatePickerInput
-                name="datePickerInputStart"
+                description={props.startDateDescription}
+                name="datePickerInput"
                 rangePart="start"
                 size={inputSize}
               />
               <Box alignSelf="center" mt={32}>
                 {isRtl ? <MiniArrowLeftIcon /> : <MiniArrowRightIcon />}
               </Box>
               <DatePickerInput
-                name="datePickerInputEnd"
+                description={props.endDateDescription}
+                name="datePickerInput"
                 rangePart="end"
                 size={inputSize}
               />
             </>
           ) : (
-            <DatePickerInput size={inputSize} />
+            <DatePickerInput description={props.description} size={inputSize} />
           )}
         </FlexBox>
         <PopoverContainer

packages/gamut/src/DatePicker/DatePickerCalendar/Calendar/CalendarBody.tsx

@@ -171,7 +171,12 @@ export const CalendarBody: React.FC<CalendarBodyProps> = ({
       <thead>
         <tr>
           {weekdayLabels.map((label, i) => (
-            <TableHeader abbr={weekdayFullNames[i]} key={label} scope="col">
+            <TableHeader
+              abbr={weekdayFullNames[i]}
+              aria-label={weekdayFullNames[i]}
+              key={label}
+              scope="col"
+            >
               {label}
             </TableHeader>
           ))}

packages/gamut/src/DatePicker/DatePickerCalendar/Calendar/__tests__/CalendarBody.test.tsx

@@ -6,7 +6,7 @@ import { createRef } from 'react';
 import { getIsoFirstDayFromLocale } from '../../../utils/locale';
 import { CalendarBody } from '../CalendarBody';
 import { getMonthGrid } from '../utils/dateGrid';
-import { formatDateForAriaLabel } from '../utils/format';
+import { formatDateForAriaLabel, getWeekdayNames } from '../utils/format';
 
 const displayDate = new Date(2024, 2, 1);
 const focusedDate = new Date(2024, 2, 15);
@@ -203,14 +203,21 @@ describe('CalendarBody', () => {
     await waitFor(() => expect(march15).toHaveFocus());
   });
 
-  it('renders seven weekday column headers with scope and abbreviations', () => {
+  it('renders seven weekday column headers with full accessible names', () => {
     const { view } = renderView();
+    const locale = new Intl.Locale('en-US');
+    const firstWeekday = getIsoFirstDayFromLocale(locale);
+    const fullNames = getWeekdayNames({
+      format: 'long',
+      locale,
+      firstWeekday,
+    });
 
     const headers = view.getAllByRole('columnheader');
     expect(headers).toHaveLength(7);
-    headers.forEach((th) => {
+    headers.forEach((th, i) => {
       expect(th).toHaveAttribute('scope', 'col');
-      expect(th).toHaveAttribute('abbr');
+      expect(th).toHaveAccessibleName(fullNames[i]);
     });
   });
 

packages/gamut/src/DatePicker/DatePickerInput/index.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react';
 
 import { FlexBox } from '../../Box';
+import { IconButton } from '../../Button';
 import { FormGroup } from '../../Form/elements/FormGroup';
 import type { InputWrapperProps } from '../../Form/inputs/Input';
 import { isSameDay } from '../DatePickerCalendar/Calendar/utils/dateGrid';
@@ -38,11 +39,23 @@ export type DatePickerInputProps = Omit<
 > & {
   /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
   rangePart?: 'start' | 'end';
+  /** Description to display between the label and the input. */
+  description?: string;
 };
 
 export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
   (
-    { disabled, error, form, label, name, rangePart, size = 'base', ...rest },
+    {
+      disabled,
+      error,
+      form,
+      label,
+      name,
+      rangePart,
+      size = 'base',
+      description,
+      ...rest
+    },
     ref
   ) => {
     const context = useDatePicker();
@@ -227,7 +240,8 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
 
     return (
       <FormGroup
-        htmlFor={inputId}
+        description={description}
+        id={inputId}
         isSoloField
         label={label ?? defaultLabel}
         mb={0}
@@ -236,7 +250,7 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
         width="fit-content"
       >
         <SegmentedShell
-          id={inputId}
+          aria-labelledby={inputId}
           inputSize={size}
           ref={shellRef}
           role="group"
@@ -292,15 +306,11 @@ export const DatePickerInput = forwardRef<HTMLDivElement, DatePickerInputProps>(
             type="hidden"
             value={hiddenValue}
           />
-          <FlexBox
-            alignItems="center"
-            justifyContent="center"
-            pl={16}
-            pr={8}
-            role="presentation"
-          >
-            <MiniCalendarIcon aria-hidden size={16} />
-          </FlexBox>
+          <IconButton
+            icon={MiniCalendarIcon}
+            size="small"
+            tip="Open calendar"
+          />
         </SegmentedShell>
       </FormGroup>
     );

packages/gamut/src/DatePicker/types.ts

@@ -96,6 +96,8 @@ export interface DatePickerSingleProps extends DatePickerBaseProps<'single'> {
    * ```
    */
   onSelected: (date: Date | null) => void;
+  /** Description to display between the label and the input. */
+  description?: string;
 }
 
 export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
@@ -164,6 +166,10 @@ export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
    * ```
    */
   onEndSelected: (date: Date | null) => void;
+  /** Description to display between the label and the start date input. */
+  startDateDescription?: string;
+  /** Description to display between the label and the end date input. */
+  endDateDescription?: string;
 }
 
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;

packages/styleguide/src/lib/Organisms/DatePicker/DatePicker.stories.tsx

@@ -84,6 +84,15 @@ const meta: Meta<typeof DatePicker> = {
       if: { arg: 'mode', eq: 'range' },
       control: false,
     },
+    description: {
+      if: { arg: 'mode', eq: 'single' },
+    },
+    startDateDescription: {
+      if: { arg: 'mode', eq: 'range' },
+    },
+    endDateDescription: {
+      if: { arg: 'mode', eq: 'range' },
+    },
   },
 };
 
@@ -100,6 +109,8 @@ export const Default: Story = {
     ),
   ],
   render: function DatePickerStory(args) {
+    const description =
+      'Select a date from the calendar. Insert any rules or instructions here.';
     const [selectedDate, setSelectedDate] = useState<Date | null>(null);
     const [startDate, setStartDate] = useState<Date | null>(null);
     const [endDate, setEndDate] = useState<Date | null>(null);
@@ -111,6 +122,7 @@ export const Default: Story = {
           endDate={endDate}
           mode="range"
           startDate={startDate}
+          startDateDescription={description}
           onEndSelected={setEndDate}
           onStartSelected={setStartDate}
         />
@@ -120,6 +132,7 @@ export const Default: Story = {
     return (
       <DatePicker
         {...args}
+        description={description}
         mode="single"
         selectedDate={selectedDate}
         onSelected={setSelectedDate}