Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: makes quote controls accessible (#12073)

This commit is contained in:
Joffrey JAFFEUX 2021-02-15 12:31:35 +01:00 committed by GitHub
parent d8705ee0ad
commit 79d7c4a3c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/discourse/app/widgets/post-cooked.js
View File

@ -252,13 +252,16 @@ export default class PostCooked {
let icon = iconHTML("arrow-up"); let icon = iconHTML("arrow-up");
navLink = `<a href='${this._urlForPostNumber( navLink = `<a href='${this._urlForPostNumber(
postNumber postNumber
)}' title='${quoteTitle}' class='back'>${icon}</a>`; )}' title='${quoteTitle}' class='btn-flat back'>${icon}</a>`;
} }
// Only add the expand/contract control if it's not a full post // Only add the expand/contract control if it's not a full post
let expandContract = ""; let expandContract = "";
const isExpanded = $aside.data("expanded") === true;
if (!$aside.data("full")) { if (!$aside.data("full")) {
expandContract = iconHTML(desc, { title: "post.expand_collapse" }); let icon = iconHTML(desc, { title: "post.expand_collapse" });
const quoteId = $aside.find("blockquote").attr("id");
expandContract = `<button aria-controls="${quoteId}" aria-expanded="${isExpanded}" class="quote-toggle btn-flat">${icon}</button>`;
$(".title", $aside).css("cursor", "pointer"); $(".title", $aside).css("cursor", "pointer");
} }
if (this.ignoredUsers && this.ignoredUsers.length > 0) { if (this.ignoredUsers && this.ignoredUsers.length > 0) {
@ -277,9 +280,14 @@ export default class PostCooked {
return; return;
} }
$quotes.each((i, e) => { $quotes.each((index, e) => {
const $aside = $(e); const $aside = $(e);
if ($aside.data("post")) { if ($aside.data("post")) {
const quoteId = `quote-id-${$aside.data("topic")}-${$aside.data(
"post"
)}-${index}`;
$aside.find("blockquote").attr("id", quoteId);
this._updateQuoteElements($aside, "chevron-down"); this._updateQuoteElements($aside, "chevron-down");
const $title = $(".title", $aside); const $title = $(".title", $aside);

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

@ -247,6 +247,12 @@ blockquote {
color: var(--primary-low-mid-or-secondary-high); color: var(--primary-low-mid-or-secondary-high);
} }
.quote-controls {
.quote-toggle {
padding: 0;
}
}
.cooked .highlight { .cooked .highlight {
background-color: var(--tertiary-low); background-color: var(--tertiary-low);
padding: 2px; padding: 2px;