Astryx Table 高级技巧WAI-ARIA 键盘导航与右键上下文菜单完整指南【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx是一个完全可定制、面向 AI 智能体agent ready的开源 React 设计系统。本文将带你掌握 Astryx Table 组件的两项高级能力基于WAI-ARIA 语义的键盘导航以及与ContextMenu深度集成的右键上下文菜单——让数据表格对屏幕阅读器友好又让桌面用户获得原生级的操作体验。为什么是 Astryx TableAstryx Table 是一款数据驱动的表格组件密度density、分隔线、斑马纹、悬停高亮一应俱全核心能力通过**插件管道plugin pipeline**按需叠加——排序、选择、分页、列设置、行展开……只引入你需要的功能。它的无障碍设计同样值得一提表头单元格默认输出scopecol让屏幕阅读器正确关联列与数据分页场景还能主动声明行序号。以下源码位于 packages/core/src/Table/ 目录。键盘导航WAI-ARIA 行索引的正确打开方式分页表格如何告诉辅助技术第几行 / 共几行ARIA 规范要求虚拟滚动或分页的表格通过aria-rowindex当前行号和aria-rowcount总行数向屏幕阅读器汇报位置。Astryx Table 用两个 prop 就能搞定rowIndexStart第一行渲染行的 1 起始 ARIA 行号。分页视图传入(page - 1) * pageSize 1行号即反映在全量数据中的真实位置rowCount所有页面的总行数。省略时按 ARIA 的未知数量惯例输出-1。相关实现见 BaseTable.tsx只有在你显式传入这两个属性之一时表格才会输出aria-rowindex/aria-rowcount否则保持原生table语义、零额外开销。 提示行序号是无障碍关注点与页面上是否显示可见的序号列无关——即使你隐藏了索引列也建议传入这两个属性。插件系统如何承载键盘交互Table 内部通过transformColumns / transformHeaderCell / transformBodyCell / transformBodyRow等管道让插件修改任意一层渲染属性见 BaseTable.tsx 的管道实现。每个插件只负责自己的领域useTableSortable处理表头点击排序与排序方向useTableSelection处理行选择useTableFiltering处理过滤输入框的键盘事件……单个插件抛错会被 try-catch 隔离不会拖垮整个表格。右键上下文菜单给表格加隐藏菜单三步接入 contextMenuActionsAstryx 的 ContextMenu 组件在光标处弹出菜单利用 CSS 锚点定位滚动时跟随内容、视口边缘自动翻转。它支持数据驱动items数组可用{type:divider}分组、variant:destructive标记危险操作和 JSX 复合组件menuContent两种模式。在 Table 里插件通过contextMenuActions把动作注入表头或单元格插件在transformHeaderCell/transformBodyCell中设置contextMenuActions静态数组或懒求值函数tableContextMenu.tsx 中的wrapInTableContextMenu将元素包裹进 ContextMenu多个插件的动作按group字段自动聚合并插入分隔线——第一个插件排最前无分组的动作排在末尾。懒求值getter 形式是个性能细节动作数组含闭包只在用户真正右键打开菜单时才计算并缓存避免为每个单元格每次渲染都构建一份动作数组详见 tableContextMenu.tsx。无障碍菜单也是全键盘可用的很多自研右键菜单只支持鼠标Astryx ContextMenu 则完整实现了 WAI-ARIA 菜单模式源码见 ContextMenu.tsx方向键上下移动焦点基于 useListFocus 的 roving tabindexEnter / 空格激活当前菜单项Esc关闭菜单并还原焦点到打开前所在的元素焦点不会掉进bodyTab按 APG 规范关闭菜单并继续页面导航首字符搜索typeahead直接输入菜单项首字母即可跳转焦点ShiftF10 / 菜单键无鼠标用户也能唤起菜单组件会检测键盘触发的contextmenu事件并将菜单锚定在触发元素左下角ContextMenu.tsx触屏长按iOS Safari 长按不产生contextmenu事件组件通过 useLongPress 手动补位labelprop 提供打开时的可访问名称isDisabled可一键回退到浏览器原生菜单。⚠️ 官方最佳实践不要把右键菜单作为重要操作的唯一入口——并非所有用户都知道要右键见 ContextMenu.doc.mjs 中的 bestPractices。实战Sortable 插件自带的右键排序useTableSortable插件已内置contextMenuActions右键表头即可在升序 / 降序 / 取消排序之间切换当前激活的排序方向会在菜单项上显示对勾checked 状态代码见 useTableSortable.tsx。你可以在自己的插件里用resolveContextActions(props.contextMenuActions)先透传上游动作、再追加自定义动作实现菜单项无冲突聚合。快速上手清单 目标做法参考表格可被屏幕阅读器正确朗读传入rowIndexStartrowCountBaseTable.tsx表头/单元格右键菜单插件中设置contextMenuActionstableContextMenu.tsx菜单分组与对勾状态使用group、checked字段toContextMenuOptions交互演示运行 Storybook 中的 ContextMenu / Table 系列故事ContextMenu.stories.tsx、TableSelection.stories.tsxAstryx 的完整组件目录100 组件、主题系统与 CLI 可从仓库根目录 README.md 与 packages/core/README.md 入手核心组件源码集中在 packages/core/src/。把无障碍当作默认行为而非附加功能正是 Astryx 值得推荐的核心理由。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Astryx Table 高级技巧：WAI-ARIA 键盘导航与右键上下文菜单完整指南
Astryx Table 高级技巧WAI-ARIA 键盘导航与右键上下文菜单完整指南【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx是一个完全可定制、面向 AI 智能体agent ready的开源 React 设计系统。本文将带你掌握 Astryx Table 组件的两项高级能力基于WAI-ARIA 语义的键盘导航以及与ContextMenu深度集成的右键上下文菜单——让数据表格对屏幕阅读器友好又让桌面用户获得原生级的操作体验。为什么是 Astryx TableAstryx Table 是一款数据驱动的表格组件密度density、分隔线、斑马纹、悬停高亮一应俱全核心能力通过**插件管道plugin pipeline**按需叠加——排序、选择、分页、列设置、行展开……只引入你需要的功能。它的无障碍设计同样值得一提表头单元格默认输出scopecol让屏幕阅读器正确关联列与数据分页场景还能主动声明行序号。以下源码位于 packages/core/src/Table/ 目录。键盘导航WAI-ARIA 行索引的正确打开方式分页表格如何告诉辅助技术第几行 / 共几行ARIA 规范要求虚拟滚动或分页的表格通过aria-rowindex当前行号和aria-rowcount总行数向屏幕阅读器汇报位置。Astryx Table 用两个 prop 就能搞定rowIndexStart第一行渲染行的 1 起始 ARIA 行号。分页视图传入(page - 1) * pageSize 1行号即反映在全量数据中的真实位置rowCount所有页面的总行数。省略时按 ARIA 的未知数量惯例输出-1。相关实现见 BaseTable.tsx只有在你显式传入这两个属性之一时表格才会输出aria-rowindex/aria-rowcount否则保持原生table语义、零额外开销。 提示行序号是无障碍关注点与页面上是否显示可见的序号列无关——即使你隐藏了索引列也建议传入这两个属性。插件系统如何承载键盘交互Table 内部通过transformColumns / transformHeaderCell / transformBodyCell / transformBodyRow等管道让插件修改任意一层渲染属性见 BaseTable.tsx 的管道实现。每个插件只负责自己的领域useTableSortable处理表头点击排序与排序方向useTableSelection处理行选择useTableFiltering处理过滤输入框的键盘事件……单个插件抛错会被 try-catch 隔离不会拖垮整个表格。右键上下文菜单给表格加隐藏菜单三步接入 contextMenuActionsAstryx 的 ContextMenu 组件在光标处弹出菜单利用 CSS 锚点定位滚动时跟随内容、视口边缘自动翻转。它支持数据驱动items数组可用{type:divider}分组、variant:destructive标记危险操作和 JSX 复合组件menuContent两种模式。在 Table 里插件通过contextMenuActions把动作注入表头或单元格插件在transformHeaderCell/transformBodyCell中设置contextMenuActions静态数组或懒求值函数tableContextMenu.tsx 中的wrapInTableContextMenu将元素包裹进 ContextMenu多个插件的动作按group字段自动聚合并插入分隔线——第一个插件排最前无分组的动作排在末尾。懒求值getter 形式是个性能细节动作数组含闭包只在用户真正右键打开菜单时才计算并缓存避免为每个单元格每次渲染都构建一份动作数组详见 tableContextMenu.tsx。无障碍菜单也是全键盘可用的很多自研右键菜单只支持鼠标Astryx ContextMenu 则完整实现了 WAI-ARIA 菜单模式源码见 ContextMenu.tsx方向键上下移动焦点基于 useListFocus 的 roving tabindexEnter / 空格激活当前菜单项Esc关闭菜单并还原焦点到打开前所在的元素焦点不会掉进bodyTab按 APG 规范关闭菜单并继续页面导航首字符搜索typeahead直接输入菜单项首字母即可跳转焦点ShiftF10 / 菜单键无鼠标用户也能唤起菜单组件会检测键盘触发的contextmenu事件并将菜单锚定在触发元素左下角ContextMenu.tsx触屏长按iOS Safari 长按不产生contextmenu事件组件通过 useLongPress 手动补位labelprop 提供打开时的可访问名称isDisabled可一键回退到浏览器原生菜单。⚠️ 官方最佳实践不要把右键菜单作为重要操作的唯一入口——并非所有用户都知道要右键见 ContextMenu.doc.mjs 中的 bestPractices。实战Sortable 插件自带的右键排序useTableSortable插件已内置contextMenuActions右键表头即可在升序 / 降序 / 取消排序之间切换当前激活的排序方向会在菜单项上显示对勾checked 状态代码见 useTableSortable.tsx。你可以在自己的插件里用resolveContextActions(props.contextMenuActions)先透传上游动作、再追加自定义动作实现菜单项无冲突聚合。快速上手清单 目标做法参考表格可被屏幕阅读器正确朗读传入rowIndexStartrowCountBaseTable.tsx表头/单元格右键菜单插件中设置contextMenuActionstableContextMenu.tsx菜单分组与对勾状态使用group、checked字段toContextMenuOptions交互演示运行 Storybook 中的 ContextMenu / Table 系列故事ContextMenu.stories.tsx、TableSelection.stories.tsxAstryx 的完整组件目录100 组件、主题系统与 CLI 可从仓库根目录 README.md 与 packages/core/README.md 入手核心组件源码集中在 packages/core/src/。把无障碍当作默认行为而非附加功能正是 Astryx 值得推荐的核心理由。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考