react-spectrum
react-spectrum copied to clipboard
adobe
Toast focus improvements
Focus issues found during testing
This behaves slightly better than v2 Toasts. When removing Toasts it behaves the same as far as not focusing another toast, but staying within the container. With the last one we now restore focus to the last focused item outside the ToastContainer.
This isn't doing what the display one Toast at a time did, which is focus Toasts loading from the queue or focusing the container when the last toast is removed.
If we like this, I'll remove all the focus code from the container and focusing an actual Toast not the close button.
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [x] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [x] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
Add and remove several Toasts and see where focus goes.
In Toast storybook example at: https://reactspectrum.blob.core.windows.net/reactspectrum/b849db005f61cfeed14f599878c5085e14d1d154/storybook/index.html?path=/story/toast--with-action&args=shouldCloseOnAction:true&providerSwitcher-express=false
With a screen reader running:
Toast live region announcement should include,
- The icon alt text for severity level, "Success", "Error" or "Info"
- The toast message text
- The button label for the action button, if an action button is present.
Toast live region announcement should not include the close button.
The Toast landmark region should labelled "Notification," by default and should politely announce the number of notifications when focus moves into the landmark region, “# notifications.”
Focus management use cases:
- User triggers a toast through some action
- Toast is announced, see above. Focus remains on the trigger that caused Toast.
- User does landmark navigation (F6) to switch to Toasts landmark region.
- Focus moves to Toast landmark and announces itself, see above.
- Only possible if focus hasn't previous visited any of the open Toasts.
- User keyboard navigates from application to Toasts.
- If there are more than one Toast we navigate to the bottom Toast with is the most recent Toast.
- Toast is focused and announces, see above.
- User can tab navigate to the toast button(s) before navigating to another Toast or to leave region.
- User is on Toast landmark region or a Toast and switches landmark regions.
- Focus moves to the next region or returns to the last focused item prior to navigating to a Toast or Toast landmark region.
- User deletes a Toast
- If it is the last Toast in the Toast Container, focus returns to last focused item outside of Toast landmark region.
- If there are additional Toasts remaining in the Toast Container:
- Focus the Toast above it.
- If Toast being removed is the topmost toast, then move focus to the Toast below it.
- When a Toast is removed on action, focus should be restored to an adjacent Toast as well if visible Toasts remain: (see: https://github.com/adobe/react-spectrum/pull/6011#discussion_r1536923620)
Toast are organized within an ordered list within the landmark region, we should not need to announce the number of notifications except when moving focus to the landmark region. Depending on the screen reader, the new count for the number of items in the list might be announced automatically when the list count changes.
Focus can move to the Notifications landmark region:
- by using F6 or Shift+F6 to cycle into the Notifications landmark,
- by tabbing into the Notifications landmark following the DOM order,
- or by using the mouse to focus a Toast.
Regardless of how focus entered the Notifications landmark, F6 should eventually cycle back to the last focused element in the main landmark, and focus management when a Toast is removed should behave the same regardless of the manner in which the Toast received focus. For example, if I were to remove a Toast using a mouse click on the close button, focus should move to the adjacent Toast, rather than be lost to the document.body.
🧢 Your Project:
RSP
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Michael, to confirm the testing strategy, can we write up a specification for what we're trying to implement? Below are the cases I'm aware of. Can you please update and/or fill in the blanks? This is to help with testing.
Toast announcement
- Message
- Button label
- Severity (matches icon)
Toast landmark region
- “# notifications”
Use cases
- User triggers a toast through some action
- Toast is announced, see above. Focus remains on the trigger that caused Toast.
- User does landmark navigation (F6) to switch to Toasts landmark region.
- Focus moves to Toast landmark and announces itself, see above.
- Only possible if there are open Toasts.
- User keyboard navigates from application to Toasts.
- If there are more than one Toast we navigate to the bottom Toast with is the most recent Toast.
- Toast is focused and announces, see above.
- User can tab navigate to the toast button(s) before navigating to another Toast or to leave region.
- User is on Toast landmark region or a Toast and switches landmark regions.
- Focus moves to the next region or returns to the last focused item prior to navigating to a Toast or Toast landmark region.
- User deletes a Toast
- If it is the last Toast in the Toast Container, focus returns to last focused item outside of Toast landmark region.
- If there are additional Toasts remaining in the Toast Container:
- Focus the Toast above it.
- If Toast being removed is the topmost toast, then move focus to the Toast below it.
Questions
- Do we announce the number of notifications anytime besides when they navigate to the Toast landmark region?
- Is the only way to navigate to the Toast landmark region via F6 key event? I know there are ways to focus the Toast landmark region, like clicking on the text of a Toast can cause focus to move the landmark region, but that isn’t a keyboard navigation experience and should be considered an outlier.
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
## API Changes
unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }
@react-aria/toast
ToastAria
ToastAria {
closeButtonProps: AriaButtonProps
+ contentProps: DOMAttributes
descriptionProps: DOMAttributes
titleProps: DOMAttributes
toastProps: DOMAttributes
}
it changed:
- useToast
