-
Notifications
You must be signed in to change notification settings - Fork 13.5k
feat: banner component for medium priority information #27668
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.
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
Comments
Thanks for the report. Toasts in Ionic are intended to be subtle notifications that should not interrupt the user which is why we use Some toasts in other UI libraries will allow you to use roles such as Can you clarify the pattern you are trying to implement and why |
Thanks, @liamdebeasi Snack bars, in my experience, have drawbacks that are far too many for them to be accessible to the minimum AA level of WCAG and generally have been poorly designed. So I am, as I build out an app with Ionic, trying to find a more accessible solution. Snack bars, for the most part can:
I would prefer to use an Toasts and snack bars are very tricky when it comes to accessible experiences and getting them to conform to WCAG standards, but I’d like to have that option, if possible, to do so. |
Thanks for the additional information. My main concern about this feature request is it goes against how toasts are supposed to be used. I've seen toasts frequently used for time-sensitive or important notifications which lead to many of the issues you described in #27668 (comment). We can add the ability to use Have you considered implementing a banner instead? That UI component has a higher priority and avoids many of the issues you noted. Here's a code snippet of how it could work: https://codepen.io/liamdebeasi/pen/MWzexaN A few benefits of banners:
edit: Here's the Material Design banner: https://m2.material.io/components/banners |
Thanks, @liamdebeasi for those resources. It does look like Toasts can be very tricky so it is more than likely going to take a lot of work if those roles were implemented, I do know that much. Much appreciated, talking this through. |
Glad to hear that works for your app. I'm going to re-open this because I think it would be good to have this component built-in to Ionic. We have |
@liamdebeasi Great, thanks. If there is any way I can help with this I'd be more than happy to contribute. |
Uh oh!
There was an error while loading. Please reload this page.
Prerequisites
Describe the Feature Request
Being able to add a
role="log"
(when notifications need to be read in order, e.g., stacking toast notifications on each other orrole="alert"
to toast notifications that are being logged to make them more accessible.Describe the Use Case
This will ensure that when a toast is displayed on screen, its contents will be communicated correctly to assistive technologies, such as screen readers when using the correct
role
with the toast notification.Describe Preferred Solution
I know
role="status"
is et on the inner.toast-content
element but since there is an option should the developer want the toasts to be logged, I think it would work better as an option.aria-live="polite"
(another feature request later) if someone needed to usearia-live="assertive"
(which clears the speech queue of previous updates. "off" should be the default anyway).Describe Alternatives
No response
Related Code
Additional Information
A toast to an accessible toast...
Defining ‘Toast’ Messages
Designing Toast Messages for Accessibility
It is also acceptable to use
role="alert"
in a toast notification to stop the current reading and notify the user of an alert. Focus should not move there. It had a drawback in that it could make a user feel stranded because of the interruption and consequential stoppage of reading by the screen reader, however.If the alert has interactive controls, then it should be a modal and not a toast notification. Toast notifications should never have interactive controls in them.
The text was updated successfully, but these errors were encountered: