Closed miss121321 closed 6 months ago
Hi mfuu, 我在基于您开源的这个组件扩展开发功能,以支持Accessibility 的键盘交互。 我使用div 的方式做了一个类似表格,除了支持鼠标拖拽排序外,还需要支持使用键盘的方式进行交互,当使用tab 按键进入table 内后,使用上下左右方向按键可以切换哪个单元格可以聚焦,这个需求很容易实现,找到当前列表中所有可聚焦的元素,放入到二维数组中,使用方向键改变横向或者竖向的坐标就可以找到二维数组中哪个元素可聚焦。 使用键盘排序的大致做法是,先聚焦到指定单元格的排序按钮上,按回车标记这个排序按钮处于选中状态,监听上下按键事件,让选中的排序按钮所在的行与上一行或者下一行交互位置,位置调整到指定的行后,按回车键释放选中,此时再按上下左右键就只是聚焦元素。
我在实现这个需求的时候,最大的障碍是虚拟列表变化后,需要重新计算这个二维数组,我考虑过使用 MutationObserver 监听dom 变化,但是这个事件会被多次触发,效果不太理想,如果你能暴露 range 的变化,这个需求实现就能大幅的降低开发难度。
所以,您能考虑把range change 的时候派发一个事件吗?
附上W3 关于表格的accessibility 指导案例: https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/
它这个只能实现简单固定内容的聚焦,如果是虚拟滚动的,难度会大很多。 现在开源的组件里很少有支持虚拟滚动和拖拽排序的,您的这个开源组件如果文档和demo 更详细一些,我想它会被更多的人喜欢和使用,如果您能再支持accessibility,它将会成为第一个支持虚拟滚动+ 排序+ Accessibility的开源组件,也理应会成为类似需求的首选。
@miss121321 感謝您的认可和使用,我在最新版本(3.2.5)中添加了rangeChange事件
rangeChange
非常感谢您的响应和支持!
Hi mfuu, 我在基于您开源的这个组件扩展开发功能,以支持Accessibility 的键盘交互。 我使用div 的方式做了一个类似表格,除了支持鼠标拖拽排序外,还需要支持使用键盘的方式进行交互,当使用tab 按键进入table 内后,使用上下左右方向按键可以切换哪个单元格可以聚焦,这个需求很容易实现,找到当前列表中所有可聚焦的元素,放入到二维数组中,使用方向键改变横向或者竖向的坐标就可以找到二维数组中哪个元素可聚焦。 使用键盘排序的大致做法是,先聚焦到指定单元格的排序按钮上,按回车标记这个排序按钮处于选中状态,监听上下按键事件,让选中的排序按钮所在的行与上一行或者下一行交互位置,位置调整到指定的行后,按回车键释放选中,此时再按上下左右键就只是聚焦元素。
我在实现这个需求的时候,最大的障碍是虚拟列表变化后,需要重新计算这个二维数组,我考虑过使用 MutationObserver 监听dom 变化,但是这个事件会被多次触发,效果不太理想,如果你能暴露 range 的变化,这个需求实现就能大幅的降低开发难度。
所以,您能考虑把range change 的时候派发一个事件吗?
附上W3 关于表格的accessibility 指导案例: https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/
它这个只能实现简单固定内容的聚焦,如果是虚拟滚动的,难度会大很多。 现在开源的组件里很少有支持虚拟滚动和拖拽排序的,您的这个开源组件如果文档和demo 更详细一些,我想它会被更多的人喜欢和使用,如果您能再支持accessibility,它将会成为第一个支持虚拟滚动+ 排序+ Accessibility的开源组件,也理应会成为类似需求的首选。