Question

我的下拉菜单按钮在悬停（CSS）上打开，但是其内容无法在选项卡上访问。

在按钮选项卡上，下拉菜单在下一个选项卡上打开，按下该菜单将跳过菜单的所有内容，将其关闭并继续转到页面上的下一个焦点元素。

我需要能够通过菜单进行制表。来自我的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;
}

This is how it opens on tab press

Answer 1

如果不运行此命令，我会在这里看到几种可能性。首先，我希望制表不起作用，因为您给了它们相同的tabindex。请参阅您的map函数，该函数将硬值零分配给所有列表元素。 map可以传递第二个参数，它是一个索引。使用它来生成tabindexes。

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

第二，您没有将tabindexes附加到锚点。这会产生一个问题。尝试将menuitem或link aria角色添加到列表项。正如MDN所建议的那样，使用本机锚元素可能是最好的选择。 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role

Answer 2

要修复此问题，我使用了focus：within：

[String]

下拉菜单元素失去对标签的关注

2 个答案: