diff --git a/.changeset/angry-rabbits-shout.md b/.changeset/angry-rabbits-shout.md new file mode 100644 index 0000000000..d20a928bf5 --- /dev/null +++ b/.changeset/angry-rabbits-shout.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-web": patch +--- + +**Suggestion:** fix to ensure input has role `combobox` (not `textbox`) on first render. diff --git a/.changeset/khaki-bobcats-love.md b/.changeset/khaki-bobcats-love.md new file mode 100644 index 0000000000..f366334a54 --- /dev/null +++ b/.changeset/khaki-bobcats-love.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-css": patch +--- + +**Suggestion:** now uses attribute `data-activedescendant` under the hood to add focus styling on option elements diff --git a/.changeset/yellow-bars-wait.md b/.changeset/yellow-bars-wait.md new file mode 100644 index 0000000000..bf5669ceca --- /dev/null +++ b/.changeset/yellow-bars-wait.md @@ -0,0 +1,7 @@ +--- +"@digdir/designsystemet-web": patch +--- + +update dependencies +- @u-elements/u-combobox to 2.0.3 +- @u-elements/u-datalist to 2.0.1 diff --git a/packages/css/src/suggestion.css b/packages/css/src/suggestion.css index 55d7b412c5..5607110a26 100644 --- a/packages/css/src/suggestion.css +++ b/packages/css/src/suggestion.css @@ -158,7 +158,9 @@ } } - @composes ds-focus--inset from './base.css'; + &[data-activedescendant] { + @composes ds-focus--visible--inset from './base.css'; + } @media (hover: hover) and (pointer: fine) { &:not([data-empty]):hover { diff --git a/packages/react/src/components/error-summary/error-summary.stories.tsx b/packages/react/src/components/error-summary/error-summary.stories.tsx index 50ede6a0b2..89460d51a5 100644 --- a/packages/react/src/components/error-summary/error-summary.stories.tsx +++ b/packages/react/src/components/error-summary/error-summary.stories.tsx @@ -1,3 +1,4 @@ +import type { DSErrorSummaryElement } from '@digdir/designsystemet-web'; import type { Meta, StoryFn } from '@storybook/react-vite'; import { useEffect, useRef, useState } from 'react'; import { expect, userEvent, within } from 'storybook/test'; @@ -85,7 +86,7 @@ WithForm.decorators = [ export const ShowHideReact: Story = () => { const [show, setShow] = useState(false); - const summaryRef = useRef(null); + const summaryRef = useRef(null); useEffect(() => { if (show) { summaryRef.current?.focus(); diff --git a/packages/react/src/components/error-summary/error-summary.tsx b/packages/react/src/components/error-summary/error-summary.tsx index 5be25749b3..d535f9366e 100644 --- a/packages/react/src/components/error-summary/error-summary.tsx +++ b/packages/react/src/components/error-summary/error-summary.tsx @@ -1,3 +1,4 @@ +import type { DSErrorSummaryElement } from '@digdir/designsystemet-web'; import { Slot } from '@radix-ui/react-slot'; import cl from 'clsx/lite'; import type { HTMLAttributes, ReactNode } from 'react'; @@ -9,7 +10,7 @@ export type ErrorSummaryProps = { * @deprecated This is not supported anymore, as the element needs to be `ds-error-summary` */ asChild?: ReactNode; -} & Omit & DefaultProps, 'data-color'>; +} & Omit & DefaultProps, 'data-color'>; /** * ErrorSummary component, used to display a list of errors. @@ -27,19 +28,20 @@ export type ErrorSummaryProps = { * * */ -export const ErrorSummary = forwardRef( - function ErrorSummary({ asChild, className, ...rest }, ref) { - const Component = asChild ? Slot : 'ds-error-summary'; +export const ErrorSummary = forwardRef< + DSErrorSummaryElement, + ErrorSummaryProps +>(function ErrorSummary({ asChild, className, ...rest }, ref) { + const Component = asChild ? Slot : 'ds-error-summary'; - return ( - - ); - }, -); + return ( + + ); +}); diff --git a/packages/web/package.json b/packages/web/package.json index a1586dce9b..5bffc89424 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -101,8 +101,8 @@ }, "dependencies": { "@floating-ui/dom": "^1.7.6", - "@u-elements/u-combobox": "^1.0.7", - "@u-elements/u-datalist": "^1.1.0", + "@u-elements/u-combobox": "^2.0.3", + "@u-elements/u-datalist": "^2.0.1", "@u-elements/u-details": "^1.0.0", "@u-elements/u-tabs": "^1.0.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b106d3d472..a7c2011082 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -680,11 +680,11 @@ importers: specifier: ^1.7.6 version: 1.7.6 '@u-elements/u-combobox': - specifier: ^1.0.7 - version: 1.0.7 + specifier: ^2.0.3 + version: 2.0.3 '@u-elements/u-datalist': - specifier: ^1.1.0 - version: 1.1.0 + specifier: ^2.0.1 + version: 2.0.1 '@u-elements/u-details': specifier: ^1.0.0 version: 1.0.0 @@ -2591,11 +2591,11 @@ packages: '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} - '@u-elements/u-combobox@1.0.7': - resolution: {integrity: sha512-rueG+Wof9ycmbjIW2omS4bLite5BkH87SWfkBrvSjrR1GWn4wgpjnUQ1lORDRalYcPYlgFWy2uGFEqqKPx3Yqw==} + '@u-elements/u-combobox@2.0.3': + resolution: {integrity: sha512-2B1LI/uKftddCM0bCWqxFLm940oXWYvnXlCupO1COuazjCOnmgM5vNTSKwKi81uAK/PW+pf++qsBgrALrjCKiw==} - '@u-elements/u-datalist@1.1.0': - resolution: {integrity: sha512-t8H3OddziXmq0YBuXodVWnvRi56WW4sfbJEIO1fx4i39sZ0s/0xjHBsoAsTZkb9mXJEtpgrsH8IkDYP0ZSgSXQ==} + '@u-elements/u-datalist@2.0.1': + resolution: {integrity: sha512-xfbSiTZApvbqCt6W3LUtoyAArxOYq17Em9mYyjStiq5/XpshTVsN1JkqSqo+OjVOwDieggyAQsRwgloZgtHB7Q==} '@u-elements/u-details@1.0.0': resolution: {integrity: sha512-CA0w0VTH/vWWouFWEw7XIws3RUCBm2dh7ity+sbDXgpc6yz5NkoMpeDTdB/DHpI+/YInULz0XLOTrw8b7KX3Qg==} @@ -6537,8 +6537,8 @@ snapshots: '@digdir/designsystemet-web@file:packages/web': dependencies: '@floating-ui/dom': 1.7.6 - '@u-elements/u-combobox': 1.0.7 - '@u-elements/u-datalist': 1.1.0 + '@u-elements/u-combobox': 2.0.3 + '@u-elements/u-datalist': 2.0.1 '@u-elements/u-details': 1.0.0 '@u-elements/u-tabs': 1.0.1 @@ -7842,9 +7842,9 @@ snapshots: '@types/unist@3.0.3': {} - '@u-elements/u-combobox@1.0.7': {} + '@u-elements/u-combobox@2.0.3': {} - '@u-elements/u-datalist@1.1.0': {} + '@u-elements/u-datalist@2.0.1': {} '@u-elements/u-details@1.0.0': {}