Update npm non-major dependencies (main) (#2633)

* Update npm non-major dependencies * pleases new ts in dompurify hook * fixes a11y error of interactive elements inside interactive elements * fixes dropzone and fileupload tests * fixes dropzone styling --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Camilla Marie Dalan <camillamdalan@gmail.com>
Altinn · Nov 19, 2024 · 2cc2a39 · 2cc2a39
1 parent 8489406
commit 2cc2a39
Show file tree

Hide file tree

Showing 11 changed files with 2,303 additions and 1,124 deletions.
diff --git a/.yarn/releases/yarn-4.5.0.cjs → .yarn/releases/yarn-4.5.1.cjs b/.yarn/releases/yarn-4.5.0.cjs → .yarn/releases/yarn-4.5.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,4 +4,4 @@ enableTelemetry: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.0.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -165,6 +165,7 @@ export default tseslint.config(
     },
     rules: {
       'testing-library/await-async-queries': ['warn'],
+      'jsx-a11y/label-has-associated-control': ['off'],
     },
   },
   {

diff --git a/package.json b/package.json
@@ -30,10 +30,10 @@
     "lint": "yarn gen && eslint ."
   },
   "devDependencies": {
-    "@babel/core": "7.25.8",
+    "@babel/core": "7.26.0",
     "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "7.25.8",
-    "@babel/preset-react": "7.25.7",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.25.9",
     "@babel/runtime": "^7.21.0",
     "@babel/runtime-corejs3": "^7.21.0",
     "@eslint/compat": "^1.1.1",
@@ -44,32 +44,31 @@
     "@tanstack/react-query-devtools": "^5.25.0",
     "@testing-library/cypress": "10.0.2",
     "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/dompurify": "3.0.5",
     "@types/dot-object": "2.1.6",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/js-levenshtein": "^1.1.1",
     "@types/json-schema": "^7.0.11",
     "@types/leaflet": "^1",
     "@types/marked": "6.0.0",
     "@types/mime": "4.0.0",
     "@types/node": "^20.10.5",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/react-router-dom": "5.3.3",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "axe-core": "4.10.0",
+    "@typescript-eslint/eslint-plugin": "8.14.0",
+    "@typescript-eslint/parser": "8.14.0",
+    "axe-core": "4.10.2",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "caniuse-lite": "^1.0.30001466",
     "core-js": "^3.29.1",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
-    "cypress": "13.15.0",
+    "cypress": "13.15.2",
     "cypress-axe": "1.5.0",
     "cypress-iframe": "^1.0.1",
     "cypress-multi-reporters": "^2.0.4",
@@ -78,18 +77,18 @@
     "cypress-wait-until": "^3.0.0",
     "dotenv": "16.4.5",
     "esbuild-loader": "^4.0.2",
-    "eslint": "9.12.0",
+    "eslint": "9.14.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-cypress": "4.0.0",
+    "eslint-plugin-cypress": "4.1.0",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-no-relative-import-paths": "1.5.5",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
-    "eslint-plugin-sonarjs": "2.0.3",
-    "eslint-plugin-testing-library": "6.3.0",
+    "eslint-plugin-sonarjs": "2.0.4",
+    "eslint-plugin-testing-library": "6.4.0",
     "eslint-plugin-unused-imports": "^4.0.0",
     "fork-ts-checker-notifier-webpack-plugin": "9.0.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
@@ -100,13 +99,13 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
-    "jest-mock-axios": "4.7.3",
+    "jest-mock-axios": "4.8.0",
     "jest-preview": "^0.3.1",
     "js-levenshtein": "^1.1.6",
     "jsdom": "25.0.1",
     "lint-staged": "15.2.10",
     "mime": "4.0.4",
-    "mini-css-extract-plugin": "2.9.1",
+    "mini-css-extract-plugin": "2.9.2",
     "postcss-modules": "^6.0.0",
     "prettier": "3.3.3",
     "react-refresh": "0.14.2",
@@ -121,7 +120,7 @@
     "typescript-plugin-css-modules": "^5.1.0",
     "use-immer": "^0.10.0",
     "utility-types": "3.11.0",
-    "webpack": "5.95.0",
+    "webpack": "5.96.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0"
   },
