google.com 如何將標簽焦點放在不可聚焦的元素上

Question

請 go 到 google.com 並搜索“字典”，通過 Tab 鍵和 select “跳到主要內容”：

步驟1

點擊回車后，字典元素獲得焦點：

第2步

當我檢查它時，它是一個帶有aria-level屬性的 div，沒有tabindex 。

第三步

所以我的問題是，一個不可聚焦的元素怎么能像這樣聚焦？

編輯：當我嘗試將確切的 div 元素保存到全局 var 並調用focus時，它永遠不會被聚焦。

Answer 1

當您在該消息上按Enter時，JavaScript 代碼將tabindex="-1"添加到元素並聚焦它。 輸入前：

后：

當焦點離開元素（可能是blur事件處理程序）時，JavaScript 代碼會從元素中刪除tabindex 。

如果您右鍵單擊該元素並在“元素”面板中顯示它，則可以看到這一點，然后在您選項卡時觀察該元素，直到您再次看到該元素。 例如，如果您在打開 Elements 面板和Shift+Tab后單擊頁面主體頂部附近的任意位置，最終您會再次看到相同的“顯示主要內容”框，當您按Enter時，您可以看到tabindex得到添加（然后在您離開時看到它被刪除）。