list - 使用自定义渲染器的列表上的键盘导航问题

Question

我们有一个使用自定义渲染器的列表，其中包含一个标签、一个复选框和两个图标(具有点击事件)。此列表需要与 WCAG 2.0 兼容，为此我们需要该列表可通过键盘导航。

问题在于能够从一个列表项移动到下一个列表项并将焦点移动到下一个/上一个列表项的标签。具体来说，当用户使用 TAB 按钮进入列表时，第一个列表项的标签会获得焦点(文本周围的突出显示框)并且列表中的整行都突出显示为所选项目。

但是，当用户随后按下向下箭头键移动到下一个列表项时，下一行会高亮显示(现在是选定的项目)但焦点仍然在上一行的标签上(高亮显示仍然显示在周围第 1 行的标签)。使焦点移动到新选择的行的唯一方法是通过复选框和两个图标切换。如果只有几个列表项，这没什么大不了的，但如果列表中有 20 多行，那就很麻烦了。

有没有办法让焦点在用户移动(使用向上/向下光标键)到新列表项时立即移动到新选择的行的标签？我知道图片会有所帮助，但我没有办法在线发布屏幕截图。任何帮助将不胜感激。

Answer 1

您将不得不深入研究焦点在 Flex 中的工作原理。这不是一个完整的答案，但希望您可以组合出适合您的解决方案。我大约 4-5 年前在 Flex 3 中这样做过，但在 Flex 4 中应该类似。

Focus 在 Flex 中的工作原理

要了解的主要内容是 FocusManager单例类和 IFocusManagerComponent界面。

FocusManager根据用户交互(鼠标点击、键盘导航等)在 UI 周围移动焦点。

如果组件实现了 IFocusManagerComponent界面，然后是FocusManager会将其包含在“tab”循环中，并允许通过键盘导航聚焦组件。

焦点如何与 Flex 列表组件一起工作

您已经偶然发现了焦点如何与 List 一起工作的特殊性。组件和项目渲染器。弹性 List组件工具IFocusMangerComponent因此，当您通过 UI 选项卡时，FocusManager将焦点发送到列表。

List可能会或可能不会关注项目渲染器。在 Flex 3 中，您必须使用可编辑的项目渲染器才能实现这一点，在 Flex 4 中可能相同也可能不同。

解决您的问题的一些想法

我认为有很多方法可以解决这个问题。结合使用这些技术:

• 覆盖 protected keyDownHandler()列表组件的方法。我没有方便的代码，但如果你看看它在 List 中的实现class 你应该能够让你的覆盖版本将焦点设置在下一个渲染器上。

• 使用 FocusManager 的方法在选项卡循环中查找组件:getNextFocusManagerComponent() , findFocusManagerComponent() .检查文档，还有其他有用的文档。例如，当用户按下向下箭头时，您可以选择下一个项目渲染器，然后使用 findFocusManagerComponent() (传入新选择的渲染器)然后告诉 FocusManager用 setFocus() 聚焦它方法。这可能不是完全正确的方法；)

• 顺便说一句，FocusManger是一个 Flex 单例对象，每个 UIComponent在 Flex 中有一个 focusManager您可以用来获取对它的引用的属性。

• 考虑禁用对不需要接收焦点的对象的关注(例如项目渲染器中的 Label)。有很多属性可以做到这一点:focusEnabled , hasFocusableChildren , mouseFocusEnabled , tabEnabled , tabChildren等等

• 考虑禁用对 List 的关注组件，然后让你的项目渲染器实现 IFocusManagerComponent界面。实现接口(interface)很简单，您只需在您的类中声明它(没有要实现的实际方法)。棘手的部分是现在您的项目渲染器需要具有按键处理程序(只需覆盖所有 keyDownHandler() 对象具有的 protected UIComponent 方法)。

我认为您还可以使用其他技术，但我已经太久没有这样做了。如果您遇到问题，我很乐意提供更多帮助...