Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix close button aria labels #490

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix close button aria labels #490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
1 change: 1 addition & 0 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ interface ToastOptions {
duration?: number;
unstyled?: boolean;
classNames?: ToastClassnames;
closeButtonAriaLabel?: string;
}

type CnFunction = (...classes: Array<string | undefined>) => string;
Expand Down
12 changes: 12 additions & 0 deletions test/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -176,16 +177,27 @@ export default function Home({ searchParams }: any) {
>
Render close button
</button>
<button
className="button"
onClick={() => {
setShowAriaLabels(true);
toast('Toast with custom ARIA labels', { closeButton: true, onAutoClose: () => setShowAriaLabels(false) });
}}
>
With custom ARIA labels
</button>
{showAutoClose ? <div data-testid="auto-close-el" /> : null}
{showDismiss ? <div data-testid="dismiss-el" /> : null}
<Toaster
position={searchParams.position || 'bottom-right'}
toastOptions={{
actionButtonStyle: { backgroundColor: 'rgb(219, 239, 255)' },
cancelButtonStyle: { backgroundColor: 'rgb(254, 226, 226)' },
closeButtonAriaLabel: showAriaLabels ? 'Yeet the notice' : undefined,
}}
theme={theme}
dir={searchParams.dir || 'auto'}
containerAriaLabel={showAriaLabels ? 'Notices' : undefined}
icons={{
close:
searchParams.customCloseIcon === '' ? (
Expand Down
7 changes: 7 additions & 0 deletions test/tests/basic.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,4 +201,11 @@ test.describe('Basic functionality', () => {
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);
});
});
37 changes: 19 additions & 18 deletions website/src/pages/toast.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. | `{}` |
10 changes: 10 additions & 0 deletions website/src/pages/toaster.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,15 @@ Changes the directionality of the toast's text.
<Toaster dir="rtl" />
```

### Custom ARIA label

You can customize the default ARIA label for the notification container and the toast close button.

```jsx
// example in Finnish
<Toaster containerAriaLabel="Ilmoitukset" toastOptions={{closeButtonAriaLabel: 'Sulje'}} />
```

## API Reference

| Property | Description | Default |
Expand All @@ -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(' ')` |