下拉菜单元素在按Tab键时失去焦点

Question

下拉菜单元素在按Tab键时失去焦点

3

我的下拉菜单按钮在鼠标悬停时打开（CSS），但是无法通过“tab”访问其内容。

在按钮-标签上，下拉菜单在下一个“tab”按下时打开，跳过菜单的所有内容，关闭它并继续到页面上的下一个焦点元素。

我需要能够通过“tab”键遍历菜单。这是我的React组件：

<div className="dropdown" 
        tabIndex="0"
        role="navigation">
          <button className="dropBtn" tabIndex="0" role="menu" type="button" aria-expanded="false" aria-controls="navbar">
            <i className="hover">Places</i>
          </button>
          <div tabIndex="0" className="dropdown-content">
          <div tabIndex='0' className='filter'>
            <input 
              className='input'
              tabIndex="0"
              type="text"
              placeholder="Search your place"
              value={this.props.query}            
              onChange={e => this.props.handleUpdateQuery(e.target.value)}/>
              </div>
             {/* <div className="search-places-results"> */}
             <ul className='listOfPlaces' 
             role="menubar">
              {this.props.filteredPlaces.map((item)=>{
                return <li item={item} 
                tabIndex="0"
                role="menuitem"
                items={this.props.places} 
                key={item.id}
                onClick={(e)=>{this.props.onItemClick(e, item.id)}}>
                {item.name}</li>
              })}
             </ul>
            {/* </div> */}
          </div>
        </div>

CSS：

.dropdown-content .filter:hover,
.dropdown-content .filter:focus,
.dropdown-content ul li:hover,
.dropdown-content ul li:focus {
  background-color: rgb(41, 160, 240);
}

.dropdown:hover .dropdown-content,
 .dropdown:focus .dropdown-content {
  display: block;
}

这是按下标签页时的打开方式

（此图为示例，与IT技术无关）

- Natalia Bizitza

你能否添加截图来说明按钮选项卡的行为？谢谢。 - Rachel Gallen

2个回答

1

为了修复它，我使用了focus:within：

.dropdown:focus-within .dropdown-content {
  display: block
}

- Natalia Bizitza

不幸的是，:focus-within 伪选择器在 IE 和当前版本的 Edge 中无法工作。 - Christian Bangert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jmargolisvt · Accepted Answer

如果不运行此代码，这里有几种可能性。首先，我不会期望制表符(tabbing)起作用，因为您已经给它们所有相同的tabindex。请参见您的map函数，它将硬编码值零分配给所有列表元素。 map有一个可以传递的第二个参数，即索引。使用它来生成tabindex。

[1, 2, 3].map((x, i) => console.log(i))

其次，您没有将tabindex附加到锚点。这会导致a11y问题。尝试向列表项添加menuitem或link aria角色。如MDN所建议的，使用本机锚点元素可能是最好的选择。https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role