Translations for ReadOnlyIcon (#3311)

navikt · Oct 31, 2024 · c200f58 · c200f58
1 parent 5ce8ec6
commit c200f58
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 43 deletions.
diff --git a/@navikt/core/react/src/date/parts/DateInput.tsx b/@navikt/core/react/src/date/parts/DateInput.tsx
@@ -94,7 +94,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon readOnly={readOnly} />
+        {readOnly && <ReadOnlyIcon />}
         {label}
       </Label>
       {!!description && (

diff --git a/@navikt/core/react/src/form/ReadOnlyIcon.tsx b/@navikt/core/react/src/form/ReadOnlyIcon.tsx
@@ -1,20 +1,17 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import { useI18n } from "../util/i18n/i18n.context";
 
-export const ReadOnlyIcon = ({
-  readOnly,
-  nativeReadOnly = true,
-}: {
-  readOnly?: boolean;
-  nativeReadOnly?: boolean;
-}) => {
-  if (readOnly) {
-    return (
-      <PadlockLockedFillIcon
-        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
-        className="navds-form-field__readonly-icon"
-      />
-    );
-  }
-  return null;
-};
+export const ReadOnlyIcon = () => (
+  <PadlockLockedFillIcon
+    aria-hidden
+    className="navds-form-field__readonly-icon"
+  />
+);
+
+export const ReadOnlyIconWithTitle = () => (
+  <PadlockLockedFillIcon
+    title={useI18n("global")("readOnly")}
+    className="navds-form-field__readonly-icon"
+  />
+);
diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
@@ -90,9 +90,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               className="navds-checkbox__label-text"
               aria-hidden
             >
-              {!nested && (
-                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
-              )}
+              {!nested && readOnly && <ReadOnlyIconWithTitle />}
               {props.children}
             </BodyShort>
             {props.description && (

diff --git a/@navikt/core/react/src/form/combobox/Combobox.tsx b/@navikt/core/react/src/form/combobox/Combobox.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -46,7 +46,7 @@ export const Combobox = forwardRef<
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
+        {readOnly && <ReadOnlyIconWithTitle />}
         {label}
       </Label>
       {!!description && (

diff --git a/@navikt/core/react/src/form/fieldset/Fieldset.tsx b/@navikt/core/react/src/form/fieldset/Fieldset.tsx
@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
 import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
@@ -89,7 +89,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
-            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
+            {readOnly &&
+              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
             {legend}
           </Label>
           {!!description && (

diff --git a/@navikt/core/react/src/form/select/Select.tsx b/@navikt/core/react/src/form/select/Select.tsx
@@ -3,7 +3,7 @@ import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
@@ -112,7 +112,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+          {readOnly && <ReadOnlyIconWithTitle />}
           {label}
         </Label>
         {!!description && (

diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -8,7 +8,7 @@ import React, {
 import { Loader } from "../../loader";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 const SelectedIcon = () => (
@@ -21,7 +21,6 @@ const SelectedIcon = () => (
     focusable={false}
     role="img"
     aria-hidden
-    aria-label="Deaktiver valg"
   >
     <path
       fillRule="evenodd"
@@ -117,19 +116,19 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => {
+          onChange={(event) => {
             if (readOnly) {
               return;
             }
-            setChecked(e.target.checked);
-            props.onChange?.(e);
+            setChecked(event.target.checked);
+            props.onChange?.(event);
           }}
-          onClick={(e) => {
+          onClick={(event) => {
             if (readOnly) {
-              e.preventDefault();
+              event.preventDefault();
               return;
             }
-            props?.onClick?.(e);
+            props.onClick?.(event);
           }}
           className={cl(className, "navds-switch__input")}
         />
@@ -150,11 +149,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <div
             className={cl("navds-switch__content", {
               "navds-sr-only": hideLabel,
-              "navds-switch--with-description": !!description && !hideLabel,
+              "navds-switch--with-description": description && !hideLabel,
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
-              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
             {description && (

diff --git a/@navikt/core/react/src/form/textarea/Textarea.tsx b/@navikt/core/react/src/form/textarea/Textarea.tsx
@@ -9,9 +9,6 @@ import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
 
-/**
- * TODO: Mulighet for lokalisering av sr-only/counter text
- */
 export interface TextareaProps
   extends FormFieldProps,
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -144,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
         {!!description && (

diff --git a/@navikt/core/react/src/form/textfield/TextField.tsx b/@navikt/core/react/src/form/textfield/TextField.tsx
@@ -91,7 +91,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
 

diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts
@@ -4,6 +4,7 @@ export default {
   global: {
     showMore: "Show more",
     showLess: "Show less",
+    readOnly: "Read-only",
   },
 
   FileUpload: {

diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts
@@ -10,6 +10,7 @@ export default {
   global: {
     showMore: "Vis mer",
     showLess: "Vis mindre",
+    readOnly: "Skrivebeskyttet",
   },
 
   FileUpload: {

diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts
@@ -4,6 +4,7 @@ export default {
   global: {
     showMore: "Vis meir",
     showLess: "Vis mindre",
+    readOnly: "Skrivebeskytta",
   },
 
   FileUpload: {