在 Safari 上，为什么在单击该元素之前会在该元素周围出现一个焦点轮廓？
On Safari, why is there a focus outline appearing around this element before it has been clicked on?
这是在 Safari 中发生的，可以通过单击屏幕右下角的“立即聊天”按钮在此处查看：https://online.calvin.edu/
当您单击“立即聊天”按钮时，聊天中的最小化按钮 window 上有一个焦点轮廓。我不明白为什么它默认在 CSS.
中的任何位置应用该轮廓
screenshot
将 outline:none; 添加到包含 SVG
的最小化 div
就我而言，我尝试使用开发工具：
正在工作
当对话框打开时，浏览器认为 <embeddedservice-chat-header> 有焦点。您可以通过在代码检查器的控制台面板中发出命令 document.activeElement 来查看。如果您通过 tab 键浏览对话框的其余部分并在每个 tab 键后发出 document.activeElement，您将看到焦点移动到“欢迎”<div>（为什么？），三个 <input> 元素，“通过提交”<label>（同样，为什么？），然后是“开始聊天”<button>.
（<div> 和 <label> 元素不是交互式元素，这就是为什么我要问“为什么”焦点转移到它们。）
继续按 Tab 键，焦点将移回对话框顶部。它移动到最小化按钮，然后是关闭按钮。但是，<embeddedservice-chat-header> 接收焦点，而不是实际的 <button> 元素接收焦点。所以这让我认为自定义 <embeddedservice-chat-header> 元素可能有一些内置的 javascript 将焦点移动到内部元素。
这是在 Safari 中发生的，可以通过单击屏幕右下角的“立即聊天”按钮在此处查看：https://online.calvin.edu/
当您单击“立即聊天”按钮时，聊天中的最小化按钮 window 上有一个焦点轮廓。我不明白为什么它默认在 CSS.
中的任何位置应用该轮廓screenshot
将 outline:none; 添加到包含 SVG
就我而言，我尝试使用开发工具：
正在工作
当对话框打开时，浏览器认为 <embeddedservice-chat-header> 有焦点。您可以通过在代码检查器的控制台面板中发出命令 document.activeElement 来查看。如果您通过 tab 键浏览对话框的其余部分并在每个 tab 键后发出 document.activeElement，您将看到焦点移动到“欢迎”<div>（为什么？），三个 <input> 元素，“通过提交”<label>（同样，为什么？），然后是“开始聊天”<button>.
（<div> 和 <label> 元素不是交互式元素，这就是为什么我要问“为什么”焦点转移到它们。）
继续按 Tab 键，焦点将移回对话框顶部。它移动到最小化按钮，然后是关闭按钮。但是，<embeddedservice-chat-header> 接收焦点，而不是实际的 <button> 元素接收焦点。所以这让我认为自定义 <embeddedservice-chat-header> 元素可能有一些内置的 javascript 将焦点移动到内部元素。