Accessibility

frontend/package.json

@@ -15,17 +15,17 @@
   },
   "devDependencies": {
     "@types/amplitude-js": "^8.16.5",
-    "@types/jest": "^29.5.8",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@types/styled-components": "^5.1.30",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@types/styled-components": "^5.1.34",
     "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.8.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -36,35 +36,35 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "jest": "^29.7.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.0",
-    "typescript": "^5.2.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "@navikt/ds-css": "^5.10.1",
+    "@navikt/ds-css": "^5.11.4",
     "@navikt/ds-icons": "^3.4.3",
-    "@navikt/ds-react": "^5.10.1",
+    "@navikt/ds-react": "^5.11.4",
     "@navikt/fnrvalidator": "^1.3.3",
-    "@navikt/nav-dekoratoren-moduler": "^2.1.3",
-    "@reduxjs/toolkit": "^1.9.7",
-    "@sentry/react": "^7.80.0",
-    "@sentry/tracing": "^7.80.0",
+    "@navikt/nav-dekoratoren-moduler": "^2.1.5",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@sentry/react": "^7.85.0",
+    "@sentry/tracing": "^7.85.0",
     "@styled-icons/material": "^10.47.0",
     "amplitude-js": "^8.21.9",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.3",
-    "react-router": "^6.18.0",
-    "react-router-dom": "^6.18.0",
-    "redux": "^4.2.1",
+    "react-redux": "^9.0.2",
+    "react-router": "^6.20.1",
+    "react-router-dom": "^6.20.1",
+    "redux": "^5.0.0",
     "styled-components": "^6.1.1"
   }
 }

frontend/src/components/anke/innlogget/anke-loader.tsx

@@ -1,5 +1,5 @@
 import { Alert } from '@navikt/ds-react';
-import { skipToken } from '@reduxjs/toolkit/dist/query/react';
+import { skipToken } from '@reduxjs/toolkit/query';
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from '@app/language/use-translation';

frontend/src/components/attachments/attachments.tsx

@@ -1,6 +1,6 @@
 import { Close, Delete } from '@navikt/ds-icons';
 import { Alert, BodyLong, Button, ErrorSummary, Label, Loader } from '@navikt/ds-react';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 import React, { useState } from 'react';
 import { styled } from 'styled-components';
 import { displayBytes } from '@app/functions/display';

frontend/src/components/attachments/upload-button.tsx

@@ -1,6 +1,6 @@
 import { Upload } from '@navikt/ds-icons';
 import { Button } from '@navikt/ds-react';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 import { captureException } from '@sentry/react';
 import React, { useRef } from 'react';
 import { styled } from 'styled-components';

frontend/src/components/case/common/post/post-form-container.tsx

@@ -1,4 +1,4 @@
-import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { skipToken } from '@reduxjs/toolkit/query';
 import React from 'react';
 import { useBreadcrumbs } from '@app/breadcrumbs/use-breadcrumbs';
 import { useInnsendingsytelseName } from '@app/hooks/use-innsendingsytelser';

frontend/src/components/date-picker/date-picker.tsx

@@ -2,6 +2,7 @@ import { DatePicker as DatePickerInternal } from '@navikt/ds-react';
 import { addYears, format, isAfter, isBefore, isValid, parse, subDays, subYears } from 'date-fns';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { isoDateToPretty } from '@app/domain/date/date';
