@transferwise/components 46.72.2 → 46.74.0

package/src/popover/Popover.story.tsx

@@ -1,54 +1,66 @@
 import { action } from '@storybook/addon-actions';
-import { select } from '@storybook/addon-knobs';
 
 import Button from '../button';
 import { Position } from '../common';
 
 import Popover from './Popover';
+import { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Popover>;
+
+const Content = () => (
+  <>
+    You’ll get this rate as long as we receive your 10 EUR within the next 51 hours.
+    <div>
+      <a href="test1">Test 1</a>
+    </div>
+    <div>
+      <a href="test1">Test 2</a>
+    </div>
+    <div>
+      <a href="test1">Test 3</a>
+    </div>
+  </>
+);
 
 export default {
   component: Popover,
   title: 'Dialogs/Popover',
-};
+  tags: ['autodocs'],
+  args: {
+    preferredPlacement: Position.BOTTOM,
+    title: 'Guaranteed rate',
+    content: <Content />,
+    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+  },
+  argTypes: {
+    preferredPlacement: {
+      control: 'select',
+      options: [Position.TOP, Position.RIGHT, Position.BOTTOM, Position.LEFT],
+    },
+  },
+} satisfies Meta<typeof Popover>;
 
-export const Basic = () => {
-  const preferredPlacement = select(
-    'preferredPlacement',
-    [
-      Position.TOP,
-      Position.RIGHT,
-      Position.BOTTOM,
-      Position.LEFT,
-      Position.LEFT_TOP,
-      Position.RIGHT_TOP,
-      Position.BOTTOM_RIGHT,
-      Position.BOTTOM_LEFT,
-    ],
-    Position.TOP,
-  );
+export const Basic: Story = {};
 
-  return (
-    <div className="text-xs-center">
-      <Popover
-        content={
-          <>
-            You’ll get this rate as long as we receive your 10 EUR within the next 51 hours.
-            <div>
-              <a href="test1">Test 1</a>
-            </div>
-            <div>
-              <a href="test1">Test 2</a>
-            </div>
-            <div>
-              <a href="test1">Test 3</a>
-            </div>
-          </>
-        }
-        preferredPlacement={preferredPlacement}
-        title="Guaranteed rate"
-      >
-        <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>
-      </Popover>
-    </div>
-  );
-};
+/**
+ * While it might be easier for sighted users to associate the content
+ * of a `Popover` with the surrounding and trigger content, it's likely
+ * much harder for people relying on the assistive-tech.
+ *
+ * For that reason, the `Popover` must always have an accessible name —
+ * if `title` prop is set, the component will use it automatically,
+ * otherwise `aria-label` must be provided instead.
+ *
+ * **NB:** If both props are provided, then screen readers will prioritise
+ * `aria-label` over `title`.
+ */
+export const WithoutVisibleTitle: Story = {
+  args: {
+    preferredPlacement: Position.BOTTOM,
+    title: undefined,
+    'aria-label': 'Guaranteed rate',
+    content: <Content />,
+    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+  },
+} satisfies Meta<typeof Popover>;

package/src/popover/Popover.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
+import { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';
 
 import { Position, Typography } from '../common';
 import ResponsivePanel from '../common/responsivePanel';
@@ -23,11 +23,13 @@ export type PopoverPreferredPlacement =
 
 export interface PopoverProps {
   children?: React.ReactNode;
-  className?: string;
-  content: React.ReactNode;
+  title?: React.ReactNode;
+  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */
+  'aria-label'?: string;
   preferredPlacement?: PopoverPreferredPlacement;
+  content: React.ReactNode;
   onClose?: () => void;
-  title?: React.ReactNode;
+  className?: string;
 }
 
 function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
@@ -50,7 +52,10 @@ export default function Popover({
   preferredPlacement = Position.RIGHT,
   title,
   onClose,
+  'aria-label': ariaLabel,
 }: PopoverProps) {
+  const titleId = useId();
+
   const resolvedPlacement = resolvePlacement(preferredPlacement);
   useEffect(() => {
     if (resolvedPlacement !== preferredPlacement) {
@@ -81,6 +86,8 @@ export default function Popover({
           : children}
       </span>
       <ResponsivePanel
+        aria-label={ariaLabel}
+        aria-labelledby={title && !ariaLabel ? titleId : undefined}
         open={open}
         anchorRef={anchorReference}
         position={resolvedPlacement}
@@ -90,7 +97,7 @@ export default function Popover({
       >
         <div className="np-popover__content np-text-default-body">
           {title && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
+            <Title type={Typography.TITLE_BODY} id={titleId} className="m-b-1">
               {title}
             </Title>
           )}

package/src/popover/__snapshots__/Popover.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Popover on desktop renders when is open 1`] = `
 <div
+  aria-labelledby=":r0:"
   class="np-panel np-panel--open np-popover__container"
   data-popper-escaped="true"
   data-popper-placement="right"
@@ -17,6 +18,7 @@ exports[`Popover on desktop renders when is open 1`] = `
     >
       <h4
         class="np-text-title-body m-b-1"
+        id=":r0:"
       >
         title
       </h4>