Banner Component using Alert vs CardStatus

[cintnguyen]

During discovery work of ensuring this MFE passed accessibility (a11y) standards and using Paragon components whenever possible, found that frontend-app-learner-dashboard is using Alert to do what is essentially the function of CardStatus. Using Alert has accessibility concerns since it includes aria-live="assertive", which would only allow the last message to be read aloud. This presents a problem since the user potentially will have multiple course card banner messages with the need to read all aloud.

Is there something about this usage of Alert that is being used because CardStatus isn’t satisfying another need here? How can we/how should we expand the functionality of CardStatus to cover use cases like this?

export const Banner = ({
  children, variant, icon, className,
}) => (
  <Alert variant={variant} className={className} icon={icon}>
    {children}
  </Alert>
);

https://github.com/cintnguyen/frontend-app-learner-dashboard/blob/e95e633459a0d0bf00f92f14d79d8f79e657bfb0/src/components/Banner.jsx#L7-L13

(Enroll in a course and you’ll be shown an example of CourseCardBanner that uses Alert below the course listed with the course info displayed under ‘My Courses’. Image attached below to show that CourseCardBanner component is "Grade required to pass the course: 60%")

[cintnguyen]

Brought this up in Paragon Working Group 10/18 meeting and we discussed that there may be other paradigms to mitigate concerns around screen reader messaging. Possibly rendering Alert at the top of the page that describes any important CardStatus message. In this way we won't need to modify CardStatus to account for Alert's use case but using them in conjunction.