Skip to content

Commit 6beef9c

Browse files
committed
review updates
1 parent d18d362 commit 6beef9c

File tree

3 files changed

+6
-31
lines changed

3 files changed

+6
-31
lines changed

packages/@react-aria/toast/docs/useToast.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ keywords: [toast, notifications, alert, aria]
4545

4646
## Features
4747

48-
There is no built in way to toast notifications in HTML. <TypeLink links={docs.links} type={docs.exports.useToastRegion} /> and <TypeLink links={docs.links} type={docs.exports.useToast} /> help achieve accessible toasts that can be styled as needed.
48+
There is no built in way to display toast notifications in HTML. <TypeLink links={docs.links} type={docs.exports.useToastRegion} /> and <TypeLink links={docs.links} type={docs.exports.useToast} /> help achieve accessible toasts that can be styled as needed.
4949

5050
* **Accessible** – Toasts follow the [ARIA alertdialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
5151
* **Focus management** – When a toast unmounts, focus is moved to the next toast if any. Otherwise, focus is restored to where it was before navigating to the toast region.

packages/react-aria-components/docs/Toast.mdx

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -174,11 +174,10 @@ Then, you can trigger a toast from anywhere using the exported `queue`.
174174

175175
## Features
176176

177-
There is no built in way to toast notifications in HTML. `<ToastRegion>` and `<Toast>` help achieve accessible toasts that can be styled as needed.
177+
There is no built in way to display toast notifications in HTML. `<ToastRegion>` and `<Toast>` help achieve accessible toasts that can be styled as needed.
178178

179179
* **Accessible** – Toasts follow the [ARIA alertdialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
180180
* **Focus management** – When a toast unmounts, focus is moved to the next toast if any. Otherwise, focus is restored to where it was before navigating to the toast region.
181-
* **Priority queue** – Toasts are displayed according to a priority queue, displaying a configurable number of toasts at a time.
182181

183182
## Anatomy
184183

@@ -204,30 +203,6 @@ import {ToastRegion, Toast, ToastContent, Text, Button} from 'react-aria-compone
204203
</ToastRegion>
205204
```
206205

207-
## Toast priorities
208-
209-
Toasts are displayed according to a priority queue. The priority of a toast can be set using the `priority` option, passed to the `queue.add` function. Priorities are arbitrary numbers defined by your implementation.
210-
211-
```tsx example
212-
<div style={{display: 'flex', gap: 8, flexWrap: 'wrap'}}>
213-
{/*- begin highlight -*/}
214-
<Button onPress={() => queue.add({title: 'Toasting…'}, {priority: 1})}>
215-
{/*- end highlight -*/}
216-
Show low priority toast
217-
</Button>
218-
{/*- begin highlight -*/}
219-
<Button onPress={() => queue.add({title: 'Toast is done!'}, {priority: 2})}>
220-
{/*- end highlight -*/}
221-
Show medium priority toast
222-
</Button>
223-
{/*- begin highlight -*/}
224-
<Button onPress={() => queue.add({title: 'Toast is burned!'}, {priority: 3})}>
225-
{/*- end highlight -*/}
226-
Show high priority toast
227-
</Button>
228-
</div>
229-
```
230-
231206
## Auto-dismiss
232207

233208
Toasts support a `timeout` option to automatically hide them after a certain amount of time. For accessibility, toasts should have a minimum timeout of 5 seconds to give users enough time to read them. If a toast includes action buttons or other interactive elements it should not auto dismiss. In addition, timers will automatically pause when the user focuses or hovers over a toast.

packages/react-aria-components/src/Toast.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ export interface ToastRegionRenderProps<T> {
2727
/** A list of all currently visible toasts. */
2828
visibleToasts: QueuedToast<T>[],
2929
/**
30-
* Whether the thumb is currently focused.
30+
* Whether the toast region is currently focused.
3131
* @selector [data-focused]
3232
*/
3333
isFocused: boolean,
3434
/**
35-
* Whether the thumb is keyboard focused.
35+
* Whether the toast region is keyboard focused.
3636
* @selector [data-focus-visible]
3737
*/
3838
isFocusVisible: boolean
@@ -104,12 +104,12 @@ export interface ToastRenderProps<T> {
104104
*/
105105
toast: QueuedToast<T>,
106106
/**
107-
* Whether the thumb is currently focused.
107+
* Whether the toast is currently focused.
108108
* @selector [data-focused]
109109
*/
110110
isFocused: boolean,
111111
/**
112-
* Whether the thumb is keyboard focused.
112+
* Whether the toast is keyboard focused.
113113
* @selector [data-focus-visible]
114114
*/
115115
isFocusVisible: boolean

0 commit comments

Comments
 (0)