diff --git a/change/@fluentui-react-table-7851dfd8-eeb5-4582-a635-cfe17afbbda7.json b/change/@fluentui-react-table-7851dfd8-eeb5-4582-a635-cfe17afbbda7.json new file mode 100644 index 0000000000000..0dd5a56f03c4d --- /dev/null +++ b/change/@fluentui-react-table-7851dfd8-eeb5-4582-a635-cfe17afbbda7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat(react-table): Allow Left arrow to focus back to row in composite navigation", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx index 14251ed52757f..a4333f0ae5011 100644 --- a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx +++ b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.cy.tsx @@ -171,6 +171,8 @@ describe('DataGrid', () => { cy.focused().should('have.text', '1-1').should('have.attr', 'role', 'gridcell').realPress('ArrowRight'); cy.focused().should('have.text', '1-2').should('have.attr', 'role', 'gridcell').realPress('ArrowDown'); cy.focused().should('have.attr', 'role', 'row').realPress('ArrowRight'); + cy.focused().should('have.text', '2-1').should('have.attr', 'role', 'gridcell').realPress('ArrowLeft'); + cy.focused().should('have.attr', 'role', 'row').should('have.text', '2-12-22-3').realPress('ArrowRight'); cy.focused().should('have.text', '2-1').should('have.attr', 'role', 'gridcell').realPress('Tab'); cy.focused().should('have.text', 'After').realPress(['Shift', 'Tab']); cy.focused().should('have.attr', 'role', 'row').should('have.text', '2-12-22-3').realPress('PageUp'); diff --git a/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts b/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts index 60c0ad99ce3e7..ac5af6c6803ef 100644 --- a/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts +++ b/packages/react-components/react-table/library/src/hooks/useTableCompositeNavigation.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys'; +import { ArrowDown, ArrowRight, ArrowUp, ArrowLeft } from '@fluentui/keyboard-keys'; import { useArrowNavigationGroup, useFocusableGroup, @@ -62,7 +62,11 @@ export function useTableCompositeNavigation(): { return false; })(); - // Escape groupper focus trap before arrow down + // Escape groupper focus trap before arrow left, arrow down or arrow up + if (e.key === ArrowLeft && isInCell) { + activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape })); + return; + } if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) { activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));