fix(combobox): only set aria-controls when open, fix reference id to list

package.json

@@ -18,7 +18,7 @@
     "build:react": "yarn workspace @digdir/designsystemet-react build",
     "build:tokens": "yarn workspace @digdir/designsystemet-cli build",
     "build:css": "yarn workspace @digdir/designsystemet-css build",
-    "build:storybook": "storybook build -o ./dist/storybook --config-dir ./apps/storybook",
+    "build:storybook": "storybook build -o ./apps/storybook/dist --config-dir ./apps/storybook",
     "build:storefront": "yarn workspace storefront building",
     "build:devsite": "yarn workspace dev building",
     "start:storefront": "yarn workspace storefront start",

packages/react/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.63.1](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-10-08)
+
+### Bug Fixes
+
+- **combobox:** only set `aria-controls` when open ([4d205ad](https://github.com/digdir/designsystemet/commit/4d205adb8d99a06f8add29b146f10b9b5fd51c33))
+
 # [0.63.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-06-07)
 
 ### Bug Fixes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "0.63.0",
+  "version": "0.63.1",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",

packages/react/src/components/form/Combobox/Combobox.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useId, forwardRef } from 'react';
+import { useState, useRef, useEffect, forwardRef } from 'react';
 import type * as React from 'react';
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import cl from 'clsx/lite';
@@ -159,8 +159,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     const portalRef = useRef<HTMLDivElement>(null);
     const listRef = useRef<Array<HTMLElement | null>>([]);
 
-    const listId = useId();
-
     const [inputValue, setInputValue] = useState<string>(rest.inputValue || '');
 
     const {
@@ -385,7 +383,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           <ComboboxInput
             {...omit(['inputValue'], rest)}
             hideClearButton={hideClearButton}
-            listId={listId}
+            listId={context.floatingId}
             error={error}
             hideChips={hideChips}
             handleKeyDown={handleKeyDown}
@@ -407,7 +405,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
               visuallyHiddenDismiss
             >
               <Box
-                id={listId}
                 shadow='md'
                 borderRadius='md'
                 borderColor='default'

packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx

@@ -125,7 +125,7 @@ export const ComboboxInput = ({
           aria-autocomplete='list'
           role='combobox'
           aria-expanded={open}
-          aria-controls={listId}
+          aria-controls={open ? listId : undefined}
           autoComplete='off'
           size={htmlSize}
           value={inputValue}