@@ -144,7 +143,7 @@
     "classnames": "2.5.1",
     "cypress-parallel": "^0.14.0",
     "date-fns": "^4.1.0",
-    "dompurify": "3.1.7",
+    "dompurify": "3.2.0",
     "dot-object": "2.1.5",
     "eslint-plugin-preferred-import-path": "^1.1.0",
     "fast-array-diff": "^1.1.0",
@@ -154,27 +153,27 @@
     "jsonpointer": "5.0.1",
     "leaflet": "^1.9.4",
     "lru-cache": "^11.0.0",
-    "marked": "14.1.2",
+    "marked": "14.1.4",
     "marked-mangle": "^1.0.1",
     "node-polyfill-webpack-plugin": "^4.0.0",
     "react": "18.3.1",
     "react-content-loader": "7.0.2",
     "react-day-picker": "^9.0.8",
     "react-device-detect": "2.2.3",
     "react-dom": "18.3.1",
-    "react-dropzone": "14.2.9",
+    "react-dropzone": "14.3.5",
     "react-helmet-async": "^2.0.5",
     "react-leaflet": "^4.2.1",
     "react-number-format": "^5.3.1",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.28.0",
     "react-toastify": "^10.0.0",
     "terraformer-wkt-parser": "^1.2.1",
     "typescript": "5.6.3",
     "typescript-eslint": "^8.0.0",
-    "uuid": "11.0.2",
+    "uuid": "11.0.3",
     "zustand": "^4.4.7"
   },
-  "packageManager": "yarn@4.5.0",
+  "packageManager": "yarn@4.5.1",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       ".husky/pre-commit-check-for-skipped-tests",
@@ -210,4 +209,4 @@
       }
     }
   }
-}
+}
diff --git a/src/language/sharedLanguage.ts b/src/language/sharedLanguage.ts
@@ -5,7 +5,7 @@ import DOMPurify from 'dompurify';
 import parseHtmlToReact, { domToReact } from 'html-react-parser';
 import { marked } from 'marked';
 import { mangle } from 'marked-mangle';
-import type { DOMNode, Element, HTMLReactParserOptions } from 'html-react-parser';
+import type { DOMNode, Element as ReactParserElement, HTMLReactParserOptions } from 'html-react-parser';
 
 import { LinkToPotentialNode } from 'src/components/form/LinkToPotentialNode';
 import { LinkToPotentialPage } from 'src/components/form/LinkToPotentialPage';
