reactjs - tabIndex 专注于 anchor 标签内的内部 React 组件

Question

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

我想将现有的 React 组件(按钮、卡片)包装在一个 anchor 标签中，然后在点击选项卡时，只关注最内部的组件(按钮)并在点击“Enter”时导航到 anchor 标签 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>

就代码而言，焦点状态应用于整个 anchor 标记。我想将焦点状态仅应用于按钮(按钮小于包含它的卡片)。

当我添加 tabIndex="-1"到 anchor 标签和 tabIndex="0"对于 Card 和/或 Button，在通过 Tab 键时根本不会选择元素。

我的 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() and check which element is focused when the following code is applied.

  <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;
    }
  }