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

时间:2013-09-20 19:40:36

标签: list flex keyboard itemrenderer

我们有一个列表,它使用包含标签,复选框和两个图标(具有点击事件)的自定义渲染器。此列表需要符合WCAG 2.0标准,为此,我们需要列表可以通过键盘导航。

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

但是,当用户按下向下箭头键移动到下一个列表项时,下一行将突出显示(现在是所选项)但焦点仍保留在上一行的标签上(突出显示仍然显示在第1行的标签。将焦点移动到新选择的行的唯一方法是选中复选框和两个图标。如果只有几个列表项,这不是什么大问题,但如果列表中有20多行,则会很痛苦。

一旦用户移动(使用上/下光标键)到新列表项,是否有办法让焦点移动到新选行的标签?我知道一张照片会有所帮助,但我无论如何都没有在线发布截图。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

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

Focus如何在Flex中工作

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

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

如果组件实现IFocusManagerComponent接口,则FocusManager会将其包含在“tab”循环中,并允许通过键盘导航来聚焦组件。

Focus如何与Flex List组件一起使用

您已经偶然发现了焦点如何与List组件和项目渲染器一起使用的特性。 Flex List组件实现了IFocusMangerComponent,因此当您通过用户界线选项卡时,FocusManager会将焦点发送到列表。

List可能会也可能不会聚焦项目渲染器。在Flex 3中,您必须使用可编辑的项呈示器才能实现此功能,它在Flex 4中可能相同或不同。

解决问题的一些想法

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

  • 覆盖List组件的受保护keyDownHandler()方法。我没有方便的代码,但是如果你看一下它在List类中的实现,你应该可以让你的重写版本将焦点放在下一个渲染器上。

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

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

  • 考虑禁用对不需要获得焦点的对象的关注(例如项呈示器中的Label)。有许多属性可以执行此操作:focusEnabledhasFocusableChildrenmouseFocusEnabledtabEnabledtabChildren等。

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

我认为你还可以使用其他技术,自从我这样做以后,它已经太久了。如果你陷入困境,我会很乐意提供更多的帮助......