Skip to content

Commit bacb8df

Browse files
crisbetommalerba
authored andcommitted
fix(a11y): focus monitor not identifying touch focus inside shadow root (#17167)
`FocusMonitor` uses a `touchstart` listener on the `document` to identify when an element was focused via touch. The problem is that if an element is inside the shadow DOM, the `event.target` will be set to the shadow root. These changes use `composedPath` to get the event target which accounts for the shadow DOM. (cherry picked from commit 3673f3d)
1 parent 070d0a5 commit bacb8df

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

src/cdk/a11y/focus-monitor/focus-monitor.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,11 @@ export class FocusMonitor implements OnDestroy {
117117
if (this._touchTimeoutId != null) {
118118
clearTimeout(this._touchTimeoutId);
119119
}
120-
this._lastTouchTarget = event.target;
120+
121+
// Since this listener is bound on the `document` level, any events coming from the shadow DOM
122+
// will have their `target` set to the shadow root. If available, use `composedPath` to
123+
// figure out the event target.
124+
this._lastTouchTarget = event.composedPath ? event.composedPath()[0] : event.target;
121125
this._touchTimeoutId = setTimeout(() => this._lastTouchTarget = null, TOUCH_BUFFER_MS);
122126
}
123127

0 commit comments

Comments
 (0)