diff --git a/packages/react-components/react-toast/src/components/Toast/Toast.cy.tsx b/packages/react-components/react-toast/src/components/Toast/Toast.cy.tsx index 0e4f6ae282ba7..1f6c4622b5c1e 100644 --- a/packages/react-components/react-toast/src/components/Toast/Toast.cy.tsx +++ b/packages/react-components/react-toast/src/components/Toast/Toast.cy.tsx @@ -279,4 +279,199 @@ describe('Toast', () => { .eq(3) .should('have.text', 'unmounted'); }); + + it('should focus most recent toast with shortcut', () => { + const Example = () => { + const { dispatchToast } = useToastController(); + const makeToast = () => { + dispatchToast( + + This is a toast + , + { timeout: 500 }, + ); + dispatchToast( + + This is a toast + , + { timeout: 500, root: { id: 'most-recent' } }, + ); + }; + + return ( + <> + + e.ctrlKey && e.key === 'm' }} /> + + ); + }; + + mount(); + cy.get('#make') + .click() + .get('#most-recent') + .should('exist') + .get('body') + .type('{ctrl+m}') + .get('#most-recent') + .should('be.focused'); + }); + + it('should pause all toasts when one is focused', () => { + const Example = () => { + const { dispatchToast } = useToastController(); + const makeToast = () => { + dispatchToast( + + This is a toast + , + { timeout: 200 }, + ); + dispatchToast( + + This is a toast + , + { timeout: 200, root: { id: 'most-recent' } }, + ); + }; + + return ( + <> + + e.ctrlKey && e.key === 'm' }} /> + + ); + }; + + mount(); + cy.get('#make') + .click() + .get('#most-recent') + .should('exist') + .get('body') + .type('{ctrl+m}') + .get('#most-recent') + .should('be.focused') + .wait(500) + .get(`.${toastClassNames.root}`) + .should('have.length', 2); + }); + + it('should dismiss toast with escape and revert focus', () => { + const Example = () => { + const { dispatchToast } = useToastController(); + const makeToast = () => { + dispatchToast( + + This is a toast + , + { timeout: 200 }, + ); + }; + + return ( + <> + + e.ctrlKey && e.key === 'm' }} /> + + ); + }; + + mount(); + cy.get('#make') + .click() + .get(`.${toastClassNames.root}`) + .should('exist') + .get('body') + .type('{ctrl+m}') + .focused() + .type('{esc}') + .get(`.${toastClassNames.root}`) + .should('not.exist') + .get('#make') + .should('be.focused'); + }); + + it('should dismiss toast and revert focus with escape', () => { + const Example = () => { + const { dispatchToast } = useToastController(); + const makeToast = () => { + dispatchToast( + + This is a toast + , + { timeout: 200 }, + ); + }; + + return ( + <> + + e.ctrlKey && e.key === 'm' }} /> + + ); + }; + + mount(); + cy.get('#make') + .click() + .get(`.${toastClassNames.root}`) + .should('exist') + .get('body') + .type('{ctrl+m}') + .focused() + .type('{esc}') + .get(`.${toastClassNames.root}`) + .should('not.exist') + .get('#make') + .should('be.focused'); + }); + + it('should revert focus on tab out', () => { + const Example = () => { + const { dispatchToast } = useToastController(); + const makeToast = () => { + dispatchToast( + + This is a toast + , + { timeout: 200, root: { id: 'toast' } }, + ); + }; + + return ( + <> + + + + + + e.ctrlKey && e.key === 'm' }} /> + + ); + }; + + mount(); + cy.get('#make') + .click() + .get('#toast') + .should('exist') + .get('body') + .type('{ctrl+m}') + .get('#toast') + .should('be.focused') + .realPress(['Shift', 'Tab']); + + cy.get('#make').should('be.focused'); + }); }); diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts index a5dea231ec4f5..2c13f79ebbb27 100644 --- a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts @@ -74,7 +74,6 @@ export const useToastContainer_unstable = ( return; } const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null); - // TODO test this if (timerTimeout < 0) { setRunning(true); return; diff --git a/packages/react-components/react-toast/src/components/ToastTrigger/ToastTrigger.tsx b/packages/react-components/react-toast/src/components/ToastTrigger/ToastTrigger.tsx index 7dd94b4bd6550..3e32b2cc34601 100644 --- a/packages/react-components/react-toast/src/components/ToastTrigger/ToastTrigger.tsx +++ b/packages/react-components/react-toast/src/components/ToastTrigger/ToastTrigger.tsx @@ -4,7 +4,7 @@ import { renderToastTrigger_unstable } from './renderToastTrigger'; import type { ToastTriggerProps } from './ToastTrigger.types'; /** - * ToastTrigger component - TODO: add more docs + * ToastTrigger component */ export const ToastTrigger: React.FC = props => { const state = useToastTrigger_unstable(props);