@@ -14,7 +14,11 @@ import { cachedFunction } from 'src/utils/cachedFunction';
 marked.use(mangle());
 
 DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-  if (node.tagName === 'A') {
+  if (!(node instanceof Element)) {
+    return;
+  }
+
+  if (node['tagName'] === 'A') {
     node.classList.add('altinnLink');
     const url = node.getAttribute('href') || '';
     if (url.startsWith('http') && !url.match(/(local\.altinn|altinn\.no|altinn\.cloud|basefarm\.net)/)) {
@@ -46,7 +50,7 @@ export const parseAndCleanText = cachedFunction(
   (text) => text ?? null,
 );
 
-function isElement(node: DOMNode): node is Element {
+function isElement(node: DOMNode): node is ReactParserElement {
   return node.type === 'tag';
 }
 

diff --git a/src/layout/FileUpload/DropZone/DropzoneComponent.module.css b/src/layout/FileUpload/DropZone/DropzoneComponent.module.css
@@ -5,11 +5,6 @@
   gap: 8px;
 }
 
-.fileUploadTextBold {
-  font-weight: 500;
-  font-size: 1rem;
-  margin-bottom: 0.375rem;
-}
 .blueUnderLine {
   border-bottom: 2px solid #1eadf7 !important;
 }
@@ -20,9 +15,10 @@
   margin-bottom: 0;
 }
 
-.fileUploadText {
-  font-weight: 300;
-  font-size: 1rem;
+.fileUpload {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .fileUploadInvalid:focus {

diff --git a/src/layout/FileUpload/DropZone/DropzoneComponent.test.tsx b/src/layout/FileUpload/DropZone/DropzoneComponent.test.tsx
@@ -3,65 +3,61 @@ import React from 'react';
 import { jest } from '@jest/globals';
 import { screen } from '@testing-library/react';
 
-import { getDescriptionId } from 'src/components/label/Label';
+import { getDescriptionId, getLabelId } from 'src/components/label/Label';
 import { DropzoneComponent } from 'src/layout/FileUpload/DropZone/DropzoneComponent';
 import { renderWithoutInstanceAndLayout } from 'src/test/renderWithProviders';
 import type { IDropzoneComponentProps } from 'src/layout/FileUpload/DropZone/DropzoneComponent';
 
 describe('DropzoneComponent', () => {
   const id = 'mock-id';
   const isMobile = false;
-  const language = {};
   const maxFileSizeInMB = 20;
   const readOnly = false;
   const onClick = jest.fn();
   const onDrop = jest.fn();
   const hasValidationMessages = false;
   const hasCustomFileEndings = false;
   const validFileEndings = '';
-  const textResourceBindings = {};
+
+  const defaultProps: IDropzoneComponentProps = {
+    id,
+    isMobile,
+    maxFileSizeInMB,
+    readOnly,
+    onClick,
+    onDrop,
+    hasValidationMessages,
+    hasCustomFileEndings,
+    validFileEndings,
+  };
 
   it('should include aria-describedby for description if textResourceBindings.description is present', async () => {
-    await render({
-      textResourceBindings: {
-        description: 'description',
-      },
+    await renderWithoutInstanceAndLayout({
+      renderer: () => (
+        <>
+          <label id={getLabelId(id)}>Enkel filopplasting</label>
+          <div id={getDescriptionId(id)}>Enkel beskrivelse</div>
+          <DropzoneComponent
+            {...defaultProps}
+            labelId={getLabelId(id)}
+            descriptionId={getDescriptionId(id)}
+          />
+        </>
+      ),
     });
     const dropzone = screen.getByRole('presentation', {
-      name: /Dra og slipp eller let etter fil Tillatte filformater er: alle/i,
+      name: /Enkel filopplasting/i,
+      description: /Enkel beskrivelse/i,
     });
     expect(dropzone.getAttribute('aria-describedby')).toContain(getDescriptionId(id));
   });
 
   it('should not include aria-describedby for description if textResourceBindings.description is not present', async () => {
-    await render();
-    const dropzone = screen.getByRole('presentation', {
-      name: /Dra og slipp eller let etter fil Tillatte filformater er: alle/i,
+    await renderWithoutInstanceAndLayout({
+      renderer: () => <DropzoneComponent {...defaultProps} />,
     });
+
+    const dropzone = screen.getByRole('presentation');
     expect(dropzone.getAttribute('aria-describedby')).not.toContain(getDescriptionId(id));
   });
-
-  async function render(props: Partial<IDropzoneComponentProps> = {}) {
-    const defaultProps = {
-      id,
-      isMobile,
-      language,
-      maxFileSizeInMB,
-      readOnly,
-      onClick,
-      onDrop,
-      hasValidationMessages,
-      hasCustomFileEndings,
-      validFileEndings,
-      textResourceBindings,
-    } as IDropzoneComponentProps;
-    await renderWithoutInstanceAndLayout({
-      renderer: () => (
-        <DropzoneComponent
-          {...defaultProps}
-          {...props}
-        />
-      ),
-    });
-  }
 });