Fix Android TalkBack double tap behavior with TableView/ListView highlight selection (#2520)

LFDanLu · devongovett · web-flow · commit 499f54ecd175 · 2021-11-17T17:14:04.000-08:00
* updating isVirtualPointerEvent to better detect TalkBack double tap

fixed TableView/ListView highlight selection behavior where double tapping on the row would replace selection instead of toggling selection. usePress thought that TalkBack double tap was a mouse event rather than a virtual event causing SelectionManager to do a replace instead of a toggle

* adding test

* adding more tests for ListView and TableView highlight selection

* fixing iOS long press and distiguishing talkback double tap from safari click

* adding bug link for Safari pointer pressure

* use state.pointerType if available in onClick virtual click detection

* update android talkback virtual click check

* fixing tests

* forgot to save fix to usePress test smh

Co-authored-by: Devon Govett &lt;devongovett@gmail.com&gt;
diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts
@@ -264,7 +264,7 @@ export function usePress(props: PressHookProps): PressResult {
 
           // If triggered from a screen reader or by using element.click(),
           // trigger as if it were a keyboard click.
-          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && isVirtualClick(e.nativeEvent)) {
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === 'virtual' || isVirtualClick(e.nativeEvent))) {
             // Ensure the element receives focus (VoiceOver on iOS does not do this)
             if (!isDisabled && !preventFocusOnPress) {
               focusWithoutScrolling(e.currentTarget);
@@ -767,5 +767,16 @@ function shouldPreventDefault(target: Element) {
 
 function isVirtualPointerEvent(event: PointerEvent) {
   // If the pointer size is zero, then we assume it's from a screen reader.
-  return event.width === 0 && event.height === 0;
+  // Android TalkBack double tap will sometimes return a event with width and height of 1
+  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
+  return (
+    (event.width === 0 && event.height === 0) ||
+    (event.width === 1 &&
+      event.height === 1 &&
+      event.pressure === 0 &&
+      event.detail === 0
+    )
+  );
 }
diff --git a/packages/@react-aria/interactions/test/usePress.test.js b/packages/@react-aria/interactions/test/usePress.test.js
@@ -585,6 +585,66 @@ describe('usePress', function () {
       ]);
     });
 
+    it('should detect Android TalkBack double tap', function () {
+      let events = [];
+      let addEvent = (e) => events.push(e);
+      let res = render(
+        <Example
+          onPressStart={addEvent}
+          onPressEnd={addEvent}
+          onPress={addEvent}
+          onPressUp={addEvent} />
+      );
+
+      let el = res.getByText('test');
+      // Android TalkBack will occasionally fire a pointer down event with "width: 1, height: 1" instead of "width: 0, height: 0".
+      // Make sure we can still determine that this is a virtual event by checking the pressure, detail, and height/width.
+      fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+      fireEvent(el, pointerEvent('pointerup', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+      expect(events).toEqual([]);
+
+      // Virtual pointer event sets pointerType and onClick handles the rest
+      fireEvent.click(el, {pointerType: 'mouse', width: 1, height: 1, detail: 1});
+      expect(events).toEqual([
+        {
+          type: 'pressstart',
+          target: el,
+          pointerType: 'virtual',
+          ctrlKey: false,
+          metaKey: false,
+          shiftKey: false,
+          altKey: false
+        },
+        {
+          type: 'pressup',
+          target: el,
+          pointerType: 'virtual',
+          ctrlKey: false,
+          metaKey: false,
+          shiftKey: false,
+          altKey: false
+        },
+        {
+          type: 'pressend',
+          target: el,
+          pointerType: 'virtual',
+          ctrlKey: false,
+          metaKey: false,
+          shiftKey: false,
+          altKey: false
+        },
+        {
+          type: 'press',
+          target: el,
+          pointerType: 'virtual',
+          ctrlKey: false,
+          metaKey: false,
+          shiftKey: false,
+          altKey: false
+        }
+      ]);
+    });
+
     it('should not fire press events for disabled elements', function () {
       let events = [];
       let addEvent = (e) => events.push(e);
diff --git a/packages/@react-spectrum/list/test/ListView.test.js b/packages/@react-spectrum/list/test/ListView.test.js
@@ -11,12 +11,27 @@
  */
 import {act, fireEvent, render as renderComponent, within} from '@testing-library/react';
 import {ActionButton} from '@react-spectrum/button';
+import {installPointerEvent} from '@react-spectrum/test-utils';
 import {Item, ListView} from '../src';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
+function pointerEvent(type, opts) {
+  let evt = new Event(type, {bubbles: true, cancelable: true});
+  Object.assign(evt, {
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    altKey: false,
+    button: opts.button || 0,
+    width: 1,
+    height: 1
+  }, opts);
+  return evt;
+}
+
 describe('ListView', function () {
   let offsetWidth, offsetHeight;
 
@@ -276,6 +291,7 @@ describe('ListView', function () {
   });
 
   describe('selection', function () {
+    installPointerEvent();
     let checkSelection = (onSelectionChange, selectedKeys) => {
       expect(onSelectionChange).toHaveBeenCalledTimes(1);
       expect(new Set(onSelectionChange.mock.calls[0][0])).toEqual(new Set(selectedKeys));
@@ -370,6 +386,58 @@ describe('ListView', function () {
         expect(rows[1]).toHaveAttribute('aria-selected', 'true');
         expect(rows[2]).toHaveAttribute('aria-selected', 'true');
       });
+
+      it('should support single tap to perform row selection with screen reader if onAction isn\'t provided', function () {
+        let onSelectionChange = jest.fn();
+        let tree = renderSelectionList({onSelectionChange, selectionMode: 'multiple', selectionStyle: 'highlight'});
+
+        let rows = tree.getAllByRole('row');
+        expect(rows[1]).toHaveAttribute('aria-selected', 'false');
+
+        act(() => userEvent.click(within(rows[1]).getByText('Bar'), {pointerType: 'touch', width: 0, height: 0}));
+        checkSelection(onSelectionChange, [
+          'bar'
+        ]);
+        expect(rows[1]).toHaveAttribute('aria-selected', 'true');
+        onSelectionChange.mockReset();
+
+        // Android TalkBack double tap test, pointer event sets pointerType and onClick handles the rest
+        expect(rows[2]).toHaveAttribute('aria-selected', 'false');
+        act(() => {
+          let el = within(rows[2]).getByText('Baz');
+          fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+          fireEvent(el, pointerEvent('pointerup', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+          fireEvent.click(el, {pointerType: 'mouse', width: 1, height: 1, detail: 1});
+        });
+        checkSelection(onSelectionChange, [
+          'bar', 'baz'
+        ]);
+        expect(rows[1]).toHaveAttribute('aria-selected', 'true');
+        expect(rows[2]).toHaveAttribute('aria-selected', 'true');
+      });
+
+      it('should support single tap to perform onAction with screen reader', function () {
+        let onSelectionChange = jest.fn();
+        let onAction = jest.fn();
+        let tree = renderSelectionList({onSelectionChange, selectionMode: 'multiple', selectionStyle: 'highlight', onAction});
+
+        let rows = tree.getAllByRole('row');
+        act(() => userEvent.click(within(rows[1]).getByText('Bar'), {pointerType: 'touch', width: 0, height: 0}));
+        expect(onSelectionChange).not.toHaveBeenCalled();
+        expect(onAction).toHaveBeenCalledTimes(1);
+        expect(onAction).toHaveBeenCalledWith('bar');
+
+        // Android TalkBack double tap test, pointer event sets pointerType and onClick handles the rest
+        act(() => {
+          let el = within(rows[2]).getByText('Baz');
+          fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+          fireEvent(el, pointerEvent('pointerup', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+          fireEvent.click(el, {pointerType: 'mouse', width: 1, height: 1, detail: 1});
+        });
+        expect(onSelectionChange).not.toHaveBeenCalled();
+        expect(onAction).toHaveBeenCalledTimes(2);
+        expect(onAction).toHaveBeenCalledWith('baz');
+      });
     });
   });
 
diff --git a/packages/@react-spectrum/table/test/Table.test.js b/packages/@react-spectrum/table/test/Table.test.js
@@ -86,6 +86,20 @@ function ExampleSortTable() {
   );
 }
 
+function pointerEvent(type, opts) {
+  let evt = new Event(type, {bubbles: true, cancelable: true});
+  Object.assign(evt, {
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    altKey: false,
+    button: opts.button || 0,
+    width: 1,
+    height: 1
+  }, opts);
+  return evt;
+}
+
 describe('TableView', function () {
   let offsetWidth, offsetHeight;
 
@@ -2465,6 +2479,32 @@ describe('TableView', function () {
         expect(onAction).toHaveBeenCalledWith('Foo 5');
       });
 
+      it('should support single tap to perform row selection with screen reader if onAction isn\'t provided', function () {
+        let onSelectionChange = jest.fn();
+        let tree = renderTable({onSelectionChange, selectionStyle: 'highlight'});
+
+        userEvent.click(getCell(tree, 'Baz 5'), {pointerType: 'touch', width: 0, height: 0});
+        checkSelection(onSelectionChange, [
+          'Foo 5'
+        ]);
+        onSelectionChange.mockReset();
+
+        userEvent.click(getCell(tree, 'Foo 8'), {pointerType: 'touch', width: 0, height: 0});
+        checkSelection(onSelectionChange, [
+          'Foo 5', 'Foo 8'
+        ]);
+        onSelectionChange.mockReset();
+
+        // Android TalkBack double tap test, virtual pointer event sets pointerType and onClick handles the rest
+        let cell = getCell(tree, 'Foo 10');
+        fireEvent(cell, pointerEvent('pointerdown', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+        fireEvent(cell, pointerEvent('pointerup', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+        fireEvent.click(cell, {pointerType: 'mouse', width: 1, height: 1, detail: 1});
+        checkSelection(onSelectionChange, [
+          'Foo 5', 'Foo 8', 'Foo 10'
+        ]);
+      });
+
       it('should support single tap to perform onAction with screen reader', function () {
         let onSelectionChange = jest.fn();
         let onAction = jest.fn();
@@ -2474,6 +2514,15 @@ describe('TableView', function () {
         expect(onSelectionChange).not.toHaveBeenCalled();
         expect(onAction).toHaveBeenCalledTimes(1);
         expect(onAction).toHaveBeenCalledWith('Foo 5');
+
+        // Android TalkBack double tap test, virtual pointer event sets pointerType and onClick handles the rest
+        let cell = getCell(tree, 'Foo 10');
+        fireEvent(cell, pointerEvent('pointerdown', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+        fireEvent(cell, pointerEvent('pointerup', {pointerId: 1, width: 1, height: 1, pressure: 0, detail: 0}));
+        fireEvent.click(cell, {pointerType: 'mouse', width: 1, height: 1, detail: 1});
+        expect(onSelectionChange).not.toHaveBeenCalled();
+        expect(onAction).toHaveBeenCalledTimes(2);
+        expect(onAction).toHaveBeenCalledWith('Foo 10');
       });
 
       it('should support long press to enter selection mode on touch', function () {
