fix(Tooltip): aria-describedby and aria-labelledby

.changeset/neat-penguins-search.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Tooltip**: Tooltip is now automatically `aria-describedby` or `aria-labelledby` based on the content of the trigger component.
+- This can be overridden with the new `type`-prop that accepts `decribedby` or `labelledby`.

packages/react/src/components/tooltip/tooltip.mdx

@@ -47,6 +47,13 @@ Vurder om `tooltip` skal plasseres over, under eller ved siden av elementet.
 
 <Canvas of={TooltipStories.Placement} />
 
+### `aria-describedby` og `aria-labelledby`
+
+Dersom du ikke har tekst i trigger-elementer, setter vi automatisk `aria-labelledby`. Dersom det har tekst, setter vi `aria-describedby`. 
+Du kan overstyre dette ved å bruke `type`-prop'en.
+
+<Canvas of={TooltipStories.Aria} />
+
 ## Retningslinjer
 `Tooltip` gir kort tilleggsinformasjon uten å forstyrre hovedinnholdet. `Tooltip` er ikke ment for informasjon som er essensiell for å fullføre oppgaven. Viktig innhold bør i stedet plasseres som brødtekst eller hjelpetekst på selve siden.
 
@@ -87,4 +94,4 @@ I Safari fungerer ikke fade-in animasjon.
 
 ## CSS Variabler
 
-<CssVariables css={css} />
+<CssVariables css={css} />

packages/react/src/components/tooltip/tooltip.stories.tsx

@@ -34,7 +34,7 @@ export default {
 
 export const Preview: StoryFn<typeof Tooltip> = (args) => (
   <Tooltip {...args}>
-    <Button icon aria-label='Kopier'>
+    <Button icon>
       <FilesIcon aria-hidden />
     </Button>
   </Tooltip>
@@ -73,9 +73,36 @@ export const Placement: Story = {
     content: 'Kopier',
     placement: 'bottom',
     children: (
-      <Button icon aria-label='Kopier'>
+      <Button icon>
         <FilesIcon aria-hidden />
       </Button>
     ),
   },
 };
+
+export const Aria: StoryFn<typeof Tooltip> = () => {
+  return (
+    <>
+      <Tooltip content='Eg er aria-describedby'>
+        <Button>Eg er aria-describedby</Button>
+      </Tooltip>
+      <Tooltip content='Eg er aria-labelledby'>
+        <Button icon>
+          <FilesIcon aria-hidden />
+        </Button>
+      </Tooltip>
+    </>
+  );
+};
+
+Aria.decorators = [
+  (Story) => (
+    <div
+      style={{ display: 'flex', gap: 'var(--ds-size-2)', alignItems: 'center' }}
+    >
+      <Story />
+    </div>
+  ),
+];
+
+Aria.play = async () => {};

packages/react/src/components/tooltip/tooltip.test.tsx

@@ -7,7 +7,7 @@ import { Tooltip } from './tooltip';
 
 const render = async (props: Partial<TooltipProps> = {}) => {
   const allProps: TooltipProps = {
-    children: <button>My button</button>,
+    children: <button data-testid='button'>My button</button>,
     content: 'Tooltip text',
     ...props,
   };
@@ -32,7 +32,7 @@ const render = async (props: Partial<TooltipProps> = {}) => {
 describe('Tooltip', () => {
   it('should render child', async () => {
     await render();
-    const tooltipTrigger = screen.getByRole('button', { name: 'My button' });
+    const tooltipTrigger = screen.getByTestId('button');
 
     expect(tooltipTrigger).toBeInTheDocument();
   });
@@ -54,7 +54,7 @@ describe('Tooltip', () => {
     const { user } = await render();
 
     expect(screen.queryByText('Tooltip text')).not.toBeVisible();
-    await user.click(screen.getByRole('button', { name: 'My button' }));
+    await user.click(screen.getByTestId('button'));
     const tooltip = await screen.findByText('Tooltip text');
     expect(tooltip).toBeInTheDocument();
     expect(screen.queryByRole('tooltip')).toBeVisible();
@@ -82,4 +82,24 @@ describe('Tooltip', () => {
 
     expect(tooltipTrigger.tagName).toBe('SPAN');
   });
+
+  it('should be aria-describedby when there is text in the trigger', async () => {
+    await render();
+    const trigger = screen.getByRole('button');
+    expect(trigger.getAttribute('aria-describedby')).toBeDefined();
+  });
+
+  it('should be aria-labelledby when there is no text in the trigger', async () => {
+    await render({ children: <button /> });
+    const trigger = screen.getByRole('button');
+    expect(trigger.getAttribute('aria-labelledby')).toBeDefined();
+  });
+
+  it('should be able to override aria type', async () => {
+    await render({
+      type: 'labelledby',
+    });
+    const trigger = screen.getByRole('button');
+    expect(trigger.getAttribute('aria-labelledby')).toBeDefined();
+  });
 });

packages/react/src/components/tooltip/tooltip.tsx

@@ -52,6 +52,11 @@ export type TooltipProps = MergeRight<
      * This overrides the internal state of the tooltip.
      */
     open?: boolean;
+    /**
+     * Override if `aria-describedby` or `aria-labelledby` is used.
+     * By default, if the trigger element has no inner text, `aria-labelledby` is used.
+     */
+    type?: 'describedby' | 'labelledby';
   }
 >;
 
@@ -78,6 +83,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       autoPlacement = true,
       open,
       className,
+      type,
       ...rest
     },
     ref,
@@ -91,6 +97,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     const mergedRefs = useMergeRefs([tooltipRef, ref]);
 
     const controlledOpen = open ?? internalOpen;
+    const tooltipId = id ?? randomTooltipId;
 
     const setOpen = () => {
       setInternalOpen(true);
@@ -181,13 +188,14 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     }
 
     const popoverProps = {
-      [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']:
-        id ?? randomTooltipId,
+      [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: tooltipId,
       [version.startsWith('19')
         ? 'popoverTargetAction'
         : 'popovertargetaction']: 'show',
     };
 
+    const autoType = `aria-${triggerRef.current?.innerText.trim() ? 'describedby' : 'labelledby'}`;
+
     return (
       <>
         <ChildContainer
@@ -197,6 +205,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           onMouseLeave={setClose}
           onFocus={setOpen}
           onBlur={setClose}
+          {...{ [type ? 'aria-' + type : autoType]: tooltipId }}
         >
           {children}
         </ChildContainer>
@@ -206,7 +215,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           ref={mergedRefs}
           role='tooltip'
           className={cl('ds-tooltip', className)}
-          id={id ?? randomTooltipId}
+          id={tooltipId}
           popover='manual'
           {...rest}
         >