openedx / openedx/frontend-app-learner-dashboard

Banner Component using Alert vs CardStatus

Open
#222 1 comment 0 reactions 1 assignee View on GitHub

@cintnguyen is already working on this.

Since Oct 19, 2023.

a11y
Dominant language
JavaScript
Stars
14
Forks
208
Avg merge
59m
Merged PRs (30d)
2

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.