React样式组件按钮未获得焦点

Question

反应式组件按钮未获得焦点

这是我继承的一些代码（请参见下文）。有标题和相应按钮（书签）的行。使用tab按钮，我可以专注于标题。在另一个tab上，焦点将移至样式按钮，但没有焦点环。在下一个tab上，焦点将转到带有焦点环的下一个标题，依此类推。

为什么styled.button无法获得焦点？

如果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>

相关的按钮样式组件

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

您是否尝试过添加tabIndex={0}？

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

Answer 2

经过一番橡皮小考之后，我意识到这不是引起问题的样式组件，而是样式组件的CSS。

删除 1 var crypto = require('crypto') 2 const util = require('util'); 3 util.inspect.defaultOptions.maxArrayLength = null; 4 5 6 console.log(crypto.getCiphers()) ，它当然可以工作。