tabIndex 专注于锚标签内的内部 React 组件答案

【问题标题】：tabIndex to focus on inner React component inside anchor tagtabIndex 专注于锚标签内的内部 React 组件
【发布时间】：2018-09-17 22:32:17
【问题描述】：

我正在尝试添加一个“跳转到主要内容”辅助功能按钮，当用户点击选项卡时，该按钮会在页面上获得焦点。

我想将已经存在的 React 组件（按钮、卡片）包装在一个锚标签中，然后在点击选项卡时，只关注最内部的组件（按钮）并在点击“Enter”时导航到锚标签 href。

我的代码如下：

<a href="/get-started" className="link link--list-item link--skip-link">
  <Card className="card--skip-link">
    <ButtonText Icon={IconArrowRight} iconPosition="right">
    Skip to main content
    </ButtonText>
  </Card>
</a>

正如代码所示，焦点状态应用于整个锚标记。我想将焦点状态仅应用于按钮（按钮小于包含它的卡片）。

当我将tabIndex="-1" 添加到锚标记并将tabIndex="0" 添加到卡片和/或按钮时，在切换时根本不会选择元素。

我的 CSS 是：

.link {
  &--skip-link {
    position: absolute;
    top: -10000px;
    left: -10000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;

    &:active,
    &:focus,
    &:hover {
        top: 10%;
        left: 40%;
        width: auto;
        height: auto;
        overflow: visible;
        color: black;
    }
  }

【问题讨论】：

标签： reactjs accessibility tabindex

【解决方案1】：

tabindex 应该确实可以工作，并且 i 也可能是因为 css 焦点选择器被添加到链接而不是卡。如果这不起作用，那么在选择选项卡检查后

document.activeElement() 并检查应用以下代码时聚焦的元素。

  <a href="/get-started" className="link link--list-item link--skip-link" tabindex="-1">
  <Card className="card--skip-link" tabindex="0">
    <ButtonText Icon={IconArrowRight} iconPosition="right"
Skip to main content
    </ButtonText>
  </Card>
</a>




 .card {
  &--skip-link {
    position: absolute;
    top: -10000px;
    left: -10000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;

    &:active,
    &:focus,
    &:hover {
        top: 10%;
        left: 40%;
        width: auto;
        height: auto;
        overflow: visible;
        color: black;
    }
  }

【讨论】：