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.

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

fix: Improve contrast of completion popup in CloudEditor theme #5473

Merged
merged 4 commits into from
Jan 29, 2024

Conversation

akoreman
Copy link
Contributor

@akoreman akoreman commented Jan 26, 2024

Issue #, if available: NA

Description of changes: Some parts of the default autocomplete popup did not meet accessibility contrast requirements, the gaps were:

  • The blue completion highlight text has insufficient contrast with the selected and non-selected background, it should be 4.5:1.
  • The blue completion highlight text has insufficient contrast with the 'normal' text, it should be 3:1.
  • The light grey meta text on does not contrast 4.5:1 with the selected and non-selected background colors.

This improves the styling in our CloudEditor themes, which we use as our de-facto accessible themes.

Screenshot 2024-01-26 at 14 22 13 Screenshot 2024-01-26 at 14 21 49

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Copy link

codecov bot commented Jan 26, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (64101cc) 86.49% compared to head (1b3ebf9) 86.49%.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #5473   +/-   ##
=======================================
  Coverage   86.49%   86.49%           
=======================================
  Files         582      582           
  Lines       42355    42355           
  Branches     7055     7055           
=======================================
  Hits        36636    36636           
  Misses       5719     5719           
Flag Coverage Δ
unittests 86.49% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@nightwing
Copy link
Member

Can we make this specific for cloudEditor themes? Too high contrast does not look good with all themes, especially the ones that have low contrast intentionally.

@akoreman
Copy link
Contributor Author

akoreman commented Jan 29, 2024

Can we make this specific for cloudEditor themes? Too high contrast does not look good with all themes, especially the ones that have low contrast intentionally.

As much as I'd like to argue that we should be accessible by-default I think I agree that this will look ugly with some themes and it will be annoying to users of those themes to expect them to style the completion popup back to what it was.

Since we are already using the CloudEditor themes as our de-facto accessible themes I added it to there.

@akoreman akoreman changed the title fix: Improve contrast of completion popup. fix: Improve contrast of completion popup in CloudEditor theme Jan 29, 2024
@akoreman akoreman requested a review from whazor January 29, 2024 09:24
@akoreman akoreman merged commit 273c7f1 into ajaxorg:master Jan 29, 2024
3 checks passed
@akoreman akoreman deleted the completion_a11y_styling branch January 29, 2024 09:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants