A11Y: change tabLoc tagName from <a> to <span>

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 `<a>`
element and read out the topic ID and I've found that changing the tag
to `<span>` fixes the problem.
This commit is contained in:
OsamaSayegh 2022-03-29 14:18:47 +03:00 committed by Osama Sayegh
parent ef66b3fd40
commit acdb64eb7e
2 changed files with 3 additions and 3 deletions

View File

@ -772,7 +772,7 @@ export default {
},
_onScrollEndsCallback() {
document.querySelector(".topic-post.selected a.tabLoc")?.focus();
document.querySelector(".topic-post.selected span.tabLoc")?.focus();
},
categoriesTopicsList() {

View File

@ -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) {