Toast: Should be focused when is opened and close on ESC

[SoyDiego]

Describe the bug

To follow accessibility rules, the toast component should receive focus when opened and allow the user to access the text by pressing the Tab key so they can read the content. Additionally, it should be closable by pressing the ESC key.

Environment

Reproducer

No response

Angular version

18

PrimeNG version

Last version

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[rosenthalj]

Changing the current behavior could have negative impact to the "usability" of toast if the focus is automatically lost when a toast notification is generated at the start/middle/end of a user action.

• When the toast sticky option is set to false the toast window automatically disappears.
• When the toast sticky option is set to true the toast window can still be closed using keyboard navigation (using the keyboard without a mouse may not be convenient).

If a change to the current toast functionality is actually required, I would recommend adding a new (non default) option that enables the new proposed change.

[SoyDiego]

For accessibility the implementation is necessary because disabled people using keyboards cannot read/scan close the popup.

[rosenthalj]

For accessibility the implementation is necessary because disabled people using keyboards cannot read/scan close the popup.

I agree that my comments only addressed the closing issue which I claim the current PrimeNG toast functionality is accessible. I don't know enough about accessibility to address the read/scan issue. "Stealing" focus from a user
to display a notification while the user is possibly in the middle of a multiple step action just seems like a bad idea. Is automatically changing focus to a notification window a standard implementation found in widely used web applications?

[rosenthalj]

I performed a quick search on toast and accessability.

I found: https://sheribyrnehaber.medium.com/designing-toast-messages-for-accessibility-fb610ac364be
Which referenced: https://www.w3.org/TR/WCAG21/#status-messages
Which had the following paragraph:

[SoyDiego]

I performed a quick search on toast and accessability.

I found: https://sheribyrnehaber.medium.com/designing-toast-messages-for-accessibility-fb610ac364be Which referenced: https://www.w3.org/TR/WCAG21/#status-messages Which had the following paragraph:

Thanks, but I'm sure PrimeNG team will follow Material Design guide to solve this problem. They are explaining everything about the focus action.

[rosenthalj]

@SoyDiego
I am worried that PR #16078 may make "toast" unusable for notifications that are triggered while a user enters text.

I have created the following reproducer: https://stackblitz.com/edit/uqdfhq. The reproducer implements the use-case where notifications are automatically displayed while a user types information in an input text. The notifications must not interrupt the user's typing.

If PR #16078 breaks the reproducer, I would recommend adding a flag to Toast's API that enables/disables auto focus of toast.

Please see the video below, which shows the reproducer working properly in PrimeNG v17.8.5.

toastAndInputText.mov

[SoyDiego]

@SoyDiego I am worried that PR #16078 may make "toast" unusable for notifications that are triggered while a user enters text.

I have created the following reproducer: https://stackblitz.com/edit/uqdfhq. The reproducer implements the use-case where notifications are automatically displayed while a user types information in an input text. The notifications must not interrupt the user's typing.

If PR #16078 breaks the reproducer, I would recommend adding a flag to Toast's API that enables/disables auto focus of toast.

Please see the video below, which shows the reproducer working properly in PrimeNG v17.8.5.
toastAndInputText.mov

Thanks for check it. I'm not deciding this things. I was talking with @cetincakiroglu about this implementation in my PR.
In my opinion it's wrong show texts when you are typing in a input. You will show a label under your input.
I will wait until PrimeNG Team decide something about this issue or my PR.

Thanks again :)

[rosenthalj]

Thanks for check it. I'm not deciding this things. I was talking with @cetincakiroglu about this implementation in my PR. In my opinion it's wrong show texts when you are typing in a input. You will show a label under your input. I will wait until PrimeNG Team decide something about this issue or my PR.

Thanks again :)

@SoyDiego
Adding a flag to enable/disable automatic focus would provide the most flexibility. With this flag, no-one will be forcing their opinion on (or restricting ) the implementer using the primeNG toast functionality. If an automatic focus flag is added, the PrimeNG team can decide on the default behavior.

[SoyDiego]

Thanks for check it. I'm not deciding this things. I was talking with @cetincakiroglu about this implementation in my PR. In my opinion it's wrong show texts when you are typing in a input. You will show a label under your input. I will wait until PrimeNG Team decide something about this issue or my PR.
Thanks again :)

@SoyDiego Adding a flag to enable/disable automatic focus would provide the most flexibility. With this flag, no-one will be forcing their opinion on (or restricting ) the implementer using the primeNG toast functionality. If an automatic focus flag is added, the PrimeNG team can decide on the default behavior.

I will try to add it tomorrow. Thanks!

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,