perf(cdk/a11y): Don't trigger re-layout when detecting fake mousedown (#28029)

(cherry picked from commit 737c7a8)

Author: mmalerba

src/cdk/a11y/fake-event-detection.ts

@@ -9,13 +9,11 @@
 /** Gets whether an event could be a faked `mousedown` event dispatched by a screen reader. */
 export function isFakeMousedownFromScreenReader(event: MouseEvent): boolean {
   // Some screen readers will dispatch a fake `mousedown` event when pressing enter or space on
-  // a clickable element. We can distinguish these events when both `offsetX` and `offsetY` are
-  // zero or `event.buttons` is zero, depending on the browser:
+  // a clickable element. We can distinguish these events when `event.buttons` is zero, or
+  // `event.detail` is zero depending on the browser:
   // - `event.buttons` works on Firefox, but fails on Chrome.
-  // - `offsetX` and `offsetY` work on Chrome, but fail on Firefox.
-  // Note that there's an edge case where the user could click the 0x0 spot of the
-  // screen themselves, but that is unlikely to contain interactive elements.
-  return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
+  // - `detail` works on Chrome, but fails on Firefox.
+  return event.buttons === 0 || event.detail === 0;
 }
 
 /** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */

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

@@ -168,7 +168,7 @@ describe('FocusMonitor', () => {
     // Simulate focus via a fake mousedown from a screen reader.
     dispatchMouseEvent(buttonElement, 'mousedown');
     const event = createMouseEvent('mousedown');
-    Object.defineProperties(event, {offsetX: {get: () => 0}, offsetY: {get: () => 0}});
+    Object.defineProperties(event, {detail: {get: () => 0}});
     dispatchEvent(buttonElement, event);
 
     buttonElement.focus();

src/cdk/a11y/input-modality/input-modality-detector.spec.ts

@@ -138,7 +138,7 @@ describe('InputModalityDetector', () => {
 
     // Create a fake screen-reader mouse event.
     const event = createMouseEvent('mousedown');
-    Object.defineProperties(event, {offsetX: {get: () => 0}, offsetY: {get: () => 0}});
+    Object.defineProperties(event, {detail: {get: () => 0}});
     dispatchEvent(document, event);
 
     expect(detector.mostRecentModality).toBe('keyboard');

src/cdk/drag-drop/directives/drag.spec.ts

@@ -240,8 +240,8 @@ describe('CdkDrag', () => {
         const event = createMouseEvent('mousedown', 0, 0);
 
         Object.defineProperties(event, {
-          offsetX: {get: () => 0},
-          offsetY: {get: () => 0},
+          buttons: {get: () => 0},
+          detail: {get: () => 0},
         });
 
         expect(dragElement.style.transform).toBeFalsy();

src/cdk/testing/testbed/fake-events/event-objects.ts

@@ -19,8 +19,8 @@ export function createMouseEvent(
   type: string,
   clientX = 0,
   clientY = 0,
-  offsetX = 1,
-  offsetY = 1,
+  offsetX = 0,
+  offsetY = 0,
   button = 0,
   modifiers: ModifierKeys = {},
 ) {
@@ -36,7 +36,7 @@ export function createMouseEvent(
     cancelable: true,
     composed: true, // Required for shadow DOM events.
     view: window,
-    detail: 0,
+    detail: 1,
     relatedTarget: null,
     screenX,
     screenY,

src/material/core/ripple/ripple.spec.ts

@@ -201,7 +201,7 @@ describe('MatRipple', () => {
 
     it('should ignore fake mouse events from screen readers', () => {
       const event = createMouseEvent('mousedown');
-      Object.defineProperties(event, {offsetX: {get: () => 0}, offsetY: {get: () => 0}});
+      Object.defineProperties(event, {buttons: {get: () => 0}, detail: {get: () => 0}});
 
       dispatchEvent(rippleTarget, event);