fix(picker): added a custom class to make :focus-visible styles consistent across all browsers
#4724
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Lighthouse scores
What is this?Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on Transfer Size
Request Count
|
Pull Request Test Coverage Report for Build 10844986518Details
💛 - Coveralls |
TarunAdobe
force-pushed
the
fix/blue-ring-action-menu
branch
from
7f09c89 to
8c1dfeb
Compare
Tachometer resultsChromeaction-bar permalinkbasic-test
action-button permalinkbasic-test
action-group permalinkbasic-test
action-menu permalinktest-basic
test-directive permalink
test-lazy permalink
test-open-close-directive permalink
test-open-close permalink
breadcrumbs permalinkbasic-test
combobox permalinkbasic-test
light-dom-test permalink
contextual-help permalinkbasic-test
menu permalinktest-basic
overlay permalinkbasic-test
directive-test permalink
element-test permalink
lazy-test permalink
picker permalinkbasic-test
popover permalinktest-basic
split-button permalinkbasic-test
tooltip permalinktest-basic
test-directive permalink
test-element permalink
test-lazy permalink
truncated permalinkbasic-test
Firefoxaction-bar permalinkbasic-test
action-button permalinkbasic-test
action-group permalinkbasic-test
action-menu permalinktest-basic
test-directive permalink
test-lazy permalink
test-open-close-directive permalink
test-open-close permalink
breadcrumbs permalinkbasic-test
combobox permalinkbasic-test
light-dom-test permalink
contextual-help permalinkbasic-test
menu permalinktest-basic
overlay permalinkbasic-test
directive-test permalink
element-test permalink
lazy-test permalink
picker permalinkbasic-test
popover permalinktest-basic
split-button permalinkbasic-test
tooltip permalinktest-basic
test-directive permalink
test-element permalink
test-lazy permalink
truncated permalinkbasic-test
|
| // if the focus comes from a closing the menu, we need to make sure to | ||
| // unset the :focus-visible state to avoid the focus ring on safari mobile | ||
| if (isWebKit() && !this.open) { | ||
| this.target.blur(); |
There was a problem hiding this comment.
Are we sure that .blur() is the desired approach here? From my understanding, using .blur() will remove focus from the element entirely, but our intention seems to be to keep the element focused while only removing the visual indication (the focus ring). Or how does it work in the other browsers?
Can we check where the focus goes with this implementation? Does it impact keyboard navigation?
TarunAdobe
changed the title
:focus-visible styles consistent across all browsers
TarunAdobe
force-pushed
the
fix/blue-ring-action-menu
branch
from
8ac0d19 to
676b986
Compare
Rajdeepc
requested changes
Sep 12, 2024
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Rajdeepc
dismissed
their stale review
Missed on the lint change that doesnt need to be addressed here in this PR
Rajdeepc
reviewed
Sep 12, 2024
Something on this front. const isWebKitMacOS = isWebKit() && detectOS() === 'Mac OS'; |
|
Note: I have to add tests to this and also make sure that it works for picker and other related components (if any) |
rubencarvalho
approved these changes
Sep 16, 2024
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Added a custom
remove-focus-ring-safari-hackclass that gets applied when the picker (that is opened using a mouse click) closes after making a selection in a mobile environment using webkit.This class unsets the focus-ring properties that we apply for the
:focus-visiblepseudo class.This is needed so that we don't get focus-ring styles on making a selection in an action-menu in a IOS device.
Related issue(s)
Motivation and context
Blue Focus Ring should not appear on the action-menu and picker on opening and closing in IOS mobile devices.
How has this been tested?
On IOS mobile devices
Test 1 -
Test 2 -
Test 3 -
On All Desktop Devices
Test 1 -
Test 2 -
Screenshots (if appropriate)
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main.