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

问题描述

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

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

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

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

解决方案

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

焦点如何在 Flex 中工作

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

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

如果一个组件实现了 IFocusManagerComponent 接口，那么 FocusManager 会将它包含在tab"循环中，并允许通过键盘导航来聚焦该组件.>

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

您已经偶然发现了焦点如何与 List 组件和项目渲染器一起工作的特殊性.Flex List 组件实现了 IFocusMangerComponent，因此当您在 UI 中使用 Tab 键时，FocusManager 会将焦点发送到列表.

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

解决问题的一些想法

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

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

  立>

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

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

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

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

我认为您还可以使用其他技术，只是我这样做的时间太长了.如果您在某个地方遇到困难，我很乐意提供更多帮助...

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.

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.

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.

解决方案

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.

How Focus Works in Flex

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

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

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.

How Focus Works With Flex List Components

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.

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.

Some Ideas for Solutions to Your Problem

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

• 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.

• 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 ;)

• 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.

• 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.

• 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屋！