search

testing-library / testing-playground

Simple and complete DOM testing playground that encourage good testing practices.
https://testing-playground.com
MIT License
783 stars 62 forks source link

Improve the color contrast of IconButton when used in Expandable component #343

Closed tbusillo closed 2 years ago

tbusillo commented 2 years ago

Bug Report 🐛

I am more than happy to submit a PR for this, but wanted to submit an issue/get any feedback prior to doing so

There are several areas in the UI where color contrast can be improved, but one area that has the greatest impact on vision impaired and non-impaired users can be seen in the Expandable component's use of the IconButton.

This is an issue not just in terms of usability, but also in terms of inclusiveness and compliance with accessibility standards/guidelines (WCAG 1.4.3).

Color contrast between foreground and background colors for graphical objects/UI components should be, at minimum, a 3:1 ratio. Below are the current contrast ratios for two examples.

Example 1

Screen Shot 2022-05-09 at 10 25 18 AM

Contrast contrast:

Screen Shot 2022-05-09 at 11 07 35 AM

Example 2

hover_vs_hover

Color contrast:

Screen Shot 2022-05-09 at 11 03 15 AM

To Reproduce ✔️

  1. Go to http://www.testing-playground.com.
  2. Find the expandable component's (e.g., one under the top-right pane, one on the bottom-left pane).
  3. Click on the expandable section and observe the color changes between expanded/collapsed, and hover vs. non-hovered.

Expected behavior 🤔

Hoverable and non-hoverable color states, especially for interactive elements, have sufficient contrast and are made more visible (regardless of contrast/accessibility).

Suggested solution 🔦

This is taking place due to the SVG icons using fill="currentColor" then inheriting from the light variant found in [testing-playground/src/components/IconButton.js], which is light: 'text-gray-400 hover:text-gray-600'.

I don't think anything is being passed into the variant prop, so it's defaulting to light [ref].

Option 1: Introduce a text-gray-500 variant, with a color of #728DA7. This color's contrast would be sufficient for both elements.

Option 2: Change the light variant's non-hovered text color to text-gray-600

Examples of what this would look like can be seen at https://play.tailwindcss.com/vWbA6C62QF and below.

Screen Shot 2022-05-09 at 12 31 02 PM

Your Environment 💻

Additional comments

smeijer commented 2 years ago

Hi @tbusillo , thanks for the extended report! I'm happy to accept a pull for this. Please choose the option that you think is best.

tbusillo commented 2 years ago

@smeijer Cool! Will try to get something in this week and thank you for taking a look/being open to the change!