Open adamsamec opened 1 year ago
When the useTableCompositeNavigation hook is used on a table, and when the aria-expanded attribute is applied on the table row, the arrow key navigation stops working.
import * as React from 'react'; import { useTableCompositeNavigation, Button, } from '@fluentui/react-components'; export const TreeGrid: React.FC<IRecentMeetingsTreeRendererrerProps> = ({ recentMeetings }) => { const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation(); return ( <table role= "treegrid" {...tableTabsterAttribute } > <tbody> <tr role="row" tabIndex = { 0} aria - level={ 1 } aria - expanded={ true } {...tableRowTabsterAttribute } > <td role="gridcell" tabIndex = { 0} colSpan = { 4} > Meeting with manager < /td> < /tr> < tr role = "row" tabIndex = { 0} aria - level={ 2 } {...tableRowTabsterAttribute } > <td role="gridcell" tabIndex = { 0} > Re: meeting with manager < /td> < td role = "gridcell" > <Button>Agenda and notes < /Button></td > <td role="gridcell" > <Button>Chat with participants < /Button></td > <td role= "gridcell" > <Button>View recap < /Button></td > </tr> < tr role = "row" tabIndex = { 0} aria - level={ 2 } {...tableRowTabsterAttribute } > <td role="gridcell" tabIndex = { 0} > Re 2: meeting with manager < /td> < td role = "gridcell" > <Button>Agenda and notes < /Button></td > <td role="gridcell" > <Button>Chat with participants < /Button></td > <td role= "gridcell" > <Button>View recap < /Button></td > </tr> < /tbody> < /table> ); };
Simplified repro https://codesandbox.io/s/sweet-germain-dpz4s5?file=/example.tsx
Problem description
When the useTableCompositeNavigation hook is used on a table, and when the aria-expanded attribute is applied on the table row, the arrow key navigation stops working.
Code example