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.

Sign up for GitHub

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

Jump to bottom

Update link colors to pass accessibility test #1122

Closed
1 task
bruceplai opened this issue Jan 16, 2022 · 3 comments · Fixed by #1138
Closed
1 task

Update link colors to pass accessibility test #1122

bruceplai opened this issue Jan 16, 2022 · 3 comments · Fixed by #1138
Assignees
@bruceplai
Labels
feature: design system Design systems, Style Guides, libraries related to, etc. role: front end size: 1pt Can be done in 6 hours or less
Milestone
7 - MVP Website L...

Comments

@bruceplai
Copy link
Member

Overview

Currently contrast for links is insufficient to pass accessibility scans. Colors should be updated to fix that.

Action Items

  • Update link colors to pass accessibility tests
@bruceplai bruceplai added role: front end size: 1pt Can be done in 6 hours or less labels Jan 16, 2022
@bruceplai bruceplai added this to the 7 - MVP Website Launch milestone Jan 16, 2022
@bruceplai bruceplai self-assigned this Jan 16, 2022
@bruceplai
Copy link
Member Author

bruceplai commented Jan 16, 2022 •
edited
Loading

@chalimar can we use the same default link color as the button background update (#0A7A9E) ? Also different states of links use different colors, but different states of buttons use opacity. Should we switch links to use opacity as well, or come up with a new set of colors for different states? By states, I mean default, active, hover, visited. Thanks

https://www.w3schools.com/css/css_link.asp

EDIT: Or perhaps just updating the default color is enough to pass the accessibility tests.

bruceplai added a commit that referenced this issue Jan 27, 2022
@bruceplai
Update default link colors for contrast (#1122)
1574b07 
* Update link colors in theme-mui

* Update common Link component

* Clean up links in various places
@bruceplai
Copy link
Member Author

@chalimar I had to use a darker shade of blue to pass the accessibility contrast tests. This new color will apply to most of the links and buttons (#0A75AD)

bruceplai added a commit that referenced this issue Jan 31, 2022
@bruceplai
Update default link colors for contrast (#1122)
6cd669e 
* Update link colors in theme-mui

* Update common Link component

* Clean up links in various places
bruceplai added a commit that referenced this issue Jan 31, 2022
@bruceplai
Update default link colors for contrast (#1122)
131fd72 
* Refactor code to make use of common Link component

* Update theme to force default link colors
bruceplai added a commit that referenced this issue Jan 31, 2022
@bruceplai
Set link styling specific to Orgs page (#1122)
523cf8a
bruceplai added a commit that referenced this issue Jan 31, 2022
@bruceplai
Clean up unused style in theme-mui (#1122)
7245ef5
@bruceplai bruceplai mentioned this issue Jan 31, 2022
Merged
bruceplai added a commit that referenced this issue Feb 1, 2022
@bruceplai
Update mediumBlue color code (#1122)
f7a6424
@kevindphan kevindphan mentioned this issue Feb 1, 2022
Closed
4 tasks
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Update ContributorThumbnail and Affiliated styling with spectrum (#1122)
8ad9490
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Fix link destination in Tag Generator (#1122)
7d2ac97
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Update default link colors for contrast (#1122)
1fcc433 
* Update link colors in theme-mui

* Update common Link component

* Clean up links in various places
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Update default link colors for contrast (#1122)
fa182f5 
* Refactor code to make use of common Link component

* Update theme to force default link colors
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Set link styling specific to Orgs page (#1122)
bc169d4
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Clean up unused style in theme-mui (#1122)
5c2426a
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Update mediumBlue color code (#1122)
8b65d6f
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Update ContributorThumbnail and Affiliated styling with spectrum (#1122)
49742c2
bruceplai added a commit that referenced this issue Feb 3, 2022
@bruceplai
Fix link destination in Tag Generator (#1122)
b1fc971
@bruceplai
Copy link
Member Author

Link color updates not properly taking effect in brave browser (based on chrome) during my testing.
If this issue can be repeated by other team members during multiple browser testing, then I will investigate further.

@smsada smsada added the feature: design system Design systems, Style Guides, libraries related to, etc. label Feb 11, 2022
@smsada smsada mentioned this issue Feb 11, 2022
Open
2 tasks
@github-project-automation github-project-automation bot moved this to New Issue Approval (All new issues should be added to this column) in CTI: Project Board Aug 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bruceplai bruceplai

Labels
feature: design system Design systems, Style Guides, libraries related to, etc. role: front end size: 1pt Can be done in 6 hours or less
Projects
CTI: Project Board
Status: New Issue Approval (All new issues should be added to this column)
Milestone
7 - MVP Website Launch
Development

Successfully merging a pull request may close this issue.

Link color 1122 civictechindex/CTI-website-frontend
2 participants
@bruceplai @smsada