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

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

Closed
geospatialem opened this issue May 23, 2023 · 5 comments
Closed

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

geospatialem opened this issue May 23, 2023 · 5 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2023 July Priorities

Comments

@geospatialem
Copy link
Member

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)
@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. a11y Issues related to Accessibility fixes or improvements. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. estimate - 3 A day or two of work, likely requires updates to tests. labels May 23, 2023
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels May 23, 2023
@mpriour
Copy link
Member

mpriour commented May 24, 2023

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

@geospatialem
Copy link
Member Author

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

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels May 24, 2023
mpriour added a commit that referenced this issue Jul 3, 2023
@mpriour
fix(tab-title): add full focus outline to closable tab button
f4d0cee 
Effect is only noticable in high-contrast mode. Issue #6994
@mpriour mpriour mentioned this issue Jul 3, 2023
Merged
@mpriour
Copy link
Member

mpriour commented Jul 3, 2023

@geospatialem PR #7272 created. Very simple fix.

mpriour added a commit that referenced this issue Jul 3, 2023
@mpriour
fix(tab-title): add full focus outline to closable tab button in high…
d812d17 
… contrast mode (#7272)

Effect is only noticable in high-contrast mode. Issue #6994

**Related Issue:** #6994

## Summary
Adds a simple z-index to show the high contrast focus outline over the
tab title outline.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jul 3, 2023
@github-actions github-actions bot assigned geospatialem and unassigned mpriour Jul 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 3, 2023

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Jul 9, 2023
@geospatialem
Copy link
Member Author

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2023 July Priorities
Development

No branches or pull requests
3 participants
@mpriour @jcfranco @geospatialem