Combobox: add translations and adjust buttons

.changeset/cool-items-shave.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox: Add title to buttons and hide them from screen readers

@navikt/core/react/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
@@ -22,6 +23,7 @@ const AddNewOption = () => {
   } = useFilteredOptionsContext();
   const { isMultiSelect, selectedOptions, toggleOption } =
     useSelectedOptionsContext();
+  const translate = useI18n("Combobox");
   return (
     <li
       tabIndex={-1}
@@ -51,7 +53,7 @@ const AddNewOption = () => {
     >
       <PlusIcon aria-hidden />
       <BodyShort size={size}>
-        Legg til{" "}
+        {translate("addOption")}{" "}
         <Label as="span" size={size}>
           &#8220;{searchTerm}&#8221;
         </Label>

@navikt/core/react/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,18 +1,20 @@
 import React from "react";
 import { Loader } from "../../../loader";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const LoadingMessage = () => {
   const {
     inputProps: { id },
   } = useInputContext();
+  const translate = useI18n("Combobox");
   return (
     <div
       className="navds-combobox__list-item--loading"
       id={filteredOptionsUtil.getIsLoadingId(id)}
     >
-      <Loader title="Søker..." />
+      <Loader title={translate("searching")} />
     </div>
   );
 };

@navikt/core/react/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
@@ -8,6 +9,10 @@ const MaxSelectedMessage = () => {
     inputProps: { id },
   } = useInputContext();
   const { maxSelected, selectedOptions } = useSelectedOptionsContext();
+  const translate = useI18n(
+    "Combobox",
+    maxSelected?.message ? { maxSelected: maxSelected.message } : undefined,
+  );
 
   if (!maxSelected) {
     return null;
@@ -18,8 +23,10 @@ const MaxSelectedMessage = () => {
       className="navds-combobox__list-item--max-selected"
       id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
     >
-      {maxSelected.message ??
-        `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+      {translate("maxSelected", {
+        selected: selectedOptions.length,
+        limit: maxSelected.limit,
+      })}
     </div>
   );
 };

@navikt/core/react/src/form/combobox/Input/InputController.tsx

@@ -3,6 +3,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { useMergeRefs } from "../../../util/hooks";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -11,7 +12,6 @@ import Input from "./Input";
 import { useInputContext } from "./Input.context";
 import ToggleListButton from "./ToggleListButton";
 
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 export const InputController = forwardRef<
   HTMLInputElement,
   Omit<
@@ -53,7 +53,13 @@ export const InputController = forwardRef<
 
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
+  const translate = useI18n(
+    "Combobox",
+    clearButtonLabel ? { clear: clearButtonLabel } : undefined,
+  );
+
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       className={cl("navds-combobox__wrapper-inner navds-text-field__input", {
         "navds-combobox__wrapper-inner--virtually-unfocused":
@@ -88,10 +94,9 @@ export const InputController = forwardRef<
             onClick={clearInput}
             className="navds-combobox__button-clear"
             tabIndex={-1}
+            aria-hidden
+            title={translate("clear")}
           >
-            <span className="navds-sr-only">
-              {clearButtonLabel ? clearButtonLabel : "Tøm"}
-            </span>
             <XMarkIcon aria-hidden />
           </button>
         )}

@navikt/core/react/src/form/combobox/Input/ToggleListButton.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input.context";
 
@@ -13,8 +14,14 @@ export const ToggleListButton = forwardRef<
 >(({ toggleListButtonLabel }, ref) => {
   const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
   const { focusInput } = useInputContext();
+  const translate = useI18n(
+    "Combobox",
+    toggleListButtonLabel ? { options: toggleListButtonLabel } : undefined,
+  );
+
   return (
     <button
+      ref={ref}
       type="button"
       onPointerUp={() => {
         toggleIsListOpen();
@@ -24,11 +31,9 @@ export const ToggleListButton = forwardRef<
       className="navds-combobox__button-toggle-list"
       aria-expanded={isListOpen}
       tabIndex={-1}
-      ref={ref}
+      aria-hidden
+      title={translate("options")}
     >
-      <span className="navds-sr-only">
-        {toggleListButtonLabel ?? "Alternativer"}
-      </span>
       {isListOpen ? (
         <ChevronUpIcon aria-hidden />
       ) : (

@navikt/core/react/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -14,12 +14,6 @@ const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput, readOnly, inputProps } = useInputContext();
 
-  const onClick = (e) => {
-    e.stopPropagation();
-    removeSelectedOption(option);
-    focusInput();
-  };
-
   if (!isMultiSelect) {
     return (
       <div className="navds-combobox__selected-options--no-bg">
@@ -28,12 +22,24 @@ const Option = ({ option }: { option: ComboboxOption }) => {
     );
   }
 
-  return readOnly || inputProps.disabled ? (
-    <Chips.Toggle variant="neutral" checkmark={false} as="div">
+  if (readOnly || inputProps.disabled) {
+    return (
+      <Chips.Toggle variant="neutral" checkmark={false} as="div">
+        {option.label}
+      </Chips.Toggle>
+    );
+  }
+
+  return (
+    <Chips.Removable
+      onClick={(event) => {
+        event.stopPropagation();
+        removeSelectedOption(option);
+        focusInput();
+      }}
+    >
       {option.label}
-    </Chips.Toggle>
-  ) : (
-    <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>
+    </Chips.Removable>
   );
 };
 

@navikt/core/react/src/form/combobox/__tests__/combobox.test.tsx

@@ -3,6 +3,7 @@ import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { describe, expect, test, vi } from "vitest";
+import nb from "../../../util/i18n/locales/nb";
 import { ComboboxProps, UNSAFE_Combobox } from "../index";
 
 const options = [
@@ -73,7 +74,9 @@ describe("Render combobox", () => {
     test("Should show loading icon when loading (used for async search)", async () => {
       render(<App options={[]} isListOpen isLoading />);
 
-      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+      expect(
+        await screen.findByText(nb.Combobox.searching),
+      ).toBeInTheDocument();
     });
 
     test("Should not select previous focused element when closes", async () => {

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

@@ -38,13 +38,14 @@ const options = [
   "grapefruit",
 ];
 
-export const Default: StoryFn<ComboboxProps & { maxSelected?: number }> = ({
-  maxSelected,
-  ...rest
-}) => (
+export const Default: StoryFn<
+  ComboboxProps & { maxSelected?: number; maxSelectedMessage?: string }
+> = ({ maxSelected, maxSelectedMessage, ...rest }) => (
   <UNSAFE_Combobox
     {...rest}
-    maxSelected={maxSelected && { limit: maxSelected }}
+    maxSelected={
+      maxSelected && { limit: maxSelected, message: maxSelectedMessage }
+    }
     id="combobox"
   />
 );
@@ -76,11 +77,20 @@ Default.argTypes = {
   maxSelected: {
     control: { type: "number" },
   },
+  maxSelectedMessage: {
+    control: { type: "text" },
+  },
   size: {
     options: ["medium", "small"],
     defaultValue: "medium",
     control: { type: "radio" },
   },
+  clearButtonLabel: {
+    control: { type: "text" },
+  },
+  toggleListButtonLabel: {
+    control: { type: "text" },
+  },
 };
 
 export const WithPlaceholder: StoryFunction = () => {

@navikt/core/react/src/form/combobox/types.ts

@@ -132,7 +132,8 @@ export interface ComboboxProps
      */
     limit: number;
     /**
-     * Override the message to display when the limit for maximum selected options has been reached
+     * Message to display when the limit for maximum selected options has been reached
+     * @default "{selected} av maks {limit} er valgt."
      */
     message?: string;
   };

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

@@ -97,4 +97,11 @@ export default {
       reset: "Reset zoom",
     },
   },
+  Combobox: {
+    addOption: "Add",
+    searching: "Searching…",
+    maxSelected: "{selected} of max {limit} are selected.",
+    clear: "Clear",
+    options: "Options",
+  },
 } satisfies Translations;

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

@@ -102,4 +102,13 @@ export default {
       reset: "Tilbakestill tidsperspektiv",
     },
   },
+  Combobox: {
+    /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`. */
+    addOption: "Legg til",
+    /** Loader title */
+    searching: "Søker…",
+    maxSelected: "{selected} av maks {limit} er valgt.",
+    clear: "Tøm",
+    options: "Alternativer",
+  },
 } satisfies TranslationMap;

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

@@ -97,4 +97,11 @@ export default {
       reset: "Tilbakestill tidsperspektiv",
     },
   },
+  Combobox: {
+    addOption: "Legg til",
+    searching: "Søker…",
+    maxSelected: "{selected} av maks {limit} er valt.",
+    clear: "Tøm",
+    options: "Alternativ",
+  },
 } satisfies Translations;