WordPress手风琴获焦点后箭头键无法滚动页面问题排查

核心问题 #

手风琴项通过Tab聚焦后，上下箭头键无法控制页面滚动；移出焦点后恢复正常。同时观察到<html>元素的data-whatelement属性会随焦点元素类型变化：箭头键可用时为data-whatelement="button"，不可用时为data-whatelement="a"，二者高度相关。

排查步骤 #

• 锁定data-whatelement的来源：这个属性基本是无障碍适配工具（或屏幕阅读器辅助脚本）添加的，这类工具会根据焦点元素的标签（<a>/<button>）调整全局属性，并且可能对<a>标签的箭头键事件做劫持——用于实现链接间的快速导航，从而阻止了页面滚动的默认行为。
• 检查手风琴触发元素的实际类型：确认手风琴的可聚焦元素到底是<button>还是<a>，排查是否存在JS动态切换元素标签/属性的逻辑，导致焦点切换时被无障碍工具误判。
• 排查键盘事件劫持：打开浏览器开发者工具（F12）的「Event Listeners」面板，选中聚焦状态下的手风琴元素，筛选keydown/keyup事件，查看是否有第三方脚本（主题或插件代码）调用了preventDefault()阻止箭头键的默认滚动行为。
• 验证属性影响：在浏览器控制台执行document.documentElement.removeAttribute('data-whatelement')，重新聚焦手风琴项测试箭头键是否恢复滚动，直接验证该属性是否为问题诱因。
• 排查WordPress插件/主题：检查站点是否安装了无障碍类插件（如WP Accessibility），或主题自带的无障碍适配代码，查看其是否存在根据焦点元素类型修改全局属性并劫持键盘事件的逻辑。

内容的提问来源于stack exchange，提问作者Mance Rah