microsoft / tabster

Web Application Keyboard Navigation Tools
https://tabster.io
MIT License
122 stars 36 forks source link

Mover ignores input from elements with `aria-expanded` #312

Open adamsamec opened 1 year ago

adamsamec commented 1 year ago

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

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>

  );
};
ling1726 commented 1 year ago

Simplified repro https://codesandbox.io/s/sweet-germain-dpz4s5?file=/example.tsx