悬停状态下的选项卡可访问性 [英] Tab accessibility within a hover state

查看：30
本文介绍了悬停状态下的选项卡可访问性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个组件，它在悬停时会显示一个按钮和一个链接，您可以点击它.这不是菜单……只是页面中间的一个框.

对于可访问性，我希望用户能够使用 Tab 键进入容器(现在发生，并在 .HiddenUntilHover 类中显示内容)并且还可以继续 Tab 键到按钮和链接显示在悬停/聚焦状态.

现在您可以专注于容器并查看悬停状态；但是，当您使用 Tab 键时，它只会转到下一个元素，并且不允许您在悬停状态下使用 Tab 键切换到按钮或链接.

伪代码示例:

/* 我的组件 .jsx */<div tabIndex="0" className="MainContainer"><div className="SomeOtherClass"><div className="HiddenUntilHover">/* 我希望能够点击这些可点击的东西！*/<button>点击我！</button><a href="...">我也可以点击</a>

还有我的 SCSS:

.HiddenUntilHover {显示:无；}主容器:焦点，主容器:悬停，>.HiddenUntilHover {显示:块}

解决方案

几天前我遇到了这个问题，我使用 css 类解决了它，使悬停的内容可以通过键盘导航访问.

我的工作方式是使用 css 伪类来确保 div 元素何时处于活动状态&重点是里面的按钮也显示.特别是额外使用 :focus-within &:focus-visible 应该确保当你在列表项上使用 Tab 键时，它们的内容也会显示出来并且可以通过键盘访问.

.MainContainer {&:not(:hover, :focus, :active, :focus-visible, :focus-within) {.HiddenUntilHover {可见性:隐藏；}}}

<div tabIndex="0";className=MainContainer">内容<div className=SomeOtherClass"><div className="HiddenUntilHover"><button>点击我！</button><a href="...">我也可以点击</a>

这是此工作的 Codesandbox 演示的链接

I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.

For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.

Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.

Pseudo code example:

/* My component .jsx */
<div tabIndex="0" className="MainContainer">
 <div className="SomeOtherClass">
   <div className="HiddenUntilHover">
     /* I would like to be able to tab to these clickable things! */
     <button>Click me!</button>
     <a href="...">I am also clickable</a>
   </div>
 </div>
</div>

And my SCSS:

.HiddenUntilHover {
  display: none;
}

MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
    display: block
}

解决方案

I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.

The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.

.MainContainer  {
  &:not(:hover, :focus, :active, :focus-visible, :focus-within) {
    .HiddenUntilHover {
      visibility: hidden;
    }
  }
}


<body>
    <div tabIndex="0" className="MainContainer">
        Content
        <div className="SomeOtherClass">
          <div className="HiddenUntilHover">
            <button>Click me!</button>
            <a href="...">I am also clickable</a>
          </div>
        </div>
      </div>
  </body>

Here's a link to the Codesandbox demo of this working

这篇关于悬停状态下的选项卡可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