Skip to content

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

Open
3 tasks done
colabottles opened this issue Jun 18, 2023 · 6 comments
Open
3 tasks done

feat: banner component for medium priority information #27668

colabottles opened this issue Jun 18, 2023 · 6 comments
Labels
package: core @ionic/core package type: feature request a new feature, enhancement, or improvement

Comments

@colabottles
Copy link

colabottles commented Jun 18, 2023

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 or role="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.

    • Same with aria-live="polite" (another feature request later) if someone needed to use aria-live="assertive" (which clears the speech queue of previous updates. "off" should be the default anyway).

Describe Alternatives

No response

Related Code

<ion-toast
  ...
  role="status | log | alert | off"
  ...
>

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.

@ionitron-bot ionitron-bot bot added the triage label Jun 18, 2023
@liamdebeasi liamdebeasi self-assigned this Jun 20, 2023
@liamdebeasi
Copy link
Contributor

Thanks for the report. Toasts in Ionic are intended to be subtle notifications that should not interrupt the user which is why we use role="status". If you need to use a more assertive presentation then we recommend using an ion-alert. The Toast Accessibility section has more information on this.

Some toasts in other UI libraries will allow you to use roles such as alert. However, Ionic follows the Material Design guidelines for toasts (also called snackbars) so we do not provide that functionality.

Can you clarify the pattern you are trying to implement and why ion-toast needs to be used?

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Jun 20, 2023
@liamdebeasi liamdebeasi removed their assignment Jun 20, 2023
@ionitron-bot ionitron-bot bot removed the triage label Jun 20, 2023
@colabottles
Copy link
Author

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:

  • Change state erratically
  • Disappear too quickly
  • Can obscure other items and are hard to spot
  • and can be inconsistent with where they are located

I would prefer to use an ion-toast at the top of the screen for consistency. If I am logging notifications (which my app may do) and if I have an alert (which it will), I would like to have those options to do so.

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.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Jun 20, 2023
@liamdebeasi
Copy link
Contributor

liamdebeasi commented Jun 20, 2023

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 role="alert" on ion-toast, but that does not resolve the other issues that you noted.

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:

  1. They are persistent.
  2. They appear inline with the content, so they do not obscure anything.
  3. They can appear in a consistent location (like at the top of the screen).

edit: Here's the Material Design banner: https://m2.material.io/components/banners

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Jun 20, 2023
@ionitron-bot ionitron-bot bot removed the triage label Jun 20, 2023
@colabottles
Copy link
Author

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:

1. They are persistent.

2. They appear inline with the content, so they do not obscure anything.

3. They can appear in a consistent location (like at the top of the screen).

edit: Here's the Material Design banner: https://m2.material.io/components/banners

Thanks, @liamdebeasi for those resources. It does look like banner is the way to go in my case. I took a look this morning and it is the solution that works for me.

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.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Jun 21, 2023
@liamdebeasi
Copy link
Contributor

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 ion-toast which is low priority and ion-alert which is high priority and disruptive, but we don't have anything for medium priority.

@liamdebeasi liamdebeasi reopened this Jun 21, 2023
@liamdebeasi liamdebeasi changed the title feat: Add role="log" or role="alert" to ion-toast when toast notifications appear feat: banner component for medium priority information Jun 21, 2023
@liamdebeasi liamdebeasi added type: feature request a new feature, enhancement, or improvement package: core @ionic/core package labels Jun 21, 2023
@ionitron-bot ionitron-bot bot removed the triage label Jun 21, 2023
@colabottles
Copy link
Author

@liamdebeasi Great, thanks. If there is any way I can help with this I'd be more than happy to contribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package type: feature request a new feature, enhancement, or improvement
Projects
None yet
Development

No branches or pull requests

2 participants