大表格内容切换的无障碍设计：下拉菜单与屏幕阅读器优化

<div className={styles.csvList}>
  <label htmlFor="csv-table-selector">{label}</label>
  <Dropdown {...}/> {/* 下拉选择组件 */}
  {selectedTable && (
    <div id="selected-csv-table" role="region" aria-live="polite">
      <h2>{selectedTable.name}</h2>
      <Table {...}/> {/* 动态加载的表格组件 */}
    </div>
  )}
</div>

<div role="tablist" aria-label="选择表格">
  <button role="tab"
          aria-selected="true"
          aria-controls="table1-panel"
          id="table1-tab"
          tabindex="0">
    表格一
  </button>
  <button role="tab"
          aria-selected="false"
          aria-controls="table2-panel"
          id="table2-tab"
          tabindex="-1">
    表格二
  </button>
</div>

<div id="table1-panel"
     role="tabpanel"
     aria-labelledby="table1-tab">
  <h2>表格一数据</h2>
  <table>
    <!-- 表格一内容 -->
  </table>
</div>

<div id="table2-panel"
     role="tabpanel"
     aria-labelledby="table2-tab"
     hidden> <!-- 默认隐藏 -->
  <h2>表格二数据</h2>
  <table>
    <!-- 表格二内容 -->
  </table>
</div>

// 假设这是React组件中的逻辑
const DropdownSwitcher = ({ tables, label }) => {
  const [selectedTable, setSelectedTable] = React.useState(tables[0]);
  const tableRef = React.useRef(null); // 用于引用表格元素

  const handleSelectChange = (event) => {
    const newTableId = event.target.value;
    const newTable = tables.find(t => t.id === newTableId);
    setSelectedTable(newTable);
  };

  React.useEffect(() => {
    // 当selectedTable变化时，将焦点设置到新表格上
    if (tableRef.current) {
      // 为了确保屏幕阅读器能正确识别，最好让表格本身可聚焦
      // 或者将焦点设置到表格的第一个可交互元素（如caption或第一个<th>）
      // 对于整个表格，可以给它添加tabindex="-1"使其可程序化聚焦
      tableRef.current.focus();
    }
  }, [selectedTable]);

  return (
    <div className={styles.csvList}>
      <label htmlFor="csv-table-selector">{label}</label>
      <select id="csv-table-selector" onChange={handleSelectChange} value={selectedTable.id}>
        {tables.map(table => (
          <option key={table.id} value={table.id}>{table.name}</option>
        ))}
      </select>

      {selectedTable && (
        <div id="selected-csv-table" role="region" aria-label={`当前显示：${selectedTable.name}`}>
          {/* 为表格添加tabindex="-1"使其可程序化聚焦 */}
          <h2 id={`table-title-${selectedTable.id}`}>{selectedTable.name}</h2>
          <TableComponent
            ref={tableRef} // 将ref传递给表格组件或其容器
            data={selectedTable.data}
            tabIndex={-1} // 使表格容器可聚焦
            aria-labelledby={`table-title-${selectedTable.id}`}
          />
        </div>
      )}
    </div>
  );
};

// 假设TableComponent内部渲染实际的HTML表格
const TableComponent = React.forwardRef(({ data, ...props }, ref) => (
  <table {...props} ref={ref}>
    {/* 表格内容 */}
  </table>
));