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

[Pure design change] Make checkbox/radio only show focus when tabbing, not when clicked. #4308

Merged
merged 1 commit into from Jan 27, 2022

Conversation

tvst
Copy link
Contributor

@tvst tvst commented Jan 22, 2022

📚 Context

Focus queues are often confusing for mouse-based users (why is there
sometimes a box around this element?). To help with this, in this PR I
replace the "focus" state with the "focus-visible" state, which tries to
be smart about when to draw focus queues around an element.

Here's a nice little write-up about "focus-visible":
https://matthiasott.com/notes/focus-visible-is-here

  • Bugfix
  • Feature
  • Refactoring
  • Other, please describe: visual updates

🧠 Description of Changes

  • Make checkbox and radio focus use "focus-visible" rather than "focus"

    • This is a breaking API change
    • This is a visible (user-facing) change

Revised:

Insert screenshot of your updated UI/code here

Current:

Insert screenshot of existing UI/code here

🧪 Testing Done

No existing tests are impacted by this change, and I felt the cost/benefit ratio of writing of new tests just for this would be too high (high cost, low benefit). LMK if you think otherwise!

  • Screenshots included
  • Added/Updated unit tests
  • Added/Updated e2e tests

🌐 References

Does this depend on other work, documents, or tickets?

No. This is a very minor change, not connected to any existing issue.


Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

Focus queues are often confusing for mouse-based users (why is there
sometimes a box around this element?). To help with this, in this PR I
replace the "focus" state with the "focus-visible" state, which tries to
be smart about when to draw focus queues around an element.

Here's a nice little write-up about "focus-visible":
https://matthiasott.com/notes/focus-visible-is-here
@tvst tvst requested a review from kmcgrady January 26, 2022 01:46
@tvst tvst changed the title Make checkbox/radio only show focus when tabbing, not when clicked. [Pure design change] Make checkbox/radio only show focus when tabbing, not when clicked. Jan 26, 2022
Copy link
Collaborator

@mayagbarnes mayagbarnes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! ⚡👍🏼

@vdonato vdonato merged commit cd8ffd2 into develop Jan 27, 2022
@tvst tvst deleted the tvst/focus-visible branch January 29, 2022 04:46
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

3 participants