场景

为了实现无障碍功能，键盘 Tab 切换焦点时，需要显示 outline

实现

可以通过聚焦 css 实现

*:focus {
  outline: 4px dashed black;
}

上述实现方法存在问题

• 鼠标点击也会出现聚焦的框

:focus-visible

这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。

为了兼容浏览器，使用 polyfill focus-visible.js

1. 引入 polyfill focus-visiblejs

// 方式一：直接脚本引入
<script src="https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js"></script>

// 方式二：react 项目引入
//     1. npm install --save focus-visible
//     2. App.js 引入js
import 'focus-visible/dist/focus-visible.min.js'

2. 写入 css 代码

/* Keyboard will use a large outline. */
.js-focus-visible button.focus-visible {
  outline: 4px dashed black;
}

/* Mouse/Touch will use a subtle drop shadow. */
.js-focus-visible button:focus:not(.focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Let me try