diff --git a/.changeset/wet-scissors-tickle.md b/.changeset/wet-scissors-tickle.md
new file mode 100644
index 0000000000..6280a26b3e
--- /dev/null
+++ b/.changeset/wet-scissors-tickle.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Spinner: `aria-label` required instead of `title` prop
diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
index faa5e397a4..dcba9afb69 100644
--- a/apps/theme/components/Previews/Components/Components.tsx
+++ b/apps/theme/components/Previews/Components/Components.tsx
@@ -415,8 +415,8 @@ export const Components = () => {
-
-
+
+
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index a3cff1f39d..b2d62be482 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -78,7 +78,7 @@ export const Button = forwardRef(
{...rest}
>
{loading === true ? (
-
+
) : (
loading // Allow custom loading spinner
)}
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index f43a41c8ff..8a2e65febb 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -459,7 +459,7 @@ export const ComboboxComponent = forwardRef(
{loading ? (
-
+
{loadingLabel}
) : (
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.stories.tsx b/packages/react/src/components/loaders/Spinner/Spinner.stories.tsx
index 3120b13468..661a9ac222 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.stories.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.stories.tsx
@@ -20,25 +20,25 @@ export default {
export const Preview: Story = (args) => ;
Preview.args = {
- title: 'Henter kaffi',
+ 'aria-label': 'Henter kaffi',
size: 'md',
color: 'neutral',
};
export const Variants: Story = () => (
<>
-
-
+
+
>
);
export const Sizes: Story = () => (
<>
-
-
-
-
-
-
+
+
+
+
+
+
>
);
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.test.tsx b/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
index 2c21afe4d3..fca520860c 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
@@ -8,7 +8,7 @@ beforeAll(() => {
describe('spinner', (): void => {
it('should render with title "loading', (): void => {
- render();
- expect(screen.getByTitle('Loading')).toBeInTheDocument();
+ render();
+ expect(screen.getByLabelText('Loading')).toBeInTheDocument();
});
});
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
index f2d8a7fe41..e1fe639657 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -1,11 +1,12 @@
+import { useMergeRefs } from '@floating-ui/react';
import cl from 'clsx/lite';
-import type { ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
import { useSynchronizedAnimation } from '../../../utilities';
export type SpinnerProps = {
- /** Spinner title */
- title: string;
+ /** Accessibile label */
+ 'aria-label'?: string;
/**
* Spinner size
*/
@@ -15,16 +16,23 @@ export type SpinnerProps = {
* @default neutral
*/
color?: 'neutral' | 'accent';
-} & ComponentPropsWithoutRef<'svg'>;
+} & ComponentPropsWithoutRef<'svg'> &
+ (
+ | { 'aria-label': string; 'aria-hidden'?: never }
+ | { 'aria-label'?: string; 'aria-hidden': true | 'true' } // Make aria-label optional when aria-hidden is true
+ );
/** Spinner component used for indicating busy or indeterminate loading */
-export const Spinner = ({
- title,
- color = 'neutral',
- size,
- className,
- ...rest
-}: SpinnerProps): JSX.Element => {
+export const Spinner = forwardRef(function Spinner(
+ {
+ 'aria-label': ariaLabel,
+ color = 'neutral',
+ size,
+ className,
+ ...rest
+ }: SpinnerProps,
+ ref,
+) {
const svgRef = useSynchronizedAnimation(
'ds-spinner-rotate-animation',
);
@@ -33,16 +41,19 @@ export const Spinner = ({
'ds-spinner-stroke-animation',
);
+ const mergedRefs = useMergeRefs([svgRef, ref]);
+
return (
);
-};
-
-Spinner.displayName = 'Spinner';
+});
diff --git a/packages/react/src/components/loaders/Spinner/index.ts b/packages/react/src/components/loaders/Spinner/index.ts
index 09f04753e7..b259397be4 100644
--- a/packages/react/src/components/loaders/Spinner/index.ts
+++ b/packages/react/src/components/loaders/Spinner/index.ts
@@ -1,2 +1 @@
-export type { SpinnerProps } from './Spinner';
-export { Spinner } from './Spinner';
+export * from './Spinner';
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 9fe9f8d666..ed0394aaf6 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -693,10 +693,10 @@ export const Sizes: StoryFn = () => {
List Item 2
List Item 3
-
-
-
-
+
+
+
+
Open Modal
diff --git a/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx b/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
index 9901e95746..546ef5f50f 100644
--- a/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
+++ b/plugins/figma-plugin/src/ui/components/Toast/Toast.tsx
@@ -34,7 +34,7 @@ export const Toast = () => {
)}
{!success && (
<>
-
+
Oppdaterer variabler...
>
)}