[react-interactions] Add wrapping support to FocusList/FocusTable (#16903)

Author: trueadm

packages/react-interactions/accessibility/src/FocusList.js

@@ -15,19 +15,22 @@ import {useKeyboard} from 'react-interactions/events/keyboard';
 
 typeFocusItemProps={
 children?: React.Node,
+onKeyDown?: KeyboardEvent=>void,
 };
 
 typeFocusListProps={|
 children: React.Node,
 portrait: boolean,
+wrap?: boolean,
 |};
 
 const{useRef}=React;
 
-functionfocusListItem(cell: ReactScopeMethods): void{
+functionfocusListItem(cell: ReactScopeMethods,event: KeyboardEvent): void{
 consttabbableNodes=cell.getScopedNodes();
 if(tabbableNodes!==null&&tabbableNodes.length>0){
 tabbableNodes[0].focus();
+event.preventDefault();
 }
 }
 
@@ -38,7 +41,10 @@ function getPreviousListItem(
 constitems=list.getChildren();
 if(items!==null){
 constcurrentItemIndex=items.indexOf(currentItem);
-if(currentItemIndex>0){
+constwrap=getListWrapProp(currentItem);
+if(currentItemIndex===0&&wrap){
+returnitems[items.length-1]||null;
+}elseif(currentItemIndex>0){
 returnitems[currentItemIndex-1]||null;
 }
 }
@@ -52,25 +58,38 @@ function getNextListItem(
 constitems=list.getChildren();
 if(items!==null){
 constcurrentItemIndex=items.indexOf(currentItem);
-if(currentItemIndex!==-1&&currentItemIndex!==items.length-1){
+constwrap=getListWrapProp(currentItem);
+constend=currentItemIndex===items.length-1;
+if(end&&wrap){
+returnitems[0]||null;
+}elseif(currentItemIndex!==-1&&!end){
 returnitems[currentItemIndex+1]||null;
 }
 }
 returnnull;
 }
 
+functiongetListWrapProp(currentItem: ReactScopeMethods): boolean{
+constlist=currentItem.getParent();
+if(list!==null){
+constlistProps=list.getProps();
+return(listProps.type==='list'&&listProps.wrap)||false;
+}
+returnfalse;
+}
+
 exportfunctioncreateFocusList(scope: ReactScope): Array<React.Component>{
 constTableScope=React.unstable_createScope(scope.fn);
 
-functionList({children, portrait}): FocusListProps{
+functionList({children, portrait, wrap}): FocusListProps{
 return(
-<TableScopetype="list"portrait={portrait}>
+<TableScopetype="list"portrait={portrait}wrap={wrap}>
 {children}
 </TableScope>
 );
 }
 
-functionItem({children}): FocusItemProps{
+functionItem({children, onKeyDown}): FocusItemProps{
 constscopeRef=useRef(null);
 constkeyboard=useKeyboard({
 onKeyDown(event: KeyboardEvent): void{
@@ -88,8 +107,7 @@ export function createFocusList(scope: ReactScope): Array<React.Component> {
 currentItem,
 );
 if(previousListItem){
-event.preventDefault();
-focusListItem(previousListItem);
+focusListItem(previousListItem,event);
 return;
 }
 }
@@ -99,8 +117,7 @@ export function createFocusList(scope: ReactScope): Array<React.Component> {
 if(portrait){
 constnextListItem=getNextListItem(list,currentItem);
 if(nextListItem){
-event.preventDefault();
-focusListItem(nextListItem);
+focusListItem(nextListItem,event);
 return;
 }
 }
@@ -113,8 +130,7 @@ export function createFocusList(scope: ReactScope): Array<React.Component> {
 currentItem,
 );
 if(previousListItem){
-event.preventDefault();
-focusListItem(previousListItem);
+focusListItem(previousListItem,event);
 return;
 }
 }
@@ -124,8 +140,7 @@ export function createFocusList(scope: ReactScope): Array<React.Component> {
 if(!portrait){
 constnextListItem=getNextListItem(list,currentItem);
 if(nextListItem){
-event.preventDefault();
-focusListItem(nextListItem);
+focusListItem(nextListItem,event);
 return;
 }
 }
@@ -134,6 +149,9 @@ export function createFocusList(scope: ReactScope): Array<React.Component> {
 }
 }
 }
+if(onKeyDown){
+onKeyDown(event);
+}
 event.continuePropagation();
 },
 });

packages/react-interactions/accessibility/src/FocusTable.js

@@ -15,6 +15,7 @@ import {useKeyboard} from 'react-interactions/events/keyboard';
 
 typeFocusCellProps={
 children?: React.Node,
+onKeyDown?: KeyboardEvent=>void,
 };
 
 typeFocusRowProps={
@@ -28,6 +29,7 @@ type FocusTableProps = {|
 direction: 'left'|'right'|'up'|'down',
 focusTableByID: (id: string)=>void,
 )=>void,
+wrap?: boolean,
 |};
 
 const{useRef}=React;
@@ -54,19 +56,26 @@ export function focusFirstCellOnTable(table: ReactScopeMethods): void {
 }
 }
 
-functionfocusCell(cell: ReactScopeMethods): void{
+functionfocusCell(cell: ReactScopeMethods,event?: KeyboardEvent): void{
 const tabbableNodes =cell.getScopedNodes();
 if(tabbableNodes!==null&&tabbableNodes.length>0){
 tabbableNodes[0].focus();
+if(event){
+event.preventDefault();
+}
 }
 }
 
-functionfocusCellByIndex(row: ReactScopeMethods,cellIndex: number): void{
+functionfocusCellByIndex(
+row: ReactScopeMethods,
+cellIndex: number,
+event?: KeyboardEvent,
+): void{
 const cells =row.getChildren();
 if(cells!==null){
  const cell=cells[cellIndex];
 if(cell){
-focusCell(cell);
+focusCell(cell,event);
 }
 }
 }
@@ -130,12 +139,27 @@ function triggerNavigateOut(
 event.continuePropagation();
 }
 
+functiongetTableWrapProp(currentCell: ReactScopeMethods): boolean{
+constrow=currentCell.getParent();
+if(row!==null&&row.getProps().type==='row'){
+consttable=row.getParent();
+if(table!==null){
+returntable.getProps().wrap||false;
+}
+}
+returnfalse;
+}
+
 exportfunctioncreateFocusTable(scope: ReactScope): Array<React.Component>{
 constTableScope=React.unstable_createScope(scope.fn);
 
-functionTable({children, onKeyboardOut, id}): FocusTableProps{
+functionTable({children, onKeyboardOut, id, wrap}): FocusTableProps{
 return(
-<TableScopetype="table"onKeyboardOut={onKeyboardOut}id={id}>
+<TableScope
+type="table"
+onKeyboardOut={onKeyboardOut}
+id={id}
+wrap={wrap}>
 {children}
 </TableScope>
 );
@@ -145,7 +169,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
 return<TableScopetype="row">{children}</TableScope>;
 }
 
-functionCell({children}): FocusCellProps{
+functionCell({children, onKeyDown}): FocusCellProps{
 constscopeRef=useRef(null);
 constkeyboard=useKeyboard({
 onKeyDown(event: KeyboardEvent): void{
@@ -162,10 +186,15 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
 if(rows!==null){
 if(rowIndex>0){
 constrow=rows[rowIndex-1];
-focusCellByIndex(row,cellIndex);
-event.preventDefault();
+focusCellByIndex(row,cellIndex,event);
 }elseif(rowIndex===0){
-triggerNavigateOut(currentCell,'up',event);
+ const wrap=getTableWrapProp(currentCell);
+if(wrap){
+ const row=rows[rows.length-1];
+focusCellByIndex(row,cellIndex,event);
+}else{
+triggerNavigateOut(currentCell,'up',event);
+}
 }
 }
 }
@@ -178,11 +207,16 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
 if(rows!==null){
 if(rowIndex!==-1){
 if(rowIndex===rows.length-1){
-triggerNavigateOut(currentCell,'down',event);
+constwrap=getTableWrapProp(currentCell);
+if(wrap){
+constrow=rows[0];
+focusCellByIndex(row,cellIndex,event);
+}else{
+triggerNavigateOut(currentCell,'down',event);
+}
 }else{
 constrow=rows[rowIndex+1];
-focusCellByIndex(row,cellIndex);
-event.preventDefault();
+focusCellByIndex(row,cellIndex,event);
 }
 }
 }
@@ -196,7 +230,12 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
 focusCell(cells[rowIndex-1]);
 event.preventDefault();
 }elseif(rowIndex===0){
-triggerNavigateOut(currentCell,'left',event);
+constwrap=getTableWrapProp(currentCell);
+if(wrap){
+focusCell(cells[cells.length-1],event);
+}else{
+triggerNavigateOut(currentCell, 'left',event);
+}
 }
 }
 return;
@@ -206,16 +245,23 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
 if(cells!==null){
 if(rowIndex!==-1){
 if(rowIndex===cells.length-1){
-triggerNavigateOut(currentCell,'right',event);
+constwrap=getTableWrapProp(currentCell);
+if(wrap){
+focusCell(cells[0],event);
+}else{
+triggerNavigateOut(currentCell,'right', event);
+}
 }else{
-focusCell(cells[rowIndex+1]);
-event.preventDefault();
+focusCell(cells[rowIndex+1],event);
 }
 }
 }
 return;
 }
 }
+if(onKeyDown){
+onKeyDown(event);
+}
 },
 });
 return(

packages/react-interactions/accessibility/src/__tests__/FocusList-test.internal.js

@@ -43,8 +43,8 @@ describe('FocusList', () => {
 functioncreateFocusListComponent(){
 const[FocusList,FocusItem]=createFocusList(TabbableScope);
 
-return({portrait})=>(
-<FocusListportrait={portrait}>
+return({portrait, wrap})=>(
+<FocusListportrait={portrait}wrap={wrap}>
 <ul>
 <FocusItem>
 <litabIndex={0}>Item 1</li>
@@ -125,5 +125,36 @@ describe('FocusList', () => {
 });
 expect(document.activeElement.textContent).toBe('Item 3');
 });
+
+it('handles keyboard arrow operations (portrait) with wrapping enabled',()=>{
+constTest=createFocusListComponent();
+
+ReactDOM.render(<Testportrait={true}wrap={true}/>,container);
+constlistItems=document.querySelectorAll('li');
+letfirstListItem=createEventTarget(listItems[0]);
+firstListItem.focus();
+firstListItem.keydown({
+key: 'ArrowDown',
+});
+expect(document.activeElement.textContent).toBe('Item 2');
+
+constsecondListItem=createEventTarget(document.activeElement);
+secondListItem.keydown({
+key: 'ArrowDown',
+});
+expect(document.activeElement.textContent).toBe('Item 3');
+
+constthirdListItem=createEventTarget(document.activeElement);
+thirdListItem.keydown({
+key: 'ArrowDown',
+});
+expect(document.activeElement.textContent).toBe('Item 1');
+
+firstListItem=createEventTarget(document.activeElement);
+firstListItem.keydown({
+key: 'ArrowUp',
+});
+expect(document.activeElement.textContent).toBe('Item 3');
+});
 });
 });

packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js

@@ -45,8 +45,8 @@ describe('FocusTable', () => {
 TabbableScope,
 );
 
-return({onKeyboardOut, id})=>(
-<FocusTableonKeyboardOut={onKeyboardOut}id={id}>
+return({onKeyboardOut, id, wrap})=>(
+<FocusTableonKeyboardOut={onKeyboardOut}id={id}wrap={wrap}>
 <table>
 <tbody>
 <FocusTableRow>
@@ -326,5 +326,36 @@ describe('FocusTable', () => {
 });
 expect(document.activeElement.placeholder).toBe('B1');
 });
+
+it('handles keyboard arrow operations with wrapping enabled',()=>{
+constTest=createFocusTableComponent();
+
+ReactDOM.render(<Testwrap={true}/>,container);
+constbuttons=document.querySelectorAll('button');
+leta1=createEventTarget(buttons[0]);
+a1.focus();
+a1.keydown({
+key: 'ArrowRight',
+});
+expect(document.activeElement.textContent).toBe('A2');
+
+consta2=createEventTarget(document.activeElement);
+a2.keydown({
+key: 'ArrowRight',
+});
+expect(document.activeElement.textContent).toBe('A3');
+
+consta3=createEventTarget(document.activeElement);
+a3.keydown({
+key: 'ArrowRight',
+});
+expect(document.activeElement.textContent).toBe('A1');
+
+a1=createEventTarget(document.activeElement);
+a1.keydown({
+key: 'ArrowLeft',
+});
+expect(document.activeElement.textContent).toBe('A3');
+});
 });
 });