+import { useTranslation } from '@app/language/use-translation';
 import { FORMAT, PRETTY_FORMAT } from './constants';
 
 interface Props {
@@ -31,6 +32,7 @@ export const DatePicker = ({
 }: Props) => {
   const [inputError, setInputError] = useState<string>();
   const [input, setInput] = useState<string>(value === null ? '' : isoDateToPretty(value) ?? '');
+  const { error_messages } = useTranslation();
 
   useEffect(() => {
     setInput(value === null ? '' : isoDateToPretty(value) ?? '');
@@ -58,21 +60,21 @@ export const DatePicker = ({
       const validRange = isAfter(date, subDays(fromDate, 1)) && isBefore(date, toDate);
 
       if (!validFormat) {
-        setInputError('Ugyldig dato');
+        setInputError(error_messages.date.invalid_format);
 
         return;
       }
 
       if (!validRange) {
-        setInputError(`Dato må være mellom ${format(fromDate, PRETTY_FORMAT)} og ${format(toDate, PRETTY_FORMAT)}`);
+        setInputError(error_messages.date.invalid_range(fromDate, toDate));
 
         return;
       }
 
       setInputError(undefined);
       onChange(format(date, FORMAT));
     },
-    [fromDate, onChange, toDate],
+    [error_messages.date, fromDate, onChange, toDate],
   );
 
   const onInputChange = useCallback(() => {

frontend/src/components/klage/innlogget/klage-loader.tsx

@@ -1,5 +1,5 @@
 import { Alert } from '@navikt/ds-react';
-import { skipToken } from '@reduxjs/toolkit/dist/query/react';
+import { skipToken } from '@reduxjs/toolkit/query';
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from '@app/language/use-translation';

frontend/src/components/personalised-content/available-anker.tsx

@@ -1,5 +1,5 @@
 import { Heading, LinkPanel } from '@navikt/ds-react';
-import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { skipToken } from '@reduxjs/toolkit/query';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { isoDateTimeToPretty } from '@app/domain/date/date';

frontend/src/components/personalised-content/draft-anker.tsx

@@ -1,5 +1,5 @@
 import { Heading } from '@navikt/ds-react';
-import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { skipToken } from '@reduxjs/toolkit/query';
 import React, { useMemo } from 'react';
 import { useIsAuthenticated } from '@app/hooks/use-user';
 import { Innsendingsytelse } from '@app/innsendingsytelser/innsendingsytelser';

frontend/src/components/personalised-content/draft-klager.tsx

@@ -1,5 +1,5 @@
 import { Heading } from '@navikt/ds-react';
-import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { skipToken } from '@reduxjs/toolkit/query';
 import React, { useMemo } from 'react';
 import { useIsAuthenticated } from '@app/hooks/use-user';
 import { Innsendingsytelse } from '@app/innsendingsytelser/innsendingsytelser';

frontend/src/functions/is-api-error.ts

@@ -1,4 +1,4 @@
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
 interface ApiError {
   status: number;

frontend/src/hooks/use-user.ts

@@ -1,4 +1,4 @@
-import { skipToken } from '@reduxjs/toolkit/dist/query/react';
+import { skipToken } from '@reduxjs/toolkit/query';
 import { useGetUserQuery, useIsAuthenticatedQuery } from '@app/redux-api/user/api';
 
 export const useIsAuthenticated = (skip?: typeof skipToken) => {

frontend/src/language/component.tsx

@@ -16,6 +16,8 @@ export const LanguageComponent = (props: Props) => {
     onLanguageSelect((language) => {
       if (typeof language.url === 'string') {
         navigate(language.url);
+
+        document.documentElement.lang = language.locale;
       }
     });
 

frontend/src/language/en.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable max-lines */
 import { BodyShort, Link } from '@navikt/ds-react';
+import { format } from 'date-fns';
 import React from 'react';
+import { PRETTY_FORMAT } from '@app/components/date-picker/constants';
 import { ExternalLink } from '@app/components/link/link';
 import { ErrorMessageKeys } from '@app/language/error-messages';
 import { Utfall } from '@app/redux-api/case/anke/types';
@@ -391,14 +393,19 @@ export const en: Language = {
       'You have tried to include an attachment with a format we do not support. Attachments are limited to til PNG, JPEG, and PDF.',
     skjema: {
       title: 'Form is not complete',
-      fnr_dnr_or_npid: 'Invalid national identity numbe, D number or NPID.',
-      vedtak_date: 'Decision date must be a valid date that is not in the future, or empty.',
-      vedtak_date_required: 'Decision date must be a valid date that is not in the future.',
-      fornavn: 'First and middle name can not be empty.',
-      etternavn: 'Surname can not be empty.',
+      fnr_dnr_or_npid: 'You must input a valid national identity number, D number or NPID.',
+      vedtak_date: 'You must either leave the field empty, or input a valid date that is not in the future.',
+      vedtak_date_required: 'You must input a valid date that is not in the future.',
+      fornavn: 'You must input a first and middle name.',
+      etternavn: 'You must input a surname.',
       begrunnelse: 'You must state a reason before continuing.',
       enhet: 'You must select a unit.',
     },
+    date: {
+      invalid_format: 'You must input a valid date.',
+      invalid_range: (from: Date, to: Date) =>
+        `You must input a date that is between ${format(from, PRETTY_FORMAT)} and ${format(to, PRETTY_FORMAT)}.`,
+    },
   },
   common: {
     loading: 'Loading...',

frontend/src/language/nb.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable max-lines */
 import { BodyShort, Link } from '@navikt/ds-react';
+import { format } from 'date-fns';
 import React from 'react';
+import { PRETTY_FORMAT } from '@app/components/date-picker/constants';
 import { ExternalLink } from '@app/components/link/link';
 import { ErrorMessageKeys } from '@app/language/error-messages';
 import { Utfall } from '@app/redux-api/case/anke/types';
@@ -400,14 +402,20 @@ export const nb = {
       'Du har prøvd å legge til et vedlegg med et format vi ikke støtter. Vedlegg er begrenset til PNG, JPEG, og PDF.',
     skjema: {
       title: 'Feil i skjema',
-      fnr_dnr_or_npid: 'Ugyldig fødselsnummer, D-nummer eller NPID.',
-      vedtak_date: 'Vedtaksdato må være en gyldig dato som ikke er i fremtiden, eller tom.',
-      vedtak_date_required: 'Vedtaksdato må være en gyldig dato som ikke er i fremtiden.',
+      fnr_dnr_or_npid: 'Du må fylle inn et gyldig fødselsnummer, D-nummer eller NPID.',
+      vedtak_date:
+        'Du må enten la feltet stå tomt, eller fylle inn en dato som er en gyldig dato, og som ikke er i fremtiden.',
+      vedtak_date_required: 'Du må fylle inn en dato som er en gyldig dato og som ikke er i fremtiden.',
       fornavn: 'Du må fylle inn fornavn og mellomnavn.',
       etternavn: 'Du må fylle inn etternavn.',
       begrunnelse: 'Du må skrive en begrunnelse før du går videre.',
       enhet: 'Du må velge en enhet.',
     },
+    date: {
+      invalid_format: 'Du må velge en gyldig dato.',
+      invalid_range: (from: Date, to: Date) =>
+        `Du må velge en dato som er mellom ${format(from, PRETTY_FORMAT)} og ${format(to, PRETTY_FORMAT)}`,
+    },
   },
   common: {
     loading: 'Laster...',