Conversation
Several UI components relied on color alone to convey state, which is
inaccessible to colorblind users and screen reader users. This commit
addresses accessibility gaps across the component tree.
- AiStatusCard: add progressbar role with aria-valuenow/min/max to
budget bar; show "Critical" / "Low" text labels alongside color
- TaskRow: add aria-label to all state toggle buttons (pending,
in_progress, review, done, dismissed), drag handle, edit, and
comment buttons
- ProjectItem: add sr-only text for the red notification dot so
screen readers announce "Has tasks awaiting review"
- AgentControls: add aria-label to the icon-only pause/resume button
- SchedulingSection: wrap time inputs in <label> elements with
sr-only text ("Start time" / "End time")
- BudgetSection: add aria-label to the budget ceiling slider
- ProjectList: convert project list from <div> to <ul>/<li> with
aria-label for proper list semantics
SUSTN-Task: 631e29c5-0740-4528-b5ab-b8093031a9e4
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUSTN Auto-PR
Several UI components rely on color alone to convey state, which is inaccessible to colorblind users:
AiStatusCard.tsx: Budget bar uses red/amber/default colors with no text or icon alternativeTaskRow.tsx: Task state badges use color-coded backgrounds without sufficient contrast or alternative indicatorsProjectItem.tsx: Red dot notification indicator is purely visualAdditionally, many interactive elements lack ARIA labels:
AgentControls.tsx: Icon-only buttons havetitlebut noaria-labelTaskRow.tsx: State toggle button lacksaria-labelSchedulingSection.tsx: Time inputs lack associated<label>elementsBudgetSection.tsx: Slider has noaria-labelexplaining the value rangeProjectList.tsx: Uses<div>instead of<ul>/<li>for list semanticsFix:
aria-labelto all icon-only buttons<ul>,<li>,<label>) for lists and formsaria-valuenow,aria-valuemin,aria-valuemaxto budget progress barsBranch:
sustn/accessibility-color-only-status-indicators-and-missing-aria