From acdb64eb7e449d4652e412e7951445b7402797b7 Mon Sep 17 00:00:00 2001 From: OsamaSayegh Date: Tue, 29 Mar 2022 14:18:47 +0300 Subject: [PATCH] A11Y: change tabLoc tagName from to The tabLoc is a hidden element inside the post region that we use to move the focus close to the post that's visually highlighted (by changing the background color and then fading it away) when a topic is opened so that screen readers can start reading from that post rather than the top of the page. Some screen readers get confused by the tabLoc element being an `` element and read out the topic ID and I've found that changing the tag to `` fixes the problem. --- .../javascripts/discourse/app/lib/keyboard-shortcuts.js | 2 +- app/assets/javascripts/discourse/app/widgets/post.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js b/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js index ab11910b458..0e986f53ca0 100644 --- a/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js +++ b/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js @@ -772,7 +772,7 @@ export default { }, _onScrollEndsCallback() { - document.querySelector(".topic-post.selected a.tabLoc")?.focus(); + document.querySelector(".topic-post.selected span.tabLoc")?.focus(); }, categoriesTopicsList() { diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js index 2845a51cf34..ca5beb554fe 100644 --- a/app/assets/javascripts/discourse/app/widgets/post.js +++ b/app/assets/javascripts/discourse/app/widgets/post.js @@ -663,8 +663,8 @@ createWidget("post-article", { html(attrs, state) { const rows = [ - h("a.tabLoc", { - attributes: { href: "", "aria-hidden": true, tabindex: -1 }, + h("span.tabLoc", { + attributes: { "aria-hidden": true, tabindex: -1 }, }), ]; if (state.repliesAbove.length) {