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.

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

Add select focus state in legacy edge #737

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

spencercanner
Copy link
Contributor

@spencercanner spencercanner commented Nov 10, 2020

Problem

  • Legacy Edge does not inherit and user agent focus styles when a select element's appearance has been changed to none. This results in the select elements not having a visible focus state in that browser.
  • It is also missing a focus state in high contrast mode

Solution

  • Move borders from the parent div to the select element, so they can be updated when the select element is focused
  • Browsers should still inherit their user agent focus styles and have those applied on top of the darkened border
  • The :focus-within selector could be used to update the parent's border colour when the child select is focused, but it is not supported in IE11 or legacy Edge
  • Add an outline to the select element when it is focused in high contrast mode

To 🎩 :

  • Verify that the default and focus styles of the select elements look the same as before this change
  • In legacy edge, verify that the focus state is visible by a darkening of the border
  • In high contrast mode, verify that the focus state is visible with a thicker outline

Windows:

  • Legacy Edge 18
  • Legacy Edge 17
  • Chromium Edge 86
  • Chromium Edge 85
  • Firefox 82
  • Firefox 81
  • Chrome 86
  • Chrome 85
  • Opera 72
  • Opera 71
  • IE11
  • High contrast mode - Legacy Edge 18

Mac:

  • Safari 13
  • Safari 12
  • Safari 8
  • Firefox 82
  • Firefox 81
  • Chrome 86
  • Chrome 85
  • Chromium Edge 86
  • Chromium Edge 85
  • Opera 72
  • Opera 71

iOS:

  • Safari
  • Chrome

Android:

  • Chrome
  • Firefox
  • Samsung Internet

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.

None yet

1 participant