Merge pull request #454 from sbates-idrc/tilepanel-radiogroup

sbates-idrc · web-flow · commit 80dfbb6ab638 · 2024-03-20T11:03:53.000-04:00
Change the tile panel into a `radiogroup` and require that painting starts within the scene (fixes #453)
diff --git a/src/Scene.js b/src/Scene.js
@@ -26,7 +26,7 @@ import { ReactComponent as StartIndicator } from './svg/StartIndicator.svg';
 
 const startIndicatorWidth = 0.45;
 
-type MousePosition = {
+type PointerPosition = {
     x: number,
     y: number
 };
@@ -173,7 +173,7 @@ class Scene extends React.Component<SceneProps, {}> {
     }
 
     /* istanbul ignore next */
-    getPositionFromSceneSvgMouseEvent(e: any): MousePosition {
+    getPositionFromSceneSvgPointerEvent(e: any): PointerPosition {
         // $FlowFixMe: DOMPoint
         const clientPoint = new DOMPoint(e.clientX, e.clientY);
         const svgElem = e.currentTarget;
@@ -185,23 +185,36 @@ class Scene extends React.Component<SceneProps, {}> {
     }
 
     /* istanbul ignore next */
-    handleMouseDownSceneSvg = (e: any) => {
-        const pos: MousePosition = this.getPositionFromSceneSvgMouseEvent(e);
-        this.lastPaintX = pos.x;
-        this.lastPaintY = pos.y;
-        this.props.onPaintScene(pos.x, pos.y);
+    handlePointerDownSceneSvg = (e: any) => {
+        if (e.button === 0) {
+            e.currentTarget.onpointermove = this.handlePaintMove;
+
+            // Capture the pointer events so that we can handle the case when
+            // the pointerup event happens outside of the scene svg
+            e.currentTarget.setPointerCapture(e.pointerId);
+
+            const pos: PointerPosition = this.getPositionFromSceneSvgPointerEvent(e);
+            this.lastPaintX = pos.x;
+            this.lastPaintY = pos.y;
+            this.props.onPaintScene(pos.x, pos.y);
+        }
     }
 
     /* istanbul ignore next */
-    handleMouseMoveSceneSvg = (e: any) => {
-        const primaryButtonPressed = ((e.buttons % 2) === 1);
-        if (primaryButtonPressed) {
-            const pos: MousePosition = this.getPositionFromSceneSvgMouseEvent(e);
-            if (pos.x !== this.lastPaintX || pos.y !== this.lastPaintY) {
-                this.lastPaintX = pos.x;
-                this.lastPaintY = pos.y;
-                this.props.onPaintScene(pos.x, pos.y);
-            }
+    handlePointerUpSceneSvg = (e: any) => {
+        e.currentTarget.onpointermove = null;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+
+    /* istanbul ignore next */
+    handlePaintMove = (e: any) => {
+        const pos: PointerPosition = this.getPositionFromSceneSvgPointerEvent(e);
+        if (this.props.dimensions.isXInRange(pos.x)
+                && this.props.dimensions.isYInRange(pos.y)
+                &&  (pos.x !== this.lastPaintX || pos.y !== this.lastPaintY)) {
+            this.lastPaintX = pos.x;
+            this.lastPaintY = pos.y;
+            this.props.onPaintScene(pos.x, pos.y);
         }
     }
 
@@ -252,8 +265,8 @@ class Scene extends React.Component<SceneProps, {}> {
                             viewBox={`${minX} ${minY} ${width} ${height}`}
                             ref={this.sceneSvgRef}
                             aria-hidden={true}
-                            onMouseDown={this.handleMouseDownSceneSvg}
-                            onMouseMove={this.handleMouseMoveSceneSvg}
+                            onPointerDown={this.handlePointerDownSceneSvg}
+                            onPointerUp={this.handlePointerUpSceneSvg}
                         >
                             <defs>
                                 <clipPath id='Scene-clippath'>
diff --git a/src/TilePanel.js b/src/TilePanel.js
@@ -1,8 +1,9 @@
 // @flow
 
+import * as C2lcMath from './C2lcMath';
 import classNames from 'classnames';
 import React from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 import { getTileColor, getTileImage, getTileName, isTileCode } from './TileData';
 import type { TileCode } from './TileData';
@@ -18,6 +19,7 @@ type TilePanelProps = {
 
 class TilePanel extends React.PureComponent<TilePanelProps, {}> {
     tileCodes: Array<TileCode>;
+    tileRefs: Map<TileCode, HTMLElement>;
 
     constructor(props: TilePanelProps) {
         super(props);
@@ -40,29 +42,85 @@ class TilePanel extends React.PureComponent<TilePanelProps, {}> {
             'C',
             'D'
         ];
+        this.tileRefs = new Map();
     }
 
-    handleClickTile = (e: any) => {
-        this.selectTile(e.currentTarget);
-    };
-
-    handleMouseDownTile = (e: any) => {
-        this.selectTile(e.currentTarget);
+    handleKeyDownTile = (event: KeyboardEvent) => {
+        switch(event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                // $FlowFixMe: dataset
+                const index = this.tileCodes.indexOf(event.currentTarget.dataset.tilecode);
+                if (index !== -1) {
+                    const newIndex = C2lcMath.wrap(
+                        0,
+                        this.tileCodes.length,
+                        index + 1
+                    );
+                    const newTileCode = this.tileCodes[newIndex];
+                    this.focusTile(newTileCode);
+                    this.props.onSelectTile(newTileCode);
+                }
+                break;
+            }
+            case 'ArrowLeft':
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                // $FlowFixMe: dataset
+                const index = this.tileCodes.indexOf(event.currentTarget.dataset.tilecode);
+                if (index !== -1) {
+                    const newIndex = C2lcMath.wrap(
+                        0,
+                        this.tileCodes.length,
+                        index - 1
+                    );
+                    const newTileCode = this.tileCodes[newIndex];
+                    this.focusTile(newTileCode);
+                    this.props.onSelectTile(newTileCode);
+                }
+                break;
+            }
+            default:
+                break;
+        }
     };
 
-    selectTile(element: any) {
-        const tileCode = element.dataset.tilecode;
+    handleClickTile = (event: MouseEvent) => {
+        // $FlowFixMe: dataset
+        const tileCode = event.currentTarget.dataset.tilecode;
         if (isTileCode(tileCode)) {
             this.props.onSelectTile(((tileCode: any): TileCode));
         }
+    };
+
+    setTileRef(tileCode: TileCode, element: ?HTMLElement) {
+        if (element) {
+            this.tileRefs.set(tileCode, element);
+        }
+    }
+
+    focusTile(tileCode: TileCode) {
+        const element = this.tileRefs.get(tileCode);
+        if (element && element.focus) {
+            element.focus();
+        }
     }
 
     render() {
         const tiles = [];
 
-        for (const tileCode of this.tileCodes) {
+        this.tileCodes.forEach((tileCode, i) => {
             const isSelected = (tileCode === this.props.selectedTile);
 
+            const tabIndex = (
+                isSelected
+                || (i === 0 && (this.props.selectedTile == null
+                    || !isTileCode(this.props.selectedTile)))
+            ) ? 0 : -1;
+
             const tileClassName = classNames(
                 'TilePanel__tile',
                 isSelected && 'TilePanel__tile--selected'
@@ -77,12 +135,15 @@ class TilePanel extends React.PureComponent<TilePanelProps, {}> {
             tiles.push(
                 <button
                     className={tileClassName}
+                    role='radio'
                     data-tilecode={tileCode}
                     key={tileCode}
+                    ref={ (element) => this.setTileRef(tileCode, element) }
+                    tabIndex={tabIndex}
                     aria-label={ariaLabel}
-                    aria-pressed={isSelected}
+                    aria-checked={isSelected}
+                    onKeyDown={this.handleKeyDownTile}
                     onClick={this.handleClickTile}
-                    onMouseDown={this.handleMouseDownTile}
                 >
                     <div
                         className='TilePanel__tileInner'
@@ -99,13 +160,14 @@ class TilePanel extends React.PureComponent<TilePanelProps, {}> {
                     </div>
                 </button>
             );
-        }
+        });
 
         return (
-            <div className='TilePanel'>
-                <h2 className='sr-only'>
-                    <FormattedMessage id='TilePanel.heading' />
-                </h2>
+            <div
+                className='TilePanel'
+                role='radiogroup'
+                aria-label={this.props.intl.formatMessage({ id: 'TilePanel.heading' })}
+            >
                 {tiles}
             </div>
         );
diff --git a/src/TilePanel.test.js b/src/TilePanel.test.js
@@ -4,13 +4,16 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
+import { makeKeyDownEvent } from './TestUtils';
 import type { TileCode } from './TileData';
 import TilePanel from './TilePanel';
 import type { ThemeName } from './types';
 import messages from './messages.json';
 
 configure({ adapter: new Adapter()});
 
+const selectedTileClass = 'TilePanel__tile--selected';
+
 function createComponent(selectedTile: ?TileCode, theme: ThemeName) {
     const selectTileHandler = jest.fn();
 
@@ -41,28 +44,74 @@ test('All expected tiles are rendered', () => {
     expect(wrapper.find('button')).toHaveLength(17);
 });
 
-describe('If there is a selceted tile, it has the TilePanel__tile--selected class', () => {
-    const selectedTileClassSelector = '.TilePanel__tile--selected';
-    test('No selected tile', () => {
-        const { wrapper } = createComponent(null, 'default');
-        expect(wrapper.find(selectedTileClassSelector)).toHaveLength(0);
+test('When no tile is selected, no tile has the TilePanel__tile--selected class and all tiles has aria-checked=false', () => {
+    expect.assertions(35);
+    const { wrapper } = createComponent(null, 'default');
+    const tiles = wrapper.find('button');
+    expect(tiles).toHaveLength(17);
+    tiles.forEach((tile) => {
+        expect(tile.hasClass(selectedTileClass)).toBe(false);
+        expect(tile.getDOMNode().getAttribute('aria-checked')).toBe('false');
     });
-    test('Selected tile', () => {
-        const { wrapper } = createComponent('0', 'default');
-        expect(wrapper.find(selectedTileClassSelector)).toHaveLength(1);
+});
+
+test('When no tile is selected, the first tile has tabIndex=0 and all others have tabIndex=-1', () => {
+    expect.assertions(18);
+    const { wrapper } = createComponent(null, 'default');
+    const tiles = wrapper.find('button');
+    expect(tiles).toHaveLength(17);
+    tiles.forEach((tile, i) => {
+        if (i === 0) {
+            expect(tile.getDOMNode().getAttribute('tabIndex')).toBe('0');
+        } else {
+            expect(tile.getDOMNode().getAttribute('tabIndex')).toBe('-1');
+        }
     });
 });
 
-test('Clicking on a tile calls the provided callback', () => {
+test('When a tile is selected, only that tile has the TilePanel__tile--selected class, aria-checked=true, and tabIndex=0; all other tiles have aria-checked=false and tabIndex=-1', () => {
+    expect.assertions(52);
+
+    const selectedTileCode = '2';
+    // The tile with code '2' is at index 5 in the tile panel
+    const expectedSelectedTileIndex = 5;
+
+    const { wrapper } = createComponent(selectedTileCode, 'default');
+    const tiles = wrapper.find('button');
+    expect(tiles).toHaveLength(17);
+    tiles.forEach((tile, i) => {
+        if (i === expectedSelectedTileIndex) {
+            expect(tile.hasClass(selectedTileClass)).toBe(true);
+            expect(tile.getDOMNode().getAttribute('aria-checked')).toBe('true');
+            expect(tile.getDOMNode().getAttribute('tabIndex')).toBe('0');
+        } else {
+            expect(tile.hasClass(selectedTileClass)).toBe(false);
+            expect(tile.getDOMNode().getAttribute('aria-checked')).toBe('false');
+            expect(tile.getDOMNode().getAttribute('tabIndex')).toBe('-1');
+        }
+    });
+});
+
+test.each([
+    ['ArrowRight', '0', '1'],
+    ['ArrowRight', 'D', '0'],
+    ['ArrowDown', '0', '1'],
+    ['ArrowDown', 'D', '0'],
+    ['ArrowLeft', '0', 'D'],
+    ['ArrowLeft', '1', '0'],
+    ['ArrowUp', '0', 'D'],
+    ['ArrowUp', '1', '0']
+])('%s on TileCode %s, expect TileCode %s', (key, startTileCode, expectedTileCode) => {
     const { wrapper, selectTileHandler } = createComponent(null, 'default');
-    wrapper.find('button[data-tilecode="2"]').simulate('click');
+    const tile = wrapper.find(`button[data-tilecode="${startTileCode}"]`);
+    tile.simulate('keydown', makeKeyDownEvent(tile.getDOMNode(), key));
     expect(selectTileHandler.mock.calls.length).toBe(1);
-    expect(selectTileHandler.mock.calls[0][0]).toBe('2');
+    expect(selectTileHandler.mock.calls[0][0]).toBe(expectedTileCode);
 });
 
-test('Mouse down on a tile calls the provided callback', () => {
+test('Clicking on a tile calls the provided callback', () => {
     const { wrapper, selectTileHandler } = createComponent(null, 'default');
-    wrapper.find('button[data-tilecode="2"]').simulate('mousedown');
+    wrapper.find('button[data-tilecode="2"]').simulate('click');
     expect(selectTileHandler.mock.calls.length).toBe(1);
     expect(selectTileHandler.mock.calls[0][0]).toBe('2');
 });
