Textarea: Teller flyttet ut

.changeset/nasty-files-know.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:wheelchair: Textarea: Byttet fra `aria-live` til `role=status` på telleren for bedre semantikk

.changeset/real-wasps-kiss.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+:bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser

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

@@ -37,10 +37,6 @@
   color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
 }
 
-.navds-textarea--counter {
-  padding-bottom: var(--a-spacing-8);
-}
-
 .navds-textarea__input::placeholder {
   color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
 }
@@ -65,19 +61,9 @@
   padding: var(--a-spacing-1-alt);
 }
 
-.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
-  padding-bottom: var(--a-spacing-7);
-}
-
 .navds-textarea__counter {
-  pointer-events: none;
+  margin-top: var(--a-spacing-05);
   color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
-  font-style: italic;
-  position: absolute;
-  text-align: left;
-  left: 0.0625rem;
-  bottom: 0.0625rem;
-  padding: var(--a-spacing-1) var(--a-spacing-2);
 }
 
 .navds-textarea__counter--error {

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

@@ -1,10 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit, useId } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
-import { FormFieldProps, useFormField } from "./useFormField";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { omit, useId } from "../util";
+import Counter from "./TextareaCounter";
+import { FormFieldProps, useFormField } from "./useFormField";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text
@@ -27,7 +28,6 @@ export interface TextareaProps
   defaultValue?: string;
   /**
    * Maximum number of character rows to display.
-   * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
    */
   maxRows?: number;
   /**
@@ -50,7 +50,7 @@ export interface TextareaProps
    * i18n-translations for counter-text
    */
   i18n?: {
-    /** @default Antall tegn igjen */
+    /** @default tegn igjen */
     counterLeft?: string;
     /** @default tegn for mye */
     counterTooMuch?: string;
@@ -162,14 +162,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             className={cl(
               "navds-textarea__input",
               "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`,
-              {
-                "navds-textarea--counter": hasMaxLength,
-              }
+              `navds-body-short--${size ?? "medium"}`
             )}
             {...(describedBy ? { "aria-describedby": describedBy } : {})}
           />
-          {hasMaxLength && (
+          {hasMaxLength && !readOnly && !inputProps.disabled && (
             <>
               <span id={maxLengthId} className="navds-sr-only">
                 {`Tekstområde med plass til ${maxLength} tegn.`}
@@ -198,22 +195,4 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   }
 );
 
-export const Counter = ({ maxLength, currentLength, size, i18n }) => {
-  const difference = maxLength - currentLength;
-
-  return (
-    <BodyShort
-      className={cl("navds-textarea__counter", {
-        "navds-textarea__counter--error": difference < 0,
-      })}
-      aria-live={difference < 20 ? "polite" : "off"}
-      size={size}
-    >
-      {difference < 0
-        ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-        : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`}
-    </BodyShort>
-  );
-};
-
 export default Textarea;

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

@@ -0,0 +1,31 @@
+import cl from "clsx";
+import React from "react";
+import { BodyShort } from "../typography";
+import type { TextareaProps } from "./Textarea";
+
+interface Props {
+  maxLength: number;
+  currentLength: number;
+  size: TextareaProps["size"];
+  i18n: TextareaProps["i18n"];
+}
+
+const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
+  const difference = maxLength - currentLength;
+
+  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>
+  );
+};
+
+export default TextareaCounter;

@navikt/core/react/src/form/index.ts

@@ -1,24 +1,24 @@
+export {
+  default as ConfirmationPanel,
+  type ConfirmationPanelProps,
+} from "./ConfirmationPanel";
+export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
+export { default as Select, type SelectProps } from "./Select";
+export { default as Switch, type SwitchProps } from "./Switch";
+export { default as TextField, type TextFieldProps } from "./TextField";
+export { default as Textarea, type TextareaProps } from "./Textarea";
 export {
   Checkbox,
   CheckboxGroup,
   type CheckboxGroupProps,
   type CheckboxProps,
 } from "./checkbox";
-export {
-  type ConfirmationPanelProps,
-  default as ConfirmationPanel,
-} from "./ConfirmationPanel";
+export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
 export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
-export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
 export {
   Radio,
   RadioGroup,
   type RadioGroupProps,
   type RadioProps,
 } from "./radio";
 export { Search, type SearchClearEvent, type SearchProps } from "./search";
-export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
-export { default as Select, type SelectProps } from "./Select";
-export { default as Switch, type SwitchProps } from "./Switch";
-export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
-export { default as TextField, type TextFieldProps } from "./TextField";

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

@@ -14,7 +14,7 @@ export const Default: StoryObj<typeof Textarea> = {
   },
 
   args: {
-    maxLength: 100,
+    maxLength: 0,
     label: "Ipsum enim quis culpa",
     resize: false,
   },
@@ -28,6 +28,7 @@ export const Default: StoryObj<typeof Textarea> = {
     error: { type: "string" },
     hideLabel: { type: "boolean" },
     disabled: { type: "boolean" },
+    readOnly: { type: "boolean" },
     maxRows: { type: "number" },
     minRows: { type: "number" },
   },
@@ -66,6 +67,20 @@ export const Error = () => {
         error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         size="small"
       />
+
+      <Textarea
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        maxLength={20}
+      />
+
+      <Textarea
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        value="Sed dignissim sollicitudin porta."
+        maxLength={20}
+        size="small"
+      />
     </div>
   );
 };

aksel.nav.no/website/pages/eksempler/textarea/resizable.tsx

@@ -0,0 +1,17 @@
+import { withDsExample } from "@/web/examples/withDsExample";
+import { Textarea } from "@navikt/ds-react";
+
+const Example = () => {
+  return <Textarea label="Har du noen tilbakemeldinger?" resize />;
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 6,
+};