只有原装主题才能用。这个JS提供的大致功能如下:
- 通过选择器找到所有带有包含"icon"的class的<i>元素,并将它们的aria-hidden属性设置为true,从而对屏幕阅读器隐藏这些图标。
- 隐藏了帖子中的头像(avatar)(通过设置aria-hidden属性的方式做到的)。
- 将包含"←"符号的元素的aria-hidden属性设置为true,隐藏这些元素。
- 将包含回复信息的元素的aria-hidden属性设置为true,隐藏这些元素。
- 对每个帖子中的正文(.message)进行处理,为每条消息添加一个只能被屏幕阅读器识别的<span>元素,同时将tabindex属性设置为-1,以确保这些消息不会被键盘焦点访问。
- 移除最后一条消息的tabindex属性、accesskey属性和accesskey-x类,并移除其中的<span>元素。
- 将回复按钮的提示文字样式从d-none改为sr-only,以确保只有屏幕阅读器能够读取到这些文字。
- 当页面加载完成后,将焦点设置在第一条消息或者邮箱输入框上,并在200毫秒后将焦点设置在主题输入框上。
而关于accesskey属性:
- 使用 document.addEventListener 监听键盘事件,
- 当同时按下Alt键和Shift键并且按下了键盘上的'X'键时,会调用 previousFocus('accesskey-x') 函数,移动焦点到上一个具有'accesskey-x'类名的元素。
- 同理,当按下Alt键并且按下了'X'键时,会调用 nextFocus('accesskey-x') 函数,移动焦点到下一个具有'accesskey-x'类名的元素。
- 对于'Z'键也有类似的处理逻辑。
accesskey-x包含这些CSS选择器:a.page-link, a.page-link(可能是重复的选择器,可能是一个错误), .subject a[href*=thread], .message
accesskey-z包含这些CSS选择器:textarea, a[href*=thread-create], .nav-link, a[href*=user-log], a[href*=my]
2024-02-16