♿ Textarea: Forsinkelse ved live-opplesning av gjenstående tegn

.changeset/eighty-glasses-sparkle.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+:wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn

@navikt/core/css/form/textarea.css

@@ -70,6 +70,14 @@
   color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
 }
 
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__wrapper:focus-within .navds-textarea__sr-counter {
+  display: initial;
+}
+
 .navds-textarea--resize-both .navds-textarea__input {
   resize: both;
   border-end-end-radius: 0;

@navikt/core/react/src/form/TextareaCounter.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BodyShort } from "../typography";
+import debounce from "../util/debounce";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {
@@ -13,19 +14,45 @@ interface Props {
 const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
   const difference = maxLength - currentLength;
 
+  const [debouncedDiff, setDebouncedDiff] = useState(difference);
+
+  useEffect(() => {
+    const debounceFunc = debounce(() => {
+      setDebouncedDiff(difference);
+    }, 2000);
+    debounceFunc();
+
+    return () => {
+      debounceFunc.clear();
+    };
+  }, [difference]);
+
   return (
-    <BodyShort
-      className={cl("navds-textarea__counter", {
-        "navds-textarea__counter--error": difference < 0,
-      })}
-      role={difference < 20 ? "status" : undefined}
-      size={size}
-    >
-      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
-    </BodyShort>
+    <>
+      {difference < 20 && (
+        <span
+          role="status"
+          className="navds-textarea__sr-counter navds-sr-only"
+        >
+          {getCounterText(debouncedDiff, i18n)}
+        </span>
+      )}
+
+      <BodyShort
+        className={cl("navds-textarea__counter", {
+          "navds-textarea__counter--error": difference < 0,
+        })}
+        size={size}
+      >
+        {getCounterText(difference, i18n)}
+      </BodyShort>
+    </>
   );
 };
 
+const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+  difference < 0
+    ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
+    : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+
 export default TextareaCounter;

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -103,7 +103,7 @@ export const HideLabel = () => {
 };
 
 export const MaxLength = () => {
-  return <Textarea maxLength={200} label="Ipsum enim quis culpa" />;
+  return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
 };
 
 export const MinRows = () => {