Skip to content

Add outline to buttons in ms high contrast mode #730

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

spencercanner
Copy link

@spencercanner spencercanner commented Sep 16, 2020

  • Add a transparent border to the product tile button and the iframe toggle
  • Transparent borders are picked up by high contrast mode to provide an outline around in button
  • Although the borders are not visible in non-high contrast mode, the background colour of the product/cart button is visible through the transparent border so buttons will be slightly bigger
    • background-clip could be used to solve this, however it alters how the border-radius appears. Since border-radius is channel-configurable and is tied to a px value, this approach was not taken.

To 🎩 :

  • Sanity check that the product button, cart button, and the cart toggle button do not appear visibly different (with the exception that the product/cart buttons might be slightly bigger)
  • In high contrast mode, verify that the product button, cart button, and cart toggle all have a white border

Browsers:

  • Safari - Mac
  • Firefox - Mac
  • Chrome - Mac
  • Edge - Mac
  • Legacy Edge - Windows
  • Edge - Windows
  • Chrome - Windows
  • Firefox - Windows
  • Legacy Edge - Windows - High Contrast Mode

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.

1 participant