Always using autofocus in Datepicker, focussing back to the input when dialog is closed. This fixes the remaining accessibility issues in Datepicker. (#3394)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>

Author: olemartinorg

src/app-components/Datepicker/DatePickerCalendar.tsx

@@ -14,7 +14,6 @@ export interface CalendarDialogProps {
   minDate?: Date;
   locale?: string;
   required?: boolean;
-  autoFocus?: boolean;
   onBlur?: () => void;
   DropdownCaption: typeof MonthCaption;
 }
@@ -26,7 +25,6 @@ export const DatePickerCalendar = ({
   maxDate,
   locale,
   required,
-  autoFocus,
   DropdownCaption,
 }: CalendarDialogProps) => {
   const currentLocale = getLocale(locale ?? 'nb');
@@ -70,7 +68,7 @@ export const DatePickerCalendar = ({
         }
       }}
       components={{ MonthCaption: DropdownCaption }}
-      autoFocus={autoFocus}
+      autoFocus={true}
       style={{ minHeight: '405px', maxWidth: '100%' }}
     />
   );

src/app-components/Datepicker/DatePickerInput.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { PatternFormat } from 'react-number-format';
+import type { Ref } from 'react';
 
 import { Textfield } from '@digdir/designsystemet-react';
 import { format, isValid } from 'date-fns';
@@ -22,15 +23,10 @@ export interface DatePickerInputProps {
   autoComplete?: 'bday';
 }
 
-export function DatePickerInput({
-  id,
-  value,
-  datepickerFormat,
-  timeStamp,
-  onValueChange,
-  readOnly,
-  autoComplete,
-}: DatePickerInputProps) {
+function DatePickerInputRef(
+  { id, value, datepickerFormat, timeStamp, onValueChange, readOnly, autoComplete }: DatePickerInputProps,
+  ref: Ref<HTMLInputElement>,
+) {
   const dateValue = strictParseISO(value);
   const formattedDateValue = dateValue ? format(dateValue, datepickerFormat) : value;
   const [inputValue, setInputValue] = useState(formattedDateValue ?? '');
@@ -58,6 +54,7 @@ export function DatePickerInput({
 
   return (
     <PatternFormat
+      getInputRef={ref}
       format={getFormatAsPatternFormat(datepickerFormat)}
       customInput={Textfield}
       mask='_'
@@ -77,3 +74,6 @@ export function DatePickerInput({
     />
   );
 }
+
+export const DatePickerInput = React.forwardRef(DatePickerInputRef);
+DatePickerInput.displayName = 'DatePickerInput';

src/app-components/Datepicker/Datepicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import type { MonthCaption } from 'react-day-picker';
 
 import { CalendarIcon } from '@navikt/aksel-icons';
@@ -23,7 +23,6 @@ export type DatePickerControlProps = {
   minDate?: Date;
   maxDate?: Date;
   locale: string;
-  isMobile?: boolean;
   DropdownCaption: typeof MonthCaption;
   buttonAriaLabel: string;
   calendarIconTitle: string;
@@ -41,12 +40,12 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
   minDate,
   maxDate,
   locale,
-  isMobile = false,
   buttonAriaLabel,
   DropdownCaption,
   calendarIconTitle,
   autoComplete,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const dateValue = new Date(value);
   const dayPickerDate = isValidDate(dateValue) ? dateValue : undefined;
@@ -69,6 +68,7 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
     >
       <div className={styles.calendarInputWrapper}>
         <DatePickerInput
+          ref={inputRef}
           id={id}
           value={value}
           datepickerFormat={dateFormat}
@@ -107,11 +107,11 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
             onSelect={(date) => {
               handleDayPickerSelect(date);
               setIsDialogOpen(false);
+              inputRef.current?.focus();
             }}
             minDate={minDate}
             maxDate={maxDate}
             required={required}
-            autoFocus={isMobile}
             DropdownCaption={DropdownCaption}
           />
         </DatePickerDialog>

src/app-components/DynamicForm/DynamicForm.tsx

@@ -231,7 +231,6 @@ export function FieldRenderer({
             readOnly={false}
             required={required}
             locale={locale!}
-            isMobile={false}
             DropdownCaption={DropdownCaption}
             buttonAriaLabel={buttonAriaLabel}
             calendarIconTitle={calendarIconTitle}

src/layout/Datepicker/DatepickerComponent.tsx

@@ -7,7 +7,6 @@ import { Label } from 'src/app-components/Label/Label';
 import { useDataModelBindings } from 'src/features/formData/useDataModelBindings';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
-import { useIsMobile } from 'src/hooks/useDeviceWidths';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { DropdownCaption } from 'src/layout/Datepicker/DropdownCaption';
 import { getDatepickerFormat } from 'src/utils/dateUtils';
@@ -38,7 +37,6 @@ export function DatepickerComponent({ node, overrideDisplay }: IDatepickerProps)
   const calculatedMinDate = getDateConstraint(minDate, 'min');
   const calculatedMaxDate = getDateConstraint(maxDate, 'max');
   const dateFormat = getDatepickerFormat(getDateFormat(format, languageLocale));
-  const isMobile = useIsMobile();
 
   const { setValue, formData } = useDataModelBindings(dataModelBindings);
   const value = formData.simpleBinding;
@@ -76,7 +74,6 @@ export function DatepickerComponent({ node, overrideDisplay }: IDatepickerProps)
             readOnly={readOnly}
             required={required}
             locale={languageLocale}
-            isMobile={isMobile}
             minDate={calculatedMinDate}
             maxDate={calculatedMaxDate}
             DropdownCaption={DropdownCaption}