IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 20:24:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: makes quote controls accessible (#12073)

Browse Source
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");
navLink = `<a href='${this._urlForPostNumber(
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
let expandContract = "";
const isExpanded = $aside.data("expanded") === true;
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");
}
if (this.ignoredUsers && this.ignoredUsers.length > 0) {
@ -277,9 +280,14 @@ export default class PostCooked {
return;
}
$quotes.each((i, e) => {
$quotes.each((index, e) => {
const $aside = $(e);
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");
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);
}
.quote-controls {
.quote-toggle {
padding: 0;
}
}
.cooked .highlight {
background-color: var(--tertiary-low);
padding: 2px;