github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 20:43:19 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

A11Y: Improve setting focus to post (#23243)

Browse Source
This commit is contained in:
Penar Musaraj 2023-08-25 14:45:56 -04:00 committed by GitHub
parent 058c8496f0
commit a94834abd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js
View File

@ -803,7 +803,9 @@ export default {
},
_onScrollEndsCallback() {
document.querySelector(".topic-post.selected span.tabLoc")?.focus();
document
.querySelector(".topic-post.selected a:not([tabindex='-1'])")
?.focus();
},
categoriesTopicsList() {

3
app/assets/javascripts/discourse/app/lib/utilities.js
View File

@ -77,7 +77,8 @@ export function highlightPost(postNumber) {
return;
}
container.querySelector(".tabLoc")?.focus();
// sets focus to the first focusable anchor in the post
container.querySelector("a:not([tabindex='-1'])")?.focus();
const element = container.querySelector(".topic-body");
if (!element || element.classList.contains("highlighted")) {

3
app/assets/javascripts/discourse/app/widgets/post-small-action.js
View File

@ -190,9 +190,6 @@ export default createWidget("post-small-action", {
}
return [
h("span.tabLoc", {
attributes: { "aria-hidden": true, tabindex: -1 },
}),
h("div.topic-avatar", iconNode(icons[attrs.actionCode] || "exclamation")),
h("div.small-action-desc", [
h("div.small-action-contents", contents),

6
app/assets/javascripts/discourse/app/widgets/post.js
View File

@ -751,11 +751,7 @@ createWidget("post-article", {
},
html(attrs, state) {
const rows = [
h("span.tabLoc", {
attributes: { "aria-hidden": true, tabindex: -1 },
}),
];
const rows = [];
if (state.repliesAbove.length) {
const replies = state.repliesAbove.map((p) => {
return this.attach("embedded-post", p, {

12
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1170,11 +1170,6 @@ blockquote > *:last-child {
);
min-width: 0; // Allows flex container to shrink
.avatar {
margin-right: 0.5em;
float: left;
}
p {
margin: 0;
padding: 0.15em 0.5em 0 0;
@ -1183,6 +1178,13 @@ blockquote > *:last-child {
.small-action-contents {
flex: 1 1 auto;
display: flex;
a.trigger-user-card {
display: inline-flex;
align-items: center;
margin-right: 0.5em;
border-radius: 1em;
}
}
.small-action-buttons {

4
app/assets/stylesheets/common/components/keyboard_shortcuts.scss
View File

@ -15,10 +15,6 @@
box-shadow: -3px 0 0 var(--danger);
}
.tabLoc:focus {
outline: none;
}
.latest .featured-topic {
padding-left: 4px;
}