Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[react-interactions] FocusTable key press bound propgataion (#16895)

Browse Source
This commit is contained in:
Dominic Gannaway
2019-09-25 21:12:39 +02:00
committed by GitHub
parent fa1a326227
commit 4bb0e96b4b
2 changed files with 76 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-interactions/accessibility/src/FocusTable.js
Vendored
+7 -4
View File
@@ -101,6 +101,7 @@ function getRows(currentCell: ReactScopeMethods) {
function triggerNavigateOut(
currentCell: ReactScopeMethods,
direction: 'left' | 'right' | 'up' | 'down',
event,
): void {
const row = currentCell.getParent();
if (row !== null && row.getProps().type === 'row') {
@@ -122,9 +123,11 @@ function triggerNavigateOut(
}
};
onKeyboardOut(direction, focusTableByID);
return;
}
}
}
event.continuePropagation();
}
export function createFocusTable(scope: ReactScope): Array<React.Component> {
@@ -162,7 +165,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
focusCellByIndex(row, cellIndex);
event.preventDefault();
} else if (rowIndex === 0) {
triggerNavigateOut(currentCell, 'up');
triggerNavigateOut(currentCell, 'up', event);
}
}
}
@@ -175,7 +178,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
if (rows !== null) {
if (rowIndex !== -1) {
if (rowIndex === rows.length - 1) {
triggerNavigateOut(currentCell, 'down');
triggerNavigateOut(currentCell, 'down', event);
} else {
const row = rows[rowIndex + 1];
focusCellByIndex(row, cellIndex);
@@ -193,7 +196,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
focusCell(cells[rowIndex - 1]);
event.preventDefault();
} else if (rowIndex === 0) {
triggerNavigateOut(currentCell, 'left');
triggerNavigateOut(currentCell, 'left', event);
}
}
return;
@@ -203,7 +206,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
if (cells !== null) {
if (rowIndex !== -1) {
if (rowIndex === cells.length - 1) {
triggerNavigateOut(currentCell, 'right');
triggerNavigateOut(currentCell, 'right', event);
} else {
focusCell(cells[rowIndex + 1]);
event.preventDefault();
packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js
+69
View File
@@ -257,5 +257,74 @@ describe('FocusTable', () => {
});
expect(document.activeElement.textContent).toBe('A3');
});
it('handles nested tables correctly', () => {
const CustomScope = React.unstable_createScope((type, props) => {
return type === 'input';
});
const [FocusTable, FocusRow, FocusCell] = createFocusTable(CustomScope);
const firstRef = React.createRef();
function Test() {
return (
<FocusTable>
<div>
<FocusRow>
<FocusCell>
<FocusTable>
<FocusRow>
<FocusCell>
<input
placeholder="Nested A1"
tabIndex={0}
ref={firstRef}
/>
</FocusCell>
<FocusCell>
<input placeholder="Nested B1" tabIndex={0} />
</FocusCell>
</FocusRow>
</FocusTable>
</FocusCell>
<FocusCell>
<input placeholder="B1" tabIndex={-1} />
</FocusCell>
<FocusCell>
<input placeholder="C1" tabIndex={-1} />
</FocusCell>
</FocusRow>
</div>
<div>
<FocusRow>
<FocusCell>
<input placeholder="A2" tabIndex={-1} />
</FocusCell>
<FocusCell>
<input placeholder="B2" tabIndex={-1} />
</FocusCell>
<FocusCell>
<input placeholder="C1" tabIndex={-1} />
</FocusCell>
</FocusRow>
</div>
</FocusTable>
);
}
ReactDOM.render(<Test />, container);
firstRef.current.focus();
const nestedA1 = createEventTarget(document.activeElement);
nestedA1.keydown({
key: 'ArrowRight',
});
expect(document.activeElement.placeholder).toBe('Nested B1');
const nestedB1 = createEventTarget(document.activeElement);
nestedB1.keydown({
key: 'ArrowRight',
});
expect(document.activeElement.placeholder).toBe('B1');
});
});
});