Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add select focus state in legacy edge #737

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

Conversation

spencercanner
Copy link

@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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant