Skip to content
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

Banner Component using Alert vs CardStatus #222

Open
cintnguyen opened this issue Oct 18, 2023 · 1 comment
Open

Banner Component using Alert vs CardStatus #222

cintnguyen opened this issue Oct 18, 2023 · 1 comment
Assignees
Labels
a11y Relates to platform accessibility

Comments

@cintnguyen
Copy link
Contributor

cintnguyen commented Oct 18, 2023

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%")

Screenshot 2023-10-18 at 10 41 59 AM

@cintnguyen cintnguyen self-assigned this Oct 19, 2023
@cintnguyen cintnguyen changed the title Banner Component Banner Component using Alert vs CardStatus Oct 20, 2023
@cintnguyen
Copy link
Contributor Author

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.

@deborahgu deborahgu added the a11y Relates to platform accessibility label Jul 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Relates to platform accessibility
Projects
Status: Help Wanted
Development

No branches or pull requests

2 participants