Skip to content

Commit

Permalink
[Numeric Input] - BUGFIX - Adjust color contrast for tooltip text (#1966
Browse files Browse the repository at this point in the history
)

## Summary:
The text in the numeric input tooltip was slightly out of spec for accessibility. This change ensures that the text has a minimum 4.5:1 contrast ratio.

## Test plan:
1. Launch Storybook
2. Navigate to Perseus Editor => Editor => [Demo](http://localhost:6006/?path=/story/perseuseditor-editorpage--demo)
3. Add a Numeric Input widget
4. Configure the widget to have any number of format options
5. Place focus in the input field in the preview for the widget
6. Check the color value in the browser inspector for the text in the tooltip (it should be greater than 4.5:1)

## Affected UI:
### Before
![Color Contrast - Before](https://github.com/user-attachments/assets/2079d040-f240-45d1-91b7-a57fb062df5d)

### After
![Color Contrast - After](https://github.com/user-attachments/assets/3d064dd2-061e-4d8e-957f-3d362be01d7f)

Author: mark-fitzgerald

Reviewers: jeremywiebe, mark-fitzgerald, nishasy

Required Reviewers:

Approved By: jeremywiebe, nishasy

Checks: ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald, ❌ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1966
  • Loading branch information
mark-fitzgerald authored Dec 6, 2024
1 parent cfe9e67 commit e22a931
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/poor-numbers-reflect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

[Numeric Input] - BUGFIX - Adjust color contrast of tooltip text
2 changes: 1 addition & 1 deletion packages/perseus/src/styles/perseus-renderer.less
Original file line number Diff line number Diff line change
Expand Up @@ -544,7 +544,7 @@

.perseus-formats-tooltip {
background: #fff;
color: #777;
color: @textSecondary;
padding: 5px 10px;
width: 240px;
}
Expand Down
2 changes: 2 additions & 0 deletions packages/perseus/src/styles/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
@gray25: #3b3e40;
@gray17: #21242c;

@textSecondary: #717378;

// Media query breakpoints
// --------------------------------------------------

Expand Down

0 comments on commit e22a931

Please sign in to comment.