tabIndex для фокусировки на внутреннем компоненте React внутри тега привязки - PullRequest
Новая
       54

tabIndex для фокусировки на внутреннем компоненте React внутри тега привязки

0 голосов
/ 18 сентября 2018

Я пытаюсь добавить кнопку доступности «Пропустить к основному содержанию», которая получает фокус на странице, когда пользователь нажимает на вкладку.

Я хотел бы обернуть уже существующие компоненты React (Button, Card) в тег привязки, а затем, нажав на вкладку, сосредоточиться исключительно на самом внутреннем компоненте (Button) и перейти к тегу привязки href при нажатии «Enter».

Мой код выглядит следующим образом: 

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

1 Ответ

0 голосов
/ 18 сентября 2018

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