Query shadow dom focusables #33
Merged
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
added 2 commits
March 28, 2022 10:43
Search shadow roots for focusable elements in `getFocusables` Search shadow roots for element containment in `getRelativeFocusable`
Codecov Report
@@ Coverage Diff @@
## master #33 +/- ##
==========================================
+ Coverage 82.26% 83.70% +1.44%
==========================================
Files 21 21
Lines 344 356 +12
Branches 68 73 +5
==========================================
+ Hits 283 298 +15
+ Misses 55 54 -1
+ Partials 6 4 -2
Continue to review full report at Codecov.
|
|
https://github.com/theKashey/react-focus-lock/blob/master/src/Trap.js#L124 - This would need to be updated to use |
theKashey
reviewed
Apr 1, 2022
theKashey
reviewed
Apr 1, 2022
| (result, node) => result || node.contains(activeElement) || focusInsideIframe(node), | ||
| false as boolean | ||
| ); | ||
| return getAllAffectedNodes(topNode).some((node) => contains(node, activeElement) || focusInsideIframe(node)); |
|
Still on it.... |
|
All focus-* family have got an update. |
Merged
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.
This PR aims to further improve support for focusable elements within shadow doms and nested shadow doms.
This primary changes are:
getFocusables, previously this method would not search within shadow doms for focusable elements. This modification adds the shadow focusable elements in DOM order (depth first). This allowsfocusNextElementandfocusPrevElementto appropriately pass focus to shadow DOMs or custom elements within a focus lock.containsto DOMUtils, used to determine whether an element is contained within another, including any nested shadow DOMs, this allowsfocusInsideandfocusIsHiddento correctly report when the focused element is within a shadow DOM. Previously,getActiveElementwas added to get the active element from within a Shadow DOM, but the shadow dom was not being traversed when looking for that element (becauseNode.contains()does not check shadow doms).It should be noted that this does add or fix support for marking shadow dom elements with any of the
data-attributes found in the constants, used to control the behavior of the focus lock. This is outside of our use case for the focus lock, our team usesreact-focus-lock(in preact), but consumes web components from our organizations design system that we need to be able to focus when within a focus lock.This should fix theKashey/react-focus-lock#206