openedx / openedx/frontend-app-learner-dashboard
Banner Component using Alert vs CardStatus
@cintnguyen is already working on this.
Since Oct 19, 2023.
- 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>
);
(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%")
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.