Translate GuidePanel and HelpText, remove text from InternalHeader. (#3424)

Co-authored-by: Ken <[email protected]>

Author: HalvorHaugan

.changeset/fair-countries-admire.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+InternalHeader.UserButton: Remove `title`-attribute on icon and improved types.

@navikt/core/react/src/guide-panel/Illustration.tsx

@@ -1,5 +1,6 @@
 import React, { SVGProps } from "react";
 import { useId } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.context";
 
 interface SVGRProps {
   title?: string;
@@ -15,6 +16,8 @@ export const DefaultIllustration: DefaultIllustrationType = ({
   titleId: _titleId,
   ...props
 }) => {
+  const translate = useI18n("GuidePanel");
+
   let titleId: string | undefined = useId();
   titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;
 
@@ -25,7 +28,7 @@ export const DefaultIllustration: DefaultIllustrationType = ({
       viewBox="0 0 56 85"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      aria-label="NAV veileder illustrasjon"
+      aria-label={translate("illustrationLabel")}
       focusable={false}
       role="img"
       aria-labelledby={titleId}

@navikt/core/react/src/help-text/HelpText.tsx

@@ -4,6 +4,7 @@ import { Popover, PopoverProps } from "../popover";
 import { UNSAFE_useAkselTheme } from "../provider";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useI18n } from "../util/i18n/i18n.context";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
@@ -12,7 +13,7 @@ export interface HelpTextProps
   children: React.ReactNode;
   /**
    * Adds a title-tooltip with the given text
-   * @default "hjelp"
+   * @default "Mer informasjon"
    */
   title?: string;
   /**
@@ -41,7 +42,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       children,
       placement,
       strategy = "absolute",
-      title = "hjelp",
+      title,
       onClick,
       wrapperClassName,
       ...rest
@@ -50,10 +51,11 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
-
     const [open, setOpen] = useState(false);
-
     const themeContext = UNSAFE_useAkselTheme(false);
+    const translate = useI18n("HelpText");
+
+    const titleWithFallback = title || translate("title");
 
     return (
       <div className={cl("navds-help-text", wrapperClassName)}>
@@ -65,8 +67,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           type="button"
           aria-expanded={open}
         >
-          <HelpTextIcon title={title} />
-          <HelpTextIcon filled title={title} />
+          <HelpTextIcon title={titleWithFallback} />
+          <HelpTextIcon filled title={titleWithFallback} />
         </button>
         <Popover
           onClose={() => setOpen(false)}

@navikt/core/react/src/internal-header/InternalHeaderButton.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
 export interface InternalHeaderButtonProps
-  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Application Button
    */

@navikt/core/react/src/internal-header/InternalHeaderUserButton.tsx

@@ -6,7 +6,7 @@ import { OverridableComponent } from "../util/types";
 import InternalHeaderButton from "./InternalHeaderButton";
 
 export interface InternalHeaderUserButtonProps
-  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * User name
    */
@@ -33,7 +33,7 @@ export const InternalHeaderUserButton: OverridableComponent<
       </BodyShort>
       {description && <Detail as="div">{description}</Detail>}
     </div>
-    <ChevronDownIcon title="vis meny" />
+    <ChevronDownIcon aria-hidden />
   </InternalHeaderButton>
 ));
 

@navikt/core/react/src/internal-header/header.stories.tsx

@@ -40,22 +40,22 @@ export const Default = {
             >
               <MenuGridIcon
                 style={{ fontSize: "1.5rem" }}
-                title="MenuGridIconer og oppslagsverk"
+                title="Systemer og oppslagsverk"
               />
             </InternalHeader.Button>
             <Dropdown.Menu strategy="fixed">
               <Dropdown.Menu.List>
                 <Dropdown.Menu.List.Item>
                   <span>A.Inntekt</span>
-                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                  <ExternalLinkIcon aria-hidden fontSize="0.875rem" />
                 </Dropdown.Menu.List.Item>
                 <Dropdown.Menu.List.Item>
                   <span>Aa-registeret</span>
-                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                  <ExternalLinkIcon aria-hidden fontSize="0.875rem" />
                 </Dropdown.Menu.List.Item>
                 <Dropdown.Menu.List.Item>
                   <span>Gosys</span>
-                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                  <ExternalLinkIcon aria-hidden fontSize="0.875rem" />
                 </Dropdown.Menu.List.Item>
               </Dropdown.Menu.List>
             </Dropdown.Menu>
@@ -86,7 +86,7 @@ export const Default = {
               }}
             >
               <BodyShort title="Ola Normann">KH</BodyShort>
-              <ChevronDownIcon />
+              <ChevronDownIcon title="Brukermeny" />
             </InternalHeader.Button>
             <Dropdown.Menu strategy="fixed">
               <div>
@@ -172,7 +172,7 @@ export const UserWithMenu = () => (
         }}
       >
         <BodyShort title="Ola Normann">KH</BodyShort>
-        <ChevronDownIcon />
+        <ChevronDownIcon title="Brukermeny" />
       </InternalHeader.Button>
       <Dropdown.Menu strategy="fixed">
         <div>
@@ -208,22 +208,22 @@ export const UserWithMenuGridIconMenu = () => (
       >
         <MenuGridIcon
           style={{ fontSize: "1.5rem" }}
-          title="MenuGridIconer og oppslagsverk"
+          title="Systemer og oppslagsverk"
         />
       </InternalHeader.Button>
       <Dropdown.Menu strategy="fixed">
         <Dropdown.Menu.List>
           <Dropdown.Menu.List.Item>
             <span>A.Inntekt</span>
-            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+            <ExternalLinkIcon aria-hidden fontSize="0.875rem" />
           </Dropdown.Menu.List.Item>
           <Dropdown.Menu.List.Item>
             <span>Aa-registeret</span>
-            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+            <ExternalLinkIcon aria-hidden fontSize="0.875rem" />
           </Dropdown.Menu.List.Item>
           <Dropdown.Menu.List.Item>
             <span>Gosys</span>
-            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+            <ExternalLinkIcon aria-hidden fontSize="0.875rem" />
           </Dropdown.Menu.List.Item>
         </Dropdown.Menu.List>
       </Dropdown.Menu>

@navikt/core/react/src/util/i18n/locales/en.ts

@@ -123,4 +123,10 @@ export default {
     maxSelected: "{selected} of max {limit} are selected.",
     clear: "Clear",
   },
+  GuidePanel: {
+    illustrationLabel: "Illustration of advisor",
+  },
+  HelpText: {
+    title: "More information",
+  },
 } satisfies Translations;

@navikt/core/react/src/util/i18n/locales/nb.ts

@@ -130,4 +130,10 @@ export default {
     maxSelected: "{selected} av maks {limit} er valgt.",
     clear: "Tøm",
   },
+  GuidePanel: {
+    illustrationLabel: "Illustrasjon av veileder",
+  },
+  HelpText: {
+    title: "Mer informasjon",
+  },
 } satisfies TranslationMap;

@navikt/core/react/src/util/i18n/locales/nn.ts

@@ -123,4 +123,10 @@ export default {
     maxSelected: "{selected} av maks {limit} er valt.",
     clear: "Tøm",
   },
+  GuidePanel: {
+    illustrationLabel: "Illustrasjon av rettleiar",
+  },
+  HelpText: {
+    title: "Meir informasjon",
+  },
 } satisfies Translations;