Merge pull request #2195 from SpareBank1/develop_fix-dom-nesting-date…

…picker a11y datepicker
SpareBank1 · Aug 6, 2024 · 1ae2971 · 1ae2971
2 parents 04c486e + 61aa942
commit 1ae2971
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 133 deletions.
diff --git a/component-overview/examples/datepicker/Datepicker-birthdate.jsx b/component-overview/examples/datepicker/Datepicker-birthdate.jsx
@@ -1,23 +1,24 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('');
     const now = new Date();
 
-    const maxDate = `${now.getDate()}.${now.getMonth()+1}.${now.getFullYear()}`;
+    const maxDate = `${now.getDate()}.${now.getMonth() + 1}.${now.getFullYear()}`;
 
     return (
-        <>
-            <p>Skriv inn et fødselsdato med tosifret årstal og se om det blir tolket riktig.</p>
+        <InputGroup
+            label="Fødselsdato"
+            description="Skriv inn et fødselsdato med tosifret årstal og se om det blir tolket riktig."
+        >
             <Datepicker
-                inputProps={{ id: 'datepicker-birthday-example' }}
-                label="Fødelsedato"
                 locale="nb"
                 maxDate={maxDate}
                 onChange={setDate}
                 value={date}
             />
-        </>
+        </InputGroup>
     );
 };
diff --git a/component-overview/examples/datepicker/Datepicker-calendarAbove.jsx b/component-overview/examples/datepicker/Datepicker-calendarAbove.jsx
@@ -1,19 +1,20 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            calendarAbove={true}
-            inputProps={{ id: 'datepicker-example-calendar-above' }}
-            label="Velg dato"
-            locale="nb"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                calendarAbove={true}
+                locale="nb"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-en.jsx b/component-overview/examples/datepicker/Datepicker-en.jsx
@@ -1,18 +1,19 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            inputProps={{ id: 'datepicker-example' }}
-            label="Velg dato"
-            locale="en"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Pick date">
+            <Datepicker
+                locale="en"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-fullWidth.jsx b/component-overview/examples/datepicker/Datepicker-fullWidth.jsx
@@ -1,19 +1,20 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            fullWidth={true}
-            inputProps={{ id: 'datepicker-example-full-width' }}
-            label="Velg dato"
-            locale="nb"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                fullWidth={true}
+                locale="nb"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-invalid.jsx b/component-overview/examples/datepicker/Datepicker-invalid.jsx
@@ -1,19 +1,20 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            aria-invalid="true"
-            inputProps={{ id: 'datepicker-example-aria-invalid' }}
-            label="Velg dato"
-            locale="nn"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                aria-invalid="true"
+                locale="nn"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-nn.jsx b/component-overview/examples/datepicker/Datepicker-nn.jsx
@@ -1,18 +1,19 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
 
     return (
-        <Datepicker
-            inputProps={{ id: 'datepicker-example' }}
-            label="Velg dato"
-            locale="nn"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-        />
+        <InputGroup label="Velg dato">
+            <Datepicker
+                locale="nn"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker-two.jsx b/component-overview/examples/datepicker/Datepicker-two.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
 import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date1, setDate1] = useState('01.01.2016');
@@ -10,28 +11,28 @@ import { Grid, GridRow, GridCol } from '@sb1/ffe-grid-react';
         <Grid>
             <GridRow>
                 <GridCol sm="5">
-                    <Datepicker
-                        inputProps={{ id: 'datepicker-1' }}
-                        label="Velg dato"
-                        locale="en"
-                        maxDate="31.12.2016"
-                        minDate="01.01.2016"
-                        onChange={setDate1}
-                        value={date1}
-                    />
+                    <InputGroup label="Velg dato 1">
+                        <Datepicker
+                            locale="en"
+                            maxDate="31.12.2016"
+                            minDate="01.01.2016"
+                            onChange={setDate1}
+                            value={date1}
+                        />
+                    </InputGroup>
                 </GridCol>
                 <GridCol sm="5">
