List 自定义渲染器列表上的键盘导航问题

我们有一个使用自定义渲染器的列表，其中包含一个标签、一个复选框和两个图标（包含单击事件）。该列表需要符合WCAG 2.0，为了做到这一点，我们需要该列表具有键盘导航功能

问题在于能够从一个列表项移动到下一个列表项，并将焦点移动到下一个/上一个列表项的标签上。具体地说，当用户使用TAB按钮输入列表时，第一个列表项的标签接收焦点（文本周围高亮显示的框），列表中的整行高亮显示为选定项

但是，当用户按下向下箭头键移动到下一个列表项时，下一行将高亮显示（现在是选定项），但焦点仍在上一行的标签上（高亮显示仍显示在第1行的标签周围）。使焦点移动到新选定行的唯一方法是通过复选框和两个图标进行制表。如果只有几个列表项，这不是什么大问题，但是如果列表中有20多行，这将是一件痛苦的事情

---

当用户移动（使用上/下光标键）到新列表项时，是否有方法使焦点移动到新选定行的标签？我知道一张照片会有帮助，但我无论如何都没有办法在网上发布截图。任何帮助都将不胜感激。

您必须深入了解focus在Flex中的工作原理。这不是一个完整的答案，但希望你能找到一个适合你的解决方案。我大约在4-5年前在Flex3中这样做了，但在Flex4中应该是类似的

Focus在Flex中的工作原理 需要了解的主要内容是singleton类和接口

FocusManager

根据用户交互（鼠标单击、键盘导航等）在UI上移动焦点

如果组件实现了

iFocusManager组件

接口，则

FocusManager

将其包含在“tab”循环中，并允许通过键盘导航对组件进行聚焦

Focus如何使用Flex列表组件 您已经偶然发现了焦点如何与

列表

组件和项目渲染器一起工作的特性。Flex

列表

组件实现了

IFocusMangerComponent

，因此当您通过UI进行制表时，

FocusManager

将焦点发送到列表

列表

可能会也可能不会聚焦项目呈现器。在Flex3中，您必须使用可编辑的项目渲染器才能实现这一点，在Flex4中可能相同，也可能不同

一些解决你问题的方法 我认为有很多方法可以解决这个问题。使用这些技术的一些组合：

• 重写列表组件的受保护方法。我手头没有代码，但是如果您在

  列表中查看它的实现

  类，您应该能够使覆盖的版本将焦点设置在下一个渲染器上

• 使用FocusManager的方法查找选项卡循环中的组件：。检查文档，还有其他有用的文档。例如，当用户按下向下箭头时，可以选择下一个项目渲染器，然后使用

  findFocusManagerComponent（）

  （传入新选择的渲染器），然后告诉

  FocusManager

  使用

  setFocus（）

  方法对其进行聚焦。这可能不是正确的方法；）

• 顺便说一下，

  FocusManger

  是一个Flex单例对象，Flex中的每个

  UIComponent

  都有一个属性，可以用来获取对它的引用

• 考虑禁用不需要接收焦点的对象上的焦点（如项目渲染器中的

  标签）。有许多属性可以执行此操作：
  focusEnabled
  ，
  hasFocusableChildren
  ，
  mouseFocusEnabled
  ，
  tabEnabled
  ，
  tabChildren
  等
  

• 考虑禁用对

  列表

  组件的关注，然后让项目呈现器实现

  iFocusManager组件

  接口。实现接口很简单，只需在类中声明它（没有实际的方法来实现）。现在棘手的部分是，您的项目渲染器需要具有向下键处理程序（只需覆盖所有

  UIComponent

  对象所具有的受保护的

  keyDownHandler（）

  方法）

我想你还可以使用其他技术，我已经很久没有这么做了。如果你遇到困难，我很乐意提供更多的帮助