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:
parent
ef66b3fd40
commit
acdb64eb7e
|
@ -772,7 +772,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
_onScrollEndsCallback() {
|
_onScrollEndsCallback() {
|
||||||
document.querySelector(".topic-post.selected a.tabLoc")?.focus();
|
document.querySelector(".topic-post.selected span.tabLoc")?.focus();
|
||||||
},
|
},
|
||||||
|
|
||||||
categoriesTopicsList() {
|
categoriesTopicsList() {
|
||||||
|
|
|
@ -663,8 +663,8 @@ createWidget("post-article", {
|
||||||
|
|
||||||
html(attrs, state) {
|
html(attrs, state) {
|
||||||
const rows = [
|
const rows = [
|
||||||
h("a.tabLoc", {
|
h("span.tabLoc", {
|
||||||
attributes: { href: "", "aria-hidden": true, tabindex: -1 },
|
attributes: { "aria-hidden": true, tabindex: -1 },
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
if (state.repliesAbove.length) {
|
if (state.repliesAbove.length) {
|
||||||
|
|
Loading…
Reference in New Issue