自定义渲染器列表上的键盘导航问题 [英] Issues with keyboard navigation on list with custom renderer

问题描述

我们有一个列表，该列表使用包含标签，复选框和两个图标(具有单击事件)的自定义渲染器.该列表必须与WCAG 2.0兼容，为此，我们需要该列表可在键盘上导航.

We have a list that uses a custom renderer containing a label, a checkbox and two icons (which have click events). This list needs to be made WCAG 2.0 compliant and in order to do that we need the list to be keyboard navigable.

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

The problem is with being able to move from one list item to the next and have the focus move to the label for the next/previous list item. Specifically, when the user enters the list using TAB button, the label for the first list item receives focus (highlighted box around text) and the entire row in the list is highlighted as the selected item.

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

However, when the user then presses the down arrow key to move to the next list item, the next row becomes highlighted (is now the selected item) but the focus remains on the label of the previous row (highlight still shown around label for row 1). The only way to get the focus to move to the newly selected row is to tab through the checkbox and two icons. This isn't a big deal if there are only a couple list items but would be a pain if there are 20+ rows in the list.

一旦用户(使用上/下光标键)移动到新的列表项，是否有一种方法可以使焦点移到新选择的行的标签上?我知道图片会有所帮助，但是我仍然无法在线发布屏幕截图.任何帮助将不胜感激.

Is there a way to get the focus to move to the label of the newly selected row as soon as the user moves (using up/down cursor keys) to the new list item? I know a picture would help but I don't have anyway of posting a screenshot online. Any help would be greatly appreciated.

推荐答案

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

You're going to have to dig into how focus works in Flex. This is not a complete answer, but hopefully you can put together a solution that works for you. I did this about 4-5 years ago in Flex 3, but it should be similar in Flex 4.

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

The main things to know are the FocusManager singleton class and the IFocusManagerComponent interface.

FocusManager根据用户交互(鼠标单击，键盘导航等)在UI上移动焦点.

The FocusManager moves the focus around the UI based on user interactions (mouse clicks, keyboard navigation, etc.).

如果某个组件实现了IFocusManagerComponent接口，则FocusManager会将其包含在选项卡"循环中，并允许通过键盘导航对组件进行聚焦.

If a component implements the IFocusManagerComponent interface, then the FocusManager will include it in the "tab" loop and allow the component to be focused via keyboard navigation.

您已经偶然发现焦点如何与List组件和项目渲染器一起工作. Flex List组件实现了IFocusMangerComponent，因此当您通过UI进行制表时，FocusManager会将焦点发送到列表.

You've already stumbled onto the peculiarities of how focus works with the List component and item renderers. The Flex List components implement IFocusMangerComponent and so when you tab through the UI the FocusManager sends the focus to the list.

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

The List may or may not focus the item renderers. In Flex 3 you had to be using editable item renderers for this to happen, it may or may not be the same in Flex 4.

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

I think there are numerous ways to solve this. Use some combination of these techniques:

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

• override the protected keyDownHandler() method of the List component. I don't have the code handy, but if you look at it's implementation in the List class you should be able to make your overridden version set the focus on the next renderer.

使用FocusManager的方法在选项卡循环中查找组件:

use methods of the FocusManager to find components in the tab loop: getNextFocusManagerComponent(), findFocusManagerComponent(). Check the docs there are others that will be useful. For example, when the user presses the down arrow, you can let the next item renderer get selected, then use findFocusManagerComponent() (passing in the newly selected renderer) and then tell the FocusManager to focus it with the setFocus() method. This is probably not exactly the right approach ;)

顺便说一句，FocusManger是Flex单例对象，Flex中的每个UIComponent都有一个

By the way, the FocusManger is a Flex singleton object, every UIComponent in Flex has a focusManager property you can use to get a reference to it.

考虑对不需要获得焦点的对象(例如项目渲染器中的Label)禁用焦点.有许多属性可以执行此操作:focusEnabled，hasFocusableChildren，mouseFocusEnabled，tabEnabled，tabChildren等.

consider disabling focus on objects that don't need to receive focus (like the Label in your item renderer). There are numerous properties to do this: focusEnabled, hasFocusableChildren, mouseFocusEnabled, tabEnabled, tabChildren etc.

考虑禁用对List组件的关注，但是随后使您的项目呈示器实现IFocusManagerComponent接口.接口的实现很简单，您只需在类中声明它即可(没有实际方法可以实现).棘手的是，现在您的项目渲染器需要具有按下处理程序(只需覆盖所有UIComponent对象具有的受保护的keyDownHandler()方法).

consider disabling focus on the List component, but then making your item renderers implement the IFocusManagerComponent interface. Implementing the interface is simple, you just declare it in your class (there's no actual methods to implement). The tricky part will be now your item renderers need to have key down handlers (just override the protected keyDownHandler() method that all UIComponent objects have).

我认为您还可以使用其他技术，因为我这样做已经太久了.如果您被卡住了，我很乐意提供更多帮助...

I think there are other techniques you can use, it's just been too long since I did this. I'd be happy to provide more help if you get stuck somehwere...

这篇关于自定义渲染器列表上的键盘导航问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！