Question

我正在尝试添加一个“跳过主要内容”辅助功能按钮，当用户单击选项卡时，该按钮将重点放在页面上。

我想将已经存在的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"并在Card和/或Button中添加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焦点选择器已添加到链接而不是card中，也可能导致我。如果此方法不起作用，则在选择tab check后

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

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

1 个答案: