From 753e1bfff74e21fd1b4811aa21eae84b441620dc Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Mon, 30 Sep 2024 09:52:44 +0300 Subject: [PATCH] fix close button aria labels --- src/index.tsx | 1 + src/types.ts | 1 + test/src/app/page.tsx | 12 ++++++++++++ test/tests/basic.spec.ts | 7 +++++++ website/src/pages/toast.mdx | 37 ++++++++++++++++++----------------- website/src/pages/toaster.mdx | 10 ++++++++++ 6 files changed, 50 insertions(+), 18 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 894c0ae..9bcf43f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -714,6 +714,7 @@ const Toaster = (props: ToasterProps) => { classNames={toastOptions?.classNames} cancelButtonStyle={toastOptions?.cancelButtonStyle} actionButtonStyle={toastOptions?.actionButtonStyle} + closeButtonAriaLabel={toastOptions?.closeButtonAriaLabel} removeToast={removeToast} toasts={toasts.filter((t) => t.position == toast.position)} heights={heights.filter((h) => h.position == toast.position)} diff --git a/src/types.ts b/src/types.ts index df629be..48cf185 100644 --- a/src/types.ts +++ b/src/types.ts @@ -102,6 +102,7 @@ interface ToastOptions { duration?: number; unstyled?: boolean; classNames?: ToastClassnames; + closeButtonAriaLabel?: string; } type CnFunction = (...classes: Array) => string; diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx index a33bb5a..69cc091 100644 --- a/test/src/app/page.tsx +++ b/test/src/app/page.tsx @@ -10,6 +10,7 @@ export default function Home({ searchParams }: any) { const [showDismiss, setShowDismiss] = React.useState(false); const [theme, setTheme] = React.useState(searchParams.theme || 'light'); const [isFinally, setIsFinally] = React.useState(false); + const [showAriaLabels, setShowAriaLabels] = React.useState(false); return ( <> @@ -176,6 +177,15 @@ export default function Home({ searchParams }: any) { > Render close button + {showAutoClose ?
: null} {showDismiss ?
: null} { await page.getByTestId('react-node-description').click(); await expect(page.getByText('This is my custom ReactNode description')).toHaveCount(1); }); + + test('aria labels are custom', async ({ page }) => { + await page.getByRole('button', { name: 'With custom ARIA labels' }).click(); + await expect(page.getByText('Toast with custom ARIA labels')).toHaveCount(1); + await expect(page.getByLabel('Notices')).toHaveCount(1); + await expect(page.getByLabel('Yeet the notice', { exact: true })).toHaveCount(1); + }); }); diff --git a/website/src/pages/toast.mdx b/website/src/pages/toast.mdx index 9c391cf..cfa2d28 100644 --- a/website/src/pages/toast.mdx +++ b/website/src/pages/toast.mdx @@ -206,21 +206,22 @@ toast.dismiss(); ## API Reference -| Property | Description | Default | -| :----------------- | :----------------------------------------------------------------------------------------------------: | -------------: | -| description | Toast's description, renders underneath the title. | `-` | -| closeButton | Adds a close button. | `false` | -| invert | Dark toast in light mode and vice versa. | `false` | -| important | Control the sensitivity of the toast for screen readers | `false` | -| duration | Time in milliseconds that should elapse before automatically closing the toast. | `4000` | -| position | Position of the toast. | `bottom-right` | -| dismissible | If `false`, it'll prevent the user from dismissing the toast. | `true` | -| icon | Icon displayed in front of toast's text, aligned vertically. | `-` | -| action | Renders a primary button, clicking it will close the toast. | `-` | -| cancel | Renders a secondary button, clicking it will close the toast. | `-` | -| id | Custom id for the toast. | `-` | -| onDismiss | The function gets called when either the close button is clicked, or the toast is swiped. | `-` | -| onAutoClose | Function that gets called when the toast disappears automatically after it's timeout (duration` prop). | `-` | -| unstyled | Removes the default styling, which allows for easier customization. | `false` | -| actionButtonStyle | Styles for the action button | `{}` | -| cancelButtonStyle | Styles for the cancel button | `{}` | +| Property | Description | Default | +| :-------------------- | :----------------------------------------------------------------------------------------------------: | -------------: | +| description | Toast's description, renders underneath the title. | `-` | +| closeButton | Adds a close button. | `false` | +| invert | Dark toast in light mode and vice versa. | `false` | +| important | Control the sensitivity of the toast for screen readers | `false` | +| duration | Time in milliseconds that should elapse before automatically closing the toast. | `4000` | +| position | Position of the toast. | `bottom-right` | +| dismissible | If `false`, it'll prevent the user from dismissing the toast. | `true` | +| icon | Icon displayed in front of toast's text, aligned vertically. | `-` | +| action | Renders a primary button, clicking it will close the toast. | `-` | +| cancel | Renders a secondary button, clicking it will close the toast. | `-` | +| id | Custom id for the toast. | `-` | +| onDismiss | The function gets called when either the close button is clicked, or the toast is swiped. | `-` | +| onAutoClose | Function that gets called when the toast disappears automatically after it's timeout (duration` prop). | `-` | +| unstyled | Removes the default styling, which allows for easier customization. | `false` | +| actionButtonStyle | Styles for the action button. | `{}` | +| cancelButtonStyle | Styles for the cancel button. | `{}` | +| closeButtonAriaLabel | Custom ARIA label for the close button. | `{}` | diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx index ad301d8..e5897d2 100644 --- a/website/src/pages/toaster.mdx +++ b/website/src/pages/toaster.mdx @@ -47,6 +47,15 @@ Changes the directionality of the toast's text. ``` +### Custom ARIA label + +You can customize the default ARIA label for the notification container and the toast close button. + +```jsx +// example in Finnish + +``` + ## API Reference | Property | Description | Default | @@ -66,4 +75,5 @@ Changes the directionality of the toast's text. | loadingIcon | Changes the default loading icon | `-` | | pauseWhenPageIsHidden | Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked. | `false` | | icons | Changes the default icons | `-` | +| containerAriaLabel | Custom ARIA label for the toast container. | `Notifications` | | cn | Custom function for constructing/merging classes. | `classes.filter(Boolean).join(' ')` |