标签: keyboard-navigation

大多数列表框允许您通过键入显示文本的第一个字母来查找其中的项目.如果键入的字母与多个项目匹配,则可以继续添加字母以缩小搜索范围.

我需要在WPF中执行此操作ListBox.但是,这些项目不是普通字符串 - 它们是我使用的自定义对象DataTemplate.我希望有一种方法可以提供一个字符串值的路径,该路径值应该用于ListBox项目的文本键盘导航.

这怎么可能？

在此示例窗口中,Tabbing through从第一个文本框转到最后一个文本框,然后转到扩展器标题.

<Window x:Class="ExpanderTab.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"
    FocusManager.FocusedElement="{Binding ElementName=FirstField}">
    <StackPanel>
        <TextBox TabIndex="10" Name="FirstField"></TextBox>
        <Expander TabIndex="20" Header="_abc">
            <TextBox TabIndex="30"></TextBox>
        </Expander>
        <TextBox TabIndex="40"></TextBox>
    </StackPanel>
</Window>

显然,我希望这是第一个文本框,扩展器标题,然后是最后一个文本框.有没有一种简单的方法可以将TabIndex分配给扩展器的标头？

我已经尝试强制扩展器使用tabstop KeyboardNavigation.IsTabStop="True",但这会使整个扩展器获得焦点,并且整个扩展器不会对空格键做出反应.再过两次选项卡后,再次选择标题,我可以用空格键打开它.

编辑:我会为那些能够提出更清洁方式的人提供奖励 - 如果没有,那么rmoore,你可以拥有代表.谢谢你的帮助.

我遇到了有关可访问性的细节，不是关于屏幕阅读器和盲人用户，而是关于纯键盘导航。

编辑/添加：我想强调我的问题的一部分，到目前为止我得到的两个答案中根本没有解决：我想知道我的代码片段中给出的情况是否可以被认为是可访问的，即符合可访问性标准？

我在页面上有一个博客文章列表，其标题链接到实际（单个）帖子 - 标准博客行为。现在，当有人使用 TAB 键导航并从一个链接/博客标题前进到下一个链接/博客标题时，页面将始终自动滚动以在页面的可见部分内显示聚焦的链接。

但是，如果我有固定的页脚（页眉也一样），则在某些时候焦点链接将被页脚隐藏。我不是在谈论页面上的最后几行！尝试下面的代码片段：单击一个可见链接将其聚焦，然后使用 TAB 键跳转到下一个，然后是下一个，依此类推：在某些时候，聚焦的链接将位于页脚后面。当我在页面已经向下滚动后返回（使用 Shift + Tab）时也是如此：在某些时候，焦点链接位于固定标题后面。

在这种情况下，设置顶部和底部填充或边距没有帮助......

我知道可以使用箭头键手动向下滚动，但首先我想知道这是否仍然可以被认为是完全可访问的，除此之外，我只是想知道是否有任何东西可以使浏览器将焦点元素滚动到它所在元素的可见部分？

html,
body {
  margin: 0;
  height: 100%;
}
ul {
  padding: 40px 0 80px;
}
li {
  font-size: 24px;
  padding: 10px;
}

header {
  position: fixed;
  top: 0;
  height: 40px;
  width: 100%;
  background: rgba(33, 233, 158, 1);
  text-align: center;
}

footer {
  position: fixed;
  bottom: 0;
  height: 80px;
  width: 100%;
  background: rgba(33, 233, 158, 0.8);
  text-align: center;
}

footer p {
  padding: 0 60px;
} …

我有一个编辑器，它应该有带有 props 的实体name, color, start, end。在编辑器中，由start和表示的位置中的文本end将由 替代name，并将由带有 的自定义组件呈现contentEditable=false。

这通常适用于 Draftjs，但有几个问题：

• 当用键盘箭头移动光标时，实体被跳过，这很好。但是，当一个实体位于输入的最后并且我尝试向右移动经过它时（仅使用右箭头或使用选项或 cmd + 右），光标消失并且当我再次向左移动时不会回来。
• 如果我向右转到实体的左侧并按 shift + option + 向右箭头，则会按预期选择该实体。但是如果我再按向左箭头，光标也会丢失。

我可以通过确保在最后一个实体之后总是有一个空格来解决这个问题，但这似乎很棘手，并且可能有边缘情况。

另一种选择是不使用contentEditable=false，但这会给我的实际应用程序带来其他问题，它有一个更复杂的实体组件，包括下拉列表，我将不得不手动确保用户无法更改实体内的文本等。

以下是该问题的重现：https : //codesandbox.io/s/competent-surf-st77i

