3

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

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

但是，当用户然后按下向下箭头键移动到下一个列表项时，下一行将突出显示（现在是所选项目），但焦点仍保留在前一行的标签上（突出显示仍显示在行标签周围1）。将焦点移到新选择的行的唯一方法是通过复选框和两个图标进行选项卡。如果只有几个列表项，这没什么大不了的，但如果列表中有 20 多行，那就太麻烦了。

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

4

1 回答 1

2

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

焦点在 Flex 中的工作原理

要了解的主要内容是FocusManager单例类和IFocusManagerComponent接口。

基于FocusManager用户交互（鼠标点击、键盘导航等）在 UI 周围移动焦点。

如果一个组件实现了该IFocusManagerComponent接口，那么FocusManager它将把它包含在“选项卡”循环中，并允许通过键盘导航来聚焦该组件。

Focus 如何与 Flex 列表组件配合使用

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

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

解决问题的一些想法

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

  • 覆盖 List 组件的受保护的keyDownHandler()方法。我没有方便的代码，但是如果您查看它在List类中的实现，您应该能够使您的覆盖版本将焦点放在下一个渲染器上。

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

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

  • 考虑对不需要获得焦点的对象禁用焦点（例如Label在您的项目渲染器中）。有许多属性可以做到这一点：focusEnabled, hasFocusableChildren, mouseFocusEnabled,tabEnabled等tabChildren。

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

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

于 2013-09-20T21:17:52.800 回答