search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
287 stars 76 forks source link

[Tab Title] Provide high contrast support to `closable` button #6994

Closed geospatialem closed 1 year ago

geospatialem commented 1 year ago

Summary

The tab-title text has sufficient contrast in high contrast mode: Capture

However, the new closable tab button, added from #2620, only provides some context on focus: Capture2

Actual Behavior

The tab title closable button does not provide sufficient context (see image above in the "Summary" section).

Expected Behavior

Additional context should be provided to the the closable button using the high contrast CSS media feature, forced-colors.

expected high contrast behavior

Reproduction Sample

https://codepen.io/geospatialem/pen/wvYRRbN

Reproduction Steps

  1. Open the following Codepen
  2. Turn on the OS' high contrast (Windows)
  3. Select the first item
  4. Observe the contrast ratio

Reproduction Version

1.4.0

Working W3C Example/Tutorial

No response

Relevant Info

High contrast was determined in the closable button as part of #2620

Regression?

No response

Priority impact

p1 - need for current milestone

Esri team

Calcite (dev)

mpriour commented 1 year ago

@geospatialem I can take care of this next week if you like.

geospatialem commented 1 year ago

@mpriour Awesome! Adding you in for assignment, thanks much, Matt!

mpriour commented 1 year ago

@geospatialem PR #7272 created. Very simple fix.

github-actions[bot] commented 1 year ago

Installed and assigned for verification.

geospatialem commented 1 year ago

Verified on Windows with high contrast enabled and 1.5.0-next.17.

image