From b78ab7396eba48a6dbe18948b8730e6450735a82 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 22 Sep 2019 12:32:27 +0200 Subject: [PATCH] fix(a11y): focus monitor not identifying touch focus inside shadow root `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. --- src/cdk/a11y/focus-monitor/focus-monitor.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.ts b/src/cdk/a11y/focus-monitor/focus-monitor.ts index 2891da5ed07f..1798c85a3c34 100644 --- a/src/cdk/a11y/focus-monitor/focus-monitor.ts +++ b/src/cdk/a11y/focus-monitor/focus-monitor.ts @@ -117,7 +117,11 @@ export class FocusMonitor implements OnDestroy { if (this._touchTimeoutId != null) { clearTimeout(this._touchTimeoutId); } - this._lastTouchTarget = event.target; + + // Since this listener is bound on the `document` level, any events coming from the shadow DOM + // will have their `target` set to the shadow root. If available, use `composedPath` to + // figure out the event target. + this._lastTouchTarget = event.composedPath ? event.composedPath()[0] : event.target; this._touchTimeoutId = setTimeout(() => this._lastTouchTarget = null, TOUCH_BUFFER_MS); }