删除按钮的背景和边框后，在 Firefox 中使用键盘导航到该按钮时，焦点不会显示。(辅助功能)

Question

我有一个可以访问的按钮，您可以使用键盘专注于它。但是，在我删除按钮的边框和背景后，当您使用键盘导航到它时，即使焦点位于按钮上，也不会显示。此问题只发生在火狐中。Chrome和IE都很好。

这是我的 HTML：

<div class="collapse-state-toggle">
<button class="collapse-state-button" 
@click="collapseStateToggle"
:aria-expanded="isCollapsed ? 'false' : 'true'" 
aria-controls="collapsed-content">
...

这是我的 CSS：

.collapse-state-toggle {
cursor: pointer;
float: right;
user-select: none;
.collapse-state-button {
border: none;
background: none;
.toggle-text {

Answer 1

将这些添加到我的代码中，现在它可以工作了：

<div class="collapse-state-toggle" v-if="items.length > 0">
<button class="collapse-state-button focus-only" 
@click="collapseStateToggle"
:aria-expanded="isCollapsed ? 'false' : 'true'" 
aria-controls="collapsed-content">
...

.focus-only:focus {
outline: 2px solid #1195ff;
}
.collapse-state-toggle {
cursor: pointer;
float: right;
user-select: none;