tabIndex专注于锚标记内的内部React组件

Question

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

我想将现有的React组件（Button，Card）包装在一个锚标签中，然后在点击标签时，只关注最内部组件（Button）并在点击'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;
    }
  }

Answer 1

tabindex实际上应该工作，我也可以引起，因为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;
    }
  }