fkhadra / fkhadra/react-toastify

enhance progressbar accessibility with ARIA attributes

Open
#1,259 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.4k
Forks
741
PR merge metrics
No merged PRs in 30d

Description

The Progressbar component in src/components/ProgressBar.tsx currently doesn’t expose key accessibility attributes. so to make it more inclusive and compliant with accessibility standards, we can add aria-valuenow, aria-valuemax, and aria-valuemin to the progress bar element. These attributes ensure screen readers and other assistive technologies can correctly interpret its state.

expected behavior - The Progressbar should provide these ARIA attributes so assistive technologies can accurately convey its progress state to users.

This also resolves the existing TODO comment in the Progressbar source file and contributes to improving the overall accessibility of the library.

Contributor guide

Open the contributing guide

Research direction

Start in src/components/ProgressBar.tsx and inspect the Progressbar element and its existing TODO comment. Add the three requested ARIA attributes using the component's progress state, then verify that assistive technologies can read the current, minimum, and maximum values.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.