-                    <Datepicker
-                        inputProps={{ id: 'datepicker-2' }}
-                        label="Velg dato"
-                        locale="en"
-                        maxDate="31.12.2016"
-                        minDate="01.01.2016"
-                        onChange={setDate2}
-                        value={date2}
-                    />
+                    <InputGroup label="Velg dato 2">
+                        <Datepicker
+                            locale="en"
+                            maxDate="31.12.2016"
+                            minDate="01.01.2016"
+                            onChange={setDate2}
+                            value={date2}
+                        />
+                    </InputGroup>
                 </GridCol>
             </GridRow>
         </Grid>
     );
-}
+};
diff --git a/component-overview/examples/datepicker/Datepicker.jsx b/component-overview/examples/datepicker/Datepicker.jsx
@@ -1,20 +1,21 @@
-import { useState, useRef } from 'react';
+import { useState, useId } from 'react';
 import { Datepicker } from '@sb1/ffe-datepicker-react';
+import { InputGroup } from '@sb1/ffe-form-react';
 
 () => {
     const [date, setDate] = useState('01.01.2016');
-    const innerRef = useRef(date); //Optional ref to the input element
+    const inputId = useId();
 
     return (
-        <Datepicker
-            inputProps={{ id: 'datepicker-example' }}
-            label="Velg dato"
-            locale="nb"
-            maxDate="31.12.2016"
-            minDate="01.01.2016"
-            onChange={setDate}
-            value={date}
-            innerRef={innerRef}
-        />
+        <InputGroup label="Dato" inputId={inputId}>
+            <Datepicker
+                inputProps={{ id: inputId }}
+                locale="nb"
+                maxDate="31.12.2016"
+                minDate="01.01.2016"
+                onChange={setDate}
+                value={date}
+            />
+        </InputGroup>
     );
-}
+};
diff --git a/packages/ffe-datepicker-react/src/calendar/Calendar.tsx b/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
@@ -261,9 +261,12 @@ export class Calendar extends Component<CalendarProps, State> {
 
         /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
         return (
-            <div role="dialog" aria-modal={true}>
+            <div
+                role="dialog"
+                aria-modal={true}
+                aria-labelledby={`${this.datepickerId}-title`}
+            >
                 <div
-                    aria-labelledby={`${this.datepickerId}-title`}
                     className={this.props.calendarClassName || 'ffe-calendar'}
                     role="application"
                     onKeyDown={this.focusTrap}

diff --git a/packages/ffe-datepicker-react/src/calendar/ClickableDate.spec.tsx b/packages/ffe-datepicker-react/src/calendar/ClickableDate.spec.tsx
@@ -9,16 +9,24 @@ describe('<ClickableDate />', () => {
 
     const dateButtonRef = React.createRef<HTMLTableCellElement>();
     const activeDate = (
-        <ClickableDate
-            calendarButtonState={date as unknown as CalendarButtonState}
-            onClick={() => true}
-            headers="id-to-th-element"
-            locale="nn"
-            month="Mai"
-            year={2016}
-            isFocusingHeader={false}
-            dateButtonRef={dateButtonRef}
-        />
+        <table>
+            <tbody>
+                <tr>
+                    <ClickableDate
+                        calendarButtonState={
+                            date as unknown as CalendarButtonState
+                        }
+                        onClick={() => true}
+                        headers="id-to-th-element"
+                        locale="nn"
+                        month="Mai"
+                        year={2016}
+                        isFocusingHeader={false}
+                        dateButtonRef={dateButtonRef}
+                    />
+                </tr>
+            </tbody>
+        </table>
     );
 
     it('should render an button with active date', () => {

diff --git a/packages/ffe-datepicker-react/src/calendar/Header.tsx b/packages/ffe-datepicker-react/src/calendar/Header.tsx
@@ -25,10 +25,7 @@ export const Header: React.FC<HeaderProps> = ({
     nextMonthButtonElement,
 }) => {
     const arrowBackIosIcon =
-        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0xMjcuMzg0LTQ4MCAzMDEuMzA4IDMwMS4zMDhxMTEuOTIzIDExLjkyMyAxMS42MTUgMjguMDc3LS4zMDggMTYuMTUzLTEyLjIzMSAyOC4wNzYtMTEuOTIyIDExLjkyMy0yOC4wNzYgMTEuOTIzdC0yOC4wNzYtMTEuOTIzTDY1LjA3OC00MjguNzdRNTQuMjMtNDM5LjYxNiA0OS00NTMuMDc3IDQzLjc3LTQ2Ni41MzkgNDMuNzctNDgwcTAtMTMuNDYxIDUuMjMtMjYuOTIzIDUuMjMxLTEzLjQ2MSAxNi4wNzgtMjQuMzA3bDMwNi44NDYtMzA2Ljg0NnExMS45MjItMTEuOTIzIDI4LjM4NC0xMS42MTYgMTYuNDYxLjMwOCAyOC4zODQgMTIuMjMxIDExLjkyMyAxMS45MjMgMTEuOTIzIDI4LjA3NiAwIDE2LjE1NC0xMS45MjMgMjguMDc3TDEyNy4zODQtNDgwWiIvPjwvc3ZnPg==';
-
-    const arrowForwardIosIcon =
-        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01OTMuMjMyLTQ4MCAyOTEuOTI0LTc4MS4zMDhxLTExLjkyMy0xMS45MjMtMTEuNjE2LTI4LjM4NC4zMDgtMTYuNDYyIDEyLjIzMS0yOC4zODQgMTEuOTIzLTExLjkyMyAyOC4zODQtMTEuOTIzdDI4LjM4NCAxMS45MjNMNjU1LjUzOC01MzEuMjNxMTAuODQ2IDEwLjg0NiAxNi4wNzcgMjQuMzA3IDUuMjMgMTMuNDYyIDUuMjMgMjYuOTIzIDAgMTMuNDYxLTUuMjMgMjYuOTIzLTUuMjMxIDEzLjQ2MS0xNi4wNzcgMjQuMzA3TDM0OC42OTItMTIxLjkyNHEtMTEuOTIzIDExLjkyMy0yOC4wNzcgMTEuNjE2LTE2LjE1My0uMzA4LTI4LjA3Ni0xMi4yMzEtMTEuOTIzLTExLjkyMy0xMS45MjMtMjguMzg0dDExLjkyMy0yOC4zODRMNTkzLjIzMi00ODBaIi8+PC9zdmc+';
+        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0zNjcuMzg0LTQ4MCAzMDEuMzA4IDMwMS4zMDhxMTEuOTIzIDExLjkyMyAxMS42MTUgMjguMDc3LS4zMDggMTYuMTUzLTEyLjIzMSAyOC4wNzYtMTEuOTIyIDExLjkyMy0yOC4wNzYgMTEuOTIzdC0yOC4wNzYtMTEuOTIzTDMwNS4wNzgtNDI4Ljc3cS0xMC44NDctMTAuODQ2LTE2LjA3Ny0yNC4zMDctNS4yMzEtMTMuNDYyLTUuMjMxLTI2LjkyMyAwLTEzLjQ2MSA1LjIzMS0yNi45MjMgNS4yMy0xMy40NjEgMTYuMDc3LTI0LjMwN2wzMDYuODQ2LTMwNi44NDZxMTEuOTIyLTExLjkyMyAyOC4zODQtMTEuNjE2IDE2LjQ2MS4zMDggMjguMzg0IDEyLjIzMSAxMS45MjMgMTEuOTIzIDExLjkyMyAyOC4wNzYgMCAxNi4xNTQtMTEuOTIzIDI4LjA3N0wzNjcuMzg0LTQ4MFoiLz48L3N2Zz4=';
 
     return (
         <div className="ffe-calendar__header">
@@ -66,7 +63,7 @@ export const Header: React.FC<HeaderProps> = ({
                     tabIndex={-1}
                 >
                     <Icon
-                        fileUrl={arrowForwardIosIcon}
+                        fileUrl={arrowBackIosIcon}
                         size="md"
                         className="ffe-calendar__icon-next"
                     />

diff --git a/packages/ffe-datepicker-react/src/calendar/NonClickableDate.tsx b/packages/ffe-datepicker-react/src/calendar/NonClickableDate.tsx
@@ -9,8 +9,7 @@ interface Props {
 export const NonClickableDate: React.FC<Props> = ({ date }) => {
     return (
         <td
-            aria-disabled="true"
-            aria-current="false"
+            aria-hidden={true}
             className="ffe-calendar__day"
             key={date.timestamp}
             role="button"