Кнопка React styled-component не получает фокус

Question

Кнопка React Styled-Component не получает фокус

Это некоторый код, который я унаследовал (см. Ниже). Есть строки с заголовком и соответствующей кнопкой (Закладка). Используя кнопку tab, я могу сфокусироваться на заголовке. После другого tab фокус перемещается на стилизованную кнопку, но кольцо фокусировки отсутствует. На следующем tab фокус переходит к следующему заголовку с кольцом фокусировки и т. Д.

Почему кнопка styled.bot не получает фокус?

Если стилизованный компонент IconWrapper ( перечислено ниже) заменяется на <button></button>, затем значок получает фокус и имеет кольцо фокусировки.

<button
    ref={node => (this.removeBookmarkBtns[i] = node)}
    aria-label="Remove bookmark"
    onClick={() => {this.markForRemoval(bookmark, i);}}
    >
    <BookmarkIcon />
</button>

Унаследованный код

import styled from "styled-components";

<div>
    ... irrelevant stuff

    <IconWrapper
        ref={node => (this.removeBookmarkBtns[i] = node)}
        aria-label="Remove bookmark"
        onClick={() => {this.markForRemoval(bookmark, i);}}
    >
        <BookmarkIcon />
    </IconWrapper>

    ... irrelevant stuff
</div>

Связанные кнопки styleled-components

const IconWrapper = styled.button`
    color: ${theme.colors.primary};
    font-size: 2em;
    cursor: pointer;
    margin-left: 10px;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    outline: none;
`;

const BookmarkIcon = styled(Icons.BookmarkCheck)`
    display: block;
    overflow: visible;
`;

Icon.BookmarkCheck

Icons.BookmarkCheck = props => (
    <SVG {...props}>
        <path d="m256 512a254.4 ...
    </SVG>
);

Answer 1

После небольшого резинового погружения меня осенило, что проблема связана не со стилевым компонентом, а CSS из стилевого компонента.

Удалите outline: none и, конечно, оно работает.

Answer 2

Вы пробовали добавить tabIndex={0}?

<button
    ref={node => (this.removeBookmarkBtns[i] = node)}
    aria-label="Remove bookmark"
    onClick={() => {this.markForRemoval(bookmark, i);}}
tabIndex={0}
    />