有任何想法吗？

我正在处理一些包含<textarea>. LTR目前，我正在测试混合字符和基于字符的输入RTL，例如"abc\xd8\xa3\xd8\xa8\xd8\xacABC".

<div class="mycomment" dir="RTL">\n  <form method="get" action="{$self}">\n    <input type="hidden" name="Id" value="{$entry}" />\n    <textarea name="comment" class="commentarea"/></textarea>\n    <br />\n    <input class="button" type="submit" value="{$postlink}" />\n  </form>\n</div>\n

在 模式下，字符串的显示是正确的RTL，但是键盘导航不正确。具体来说，在浏览英语和阿拉伯语字符串部分时，它不遵循正确的顺序。

我有什么想法可以绕过或解决这个问题吗？

在焦距和键盘导航方面,我看到了奇怪的行为.在下面的示例中,我有一个简化的ItemsControl,它已经模板化,因此它显示了一个绑定到ItemsSource的CheckBoxes列表.

<ItemsControl FocusManager.IsFocusScope="True"
              ItemsSource="{Binding ElementName=TheWindow, Path=ListOStrings}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

由于某些奇怪的原因,FocusManager.IsFocusScope ="True"分配导致在通过鼠标单击选中复选框时无法设置键盘焦点,并且当使用空格键选中复选框时,焦点将跳出ItemsControl.键盘.这两个症状似乎都指向选中复选框时发生的一些奇怪的导航,但我很难找到它的底部.

如果我使用此方法将可视树中的任何父元素设置为焦点范围,则会出现此问题.如果我删除了FocusManager.IsFocusScope ="True",那么问题就会消失.不幸的是,我在一个更大的项目中看到了这个问题,我不能仅仅删除这些焦点范围而不必担心其他与焦点相关的后果.

有人可以向我解释我所看到的奇怪行为吗？这是一个错误还是我完全错过了什么？

有没有人有一个不可列表的HTML(HTML5)元素列表,即使指定了tabindex？(通过tabbable,我的意思是他们可以通过反复按"tab"键来获得焦点.)

我们知道默认情况下有些元素是可列表的,例如input或textarea.我们还知道,如果明确指定了tabindex,有些元素只能是tabbable,例如div和spanelements.

根据W3Schools,"在HTML5中,tabindex属性可用于任何HTML元素".但是,肯定有一些元素即使它们有tabindex也不能表示.例如,param元素是tabbable或head元素是没有意义的.我也不认为option元素可能是可能的,但我不确定.而且我甚至不太确定map哪些东西可以包含可能的元素,但通常不会自行列表.

有人可以给我一个列表,列出即使他们有tabindex,也永远无法获得焦点的所有元素吗？

a href="javascript: void(0)"被认为是一种不好的做法,我不能href="#"在每种情况下都使用,所以我想添加一个空a的tabIndex=0,以便用键盘访问.

这被认为是一种好习惯吗？

PS Bootstrap的下拉需要<a>内部元素用于键盘导航,所以我必须使用<a>.

我正在用键盘导航,我无法直观地找到哪个元素具有焦点.在调试时我设法在Window内的方法中破坏了执行但我不知道哪个属性会显示当前的聚焦控件.

我有一个带有引导下拉组件的标头，我正在尝试使用 tabindex 启用对该元素的键盘导航。以下是html和简单的css：

HTML:
<span class="pull-right">
   <span class="help-menu dropdown">
       <span class="dropdown-toggle" data-toggle="dropdown" role="button">
          <span class="help-header" tab-index="0">Help</span>
        </span>
           <ul class="dropdown-menu pull-right" tabindex="-1" role="menu">
             <li tabindex="-1"><a [href]="/help.html" target="_blank">Docs</a></li>
           </ul>
    </span>
 </span>

CSS：

.help-header{
   &:after{
      content: "\25BE"; //caret should be displayed!
   }
}
.help-menu{
     display: inline-block;
     cursor: pointer;
     background: aqua;
     margin-top: 10px;
    margin-right: 20px;
}

这是小提琴链接

现在，当我做一个选项卡时，帮助没有得到焦点。但是，当我从 help-header 类中删除 tabindex 并将其应用于带有类 pull-right 的跨度或带有类帮助菜单和下拉列表的跨度时，帮助文本将焦点放在选项卡上。尽管如此，我还是看不到点击回车或空格或向下箭头的下拉菜单。

我真的不知道如何使这项工作。一段时间以来，我一直试图弄清楚，但我失败了。

我在这里错过了 tabindex 的任何核心概念吗？任何人都可以帮助我或指出我正确的方向。

非常感谢。

干杯。