diff --git a/.changeset/short-walls-judge.md b/.changeset/short-walls-judge.md new file mode 100644 index 0000000000..5cb3b0ade0 --- /dev/null +++ b/.changeset/short-walls-judge.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-react": patch +--- + +feat(Combobox): :sparkles: Label now supports other elements diff --git a/packages/react/src/components/form/Combobox/Combobox.test.tsx b/packages/react/src/components/form/Combobox/Combobox.test.tsx index 38fb0ea620..34b4e7522d 100644 --- a/packages/react/src/components/form/Combobox/Combobox.test.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.test.tsx @@ -347,4 +347,20 @@ describe('Combobox', () => { expect(combobox).toHaveAttribute('aria-busy', 'true'); }); + + it('should have correct label when used as ReactNode', async () => { + await render({ + label: ( + <> + + CSS + + (Cascading Style Sheets) + + ), + }); + const combobox = screen.getByRole('combobox'); + + expect(combobox).toHaveAccessibleName('CSS (Cascading Style Sheets)'); + }); }); diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx index 93ff7dac36..1167f7f082 100644 --- a/packages/react/src/components/form/Combobox/Combobox.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.tsx @@ -1,5 +1,5 @@ import { useState, useRef, useEffect, useId, forwardRef } from 'react'; -import type * as React from 'react'; +import type { ReactNode, InputHTMLAttributes } from 'react'; import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react'; import cl from 'clsx/lite'; import { useVirtualizer } from '@tanstack/react-virtual'; @@ -25,9 +25,11 @@ import { ComboboxContext } from './ComboboxContext'; export type ComboboxProps = { /** - * Label for the combobox + * Label for the combobox. + * + * Passed label will be encapsulated by a `label` element. */ - label?: string; + label?: ReactNode; /** * Visually hides `label` and `description` (still available for screen readers) * @default false @@ -114,7 +116,7 @@ export type ComboboxProps = { chipSrLabel?: (option: Option) => string; } & PortalProps & FormFieldProps & - Omit, 'size'>; + Omit, 'size'>; export const ComboboxComponent = forwardRef( (