Open richardmyu opened 4 years ago
今天打开项目，偶然间发现导航栏的按钮 tab 有时候会有一个特殊效果(element-ui 的 el-tab 组件)：
我记得我们项目好像没有设置过这种效果呀，而且，这种效果在我们点击 tab 的时候，只是偶尔出现，这就让我更好奇了。
尝试点击好几次，都没有复现，然后就用 Tab 键按了几下，果然复现，我立即打开控制台。。。样式竟然没了，我再试了一次，只要点击任何地方，那个特殊的样式就会消失，我感觉这可能跟焦点有关。
提前在控制台锁定目标元素，使用 Tab 键切换到目标，然后发现目标元素被被加上一个 is-focus 的类名，当然，同类的其他 tab 也有，可能与这个类名有关，但不太可能直接由这个类名引起，所以还得再看看样式，果然就发现了问题：
is-focus
tab 聚焦以后就会有这个效果，确实也与 is-focus 有间接关系，这个有关是 element-ui 做的处理。
然后就去查查相关资料，一探究竟，也在此做个记录。
一个 HTML 用户界面通常包括多个交互式控件，诸如表单控件，可滚动区域，链接，对话框，浏览器标签，等等的。
这些窗口小部件形成一个层次结构，其中一些窗口小部件（例如浏览器选项卡，对话框）包含其他窗口小部件（例如链接，表单控件）。
当使用键盘与界面进行交互时，键输入从系统通过交互式窗口小部件的层次结构被引导到一个活动的窗口小部件，就称该窗口小部件获得焦点。
键盘事件总是针对的是当前焦点元素。
CSS 伪类 :focus 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
:focus
提示：此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素，请使用 :focus-within。
:focus-within
先介绍一下键盘访问网站的常用操作[2]：
当然，使用 vimium 插件，功能更多 0^0
其中 Tab 键索引和 Enter 键点击是与交互相关的最重要的两个键盘行为。一般的操作行为是这样的，先 Tab 键，按次序不断切换 focus 控件元素（包括链接，按钮，输入框等表单元素或者 focus 设置了 tabindex 的普通元素）；处于 focus 状态元素，浏览器一般会通过虚框或者外发光的形式进行区分和提示，此时我们在按下 Enter 回车键，就相当于鼠标点击了这个元素，从而可以前往我们想去的目的地，或者执行我们想要的交互效果。focus 状态元素的标记默认全部都是使用 outline 属性[2]。
focus
tabindex
outline
那么，元素能获得焦点的条件是什么呢？
1.它的 顶层浏览上下文(top-level browsing context) 具有系统焦点，但它本身不是一个 浏览上下文容器(browsing context container)；
浏览上下文(browsing context) A browsing context is an environment in which Document objects are presented to the user.
浏览上下文(browsing context)
A browsing context is an environment in which Document objects are presented to the user.
浏览上下文容器(browsing context container) Certain elements (for example, iframe elements) can instantiate further browsing contexts. These elements are called browsing context containers.
浏览上下文容器(browsing context container)
Certain elements (for example, iframe elements) can instantiate further browsing contexts. These elements are called browsing context containers.
顶层浏览上下文(top-level browsing context) A browsing context that has no parent browsing context is the top-level browsing context for itself and all of the browsing contexts for which it is an ancestor browsing context.
顶层浏览上下文(top-level browsing context)
A browsing context that has no parent browsing context is the top-level browsing context for itself and all of the browsing contexts for which it is an ancestor browsing context.
2.至少满足以下条件之一：
呃。。。好难懂。。。我也没怎么懂，没关系，先放着，慢慢理解。在后面在深入理解 browsing-context 和 shadowRoot 以后再回头看吧。
一般来说，可以获得焦点的元素：
1.有 href 属性 的 a 标签（没有会被忽略）
2.input，button 等表单元素
3.iframe
4.指定了 tabindex 属性的普通元素
参考：
1.:focus
2.CSS :focus 伪类 JS focus 事件提高网站键盘可访问性
3.:focus
4.About the term "top-level-browsing-context" #2322
5.Focus
6.聚焦：focus/blur
7.点击态样式：focus, active, hover 的区别与兼容性
8.HTML tabindex属性与web网页键盘无障碍访问
1.CSS :focus-visible伪类让我感动哭了
2.span与a元素的键盘聚焦性以及键盘点击性研究
3.js下拉菜单实现与可访问性问题的一些思考
4.页面可用性之outline轮廓外框的一些研究
今天打开项目，偶然间发现导航栏的按钮 tab 有时候会有一个特殊效果(element-ui 的 el-tab 组件)：
我记得我们项目好像没有设置过这种效果呀，而且，这种效果在我们点击 tab 的时候，只是偶尔出现，这就让我更好奇了。
尝试点击好几次，都没有复现，然后就用 Tab 键按了几下，果然复现，我立即打开控制台。。。样式竟然没了，我再试了一次，只要点击任何地方，那个特殊的样式就会消失，我感觉这可能跟焦点有关。
提前在控制台锁定目标元素，使用 Tab 键切换到目标，然后发现目标元素被被加上一个
is-focus的类名，当然，同类的其他 tab 也有，可能与这个类名有关，但不太可能直接由这个类名引起，所以还得再看看样式，果然就发现了问题：tab 聚焦以后就会有这个效果，确实也与
is-focus有间接关系，这个有关是 element-ui 做的处理。然后就去查查相关资料，一探究竟，也在此做个记录。
1.focus 简介[1]
一个 HTML 用户界面通常包括多个交互式控件，诸如表单控件，可滚动区域，链接，对话框，浏览器标签，等等的。
这些窗口小部件形成一个层次结构，其中一些窗口小部件（例如浏览器选项卡，对话框）包含其他窗口小部件（例如链接，表单控件）。
当使用键盘与界面进行交互时，键输入从系统通过交互式窗口小部件的层次结构被引导到一个活动的窗口小部件，就称该窗口小部件获得焦点。
2.:focus
CSS 伪类
:focus表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。先介绍一下键盘访问网站的常用操作[2]：
其中 Tab 键索引和 Enter 键点击是与交互相关的最重要的两个键盘行为。一般的操作行为是这样的，先 Tab 键，按次序不断切换
focus控件元素（包括链接，按钮，输入框等表单元素或者focus设置了tabindex的普通元素）；处于 focus 状态元素，浏览器一般会通过虚框或者外发光的形式进行区分和提示，此时我们在按下 Enter 回车键，就相当于鼠标点击了这个元素，从而可以前往我们想去的目的地，或者执行我们想要的交互效果。focus状态元素的标记默认全部都是使用outline属性[2]。那么，元素能获得焦点的条件是什么呢？
1.它的 顶层浏览上下文(top-level browsing context) 具有系统焦点，但它本身不是一个 浏览上下文容器(browsing context container)；
2.至少满足以下条件之一：
呃。。。好难懂。。。我也没怎么懂，没关系，先放着，慢慢理解。在后面在深入理解 browsing-context 和 shadowRoot 以后再回头看吧。
一般来说，可以获得焦点的元素：
1.有 href 属性 的 a 标签（没有会被忽略）
2.input，button 等表单元素
3.iframe
4.指定了 tabindex 属性的普通元素
参考：
1.:focus
2.CSS :focus 伪类 JS focus 事件提高网站键盘可访问性
3.:focus
4.About the term "top-level-browsing-context" #2322
5.Focus
6.聚焦：focus/blur
7.点击态样式：focus, active, hover 的区别与兼容性
8.HTML tabindex属性与web网页键盘无障碍访问
1.CSS :focus-visible伪类让我感动哭了
2.span与a元素的键盘聚焦性以及键盘点击性研究
3.js下拉菜单实现与可访问性问题的一些思考
4.页面可用性之outline轮廓外框的一些研究