IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-08 12:08:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: add aria-label to quote expansion button, jump to post (#33569)

Browse Source 
Concerns the quote controls: 


![quote](https://github.com/user-attachments/assets/a9d21286-1f44-4f9f-a1cb-6fc4fdb8c350)

This improves the title so rather than "expand/collapse" for both states
it represents the current action "expand" or "collapse". This is also
added for aria-label.

I've also added aria-label to the "go to the quoted post" arrow.
This commit is contained in:
Kris
2025-07-10 16:59:15 -04:00
committed by GitHub
parent a3b192f3bd
commit 3056f7579f
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/discourse/app/components/post/quoted-content.gjs
+3 -1
View File
@@ -214,7 +214,8 @@ export default class PostQuotedContent extends Component {
@action={{this.toggleExpanded}}
@ariaControls={{@id}}
@ariaExpanded={{this.expanded}}
@title="post.expand_collapse"
@ariaLabel={{if this.expanded "post.collapse" "expand"}}
@title={{if this.expanded "post.collapse" "expand"}}
>
{{! rendering the icon in the block instead of using the parameter `@icon` prevents DButton from adding
extra whitespace that will interfere with the text captured when quoting a quoted content }}
@@ -226,6 +227,7 @@ export default class PostQuotedContent extends Component {
class="btn-flat back"
@href={{this.quotedPostUrl}}
@title="post.follow_quote"
@ariaLabel="post.follow_quote"
>
{{! rendering the icon in the block instead of using the parameter `@icon` prevents DButton from adding
extra whitespace that will interfere with the text captured when quoting a quoted content }}
app/assets/javascripts/discourse/app/widgets/post-cooked.js
+4 -3
View File
@@ -269,7 +269,7 @@ export default class PostCooked {
const icon = iconHTML("arrow-up");
navLink = `<a href='${this._urlForPostNumber(
postNumber
)}' title='${quoteTitle}' class='btn-flat back'>${icon}</a>`;
)}' title='${quoteTitle}' aria-label='${quoteTitle}' class='btn-flat back'>${icon}</a>`;
}
// Only add the expand/contract control if it's not a full post
@@ -277,12 +277,13 @@ export default class PostCooked {
let expandContract = "";
if (!aside.dataset.full) {
const icon = iconHTML(desc, { title: "post.expand_collapse" });
const icon = iconHTML(desc);
const quoteId = aside.querySelector("blockquote")?.id;
if (quoteId) {
const isExpanded = aside.dataset.expanded === "true";
expandContract = `<button aria-controls="${quoteId}" aria-expanded="${isExpanded}" class="quote-toggle btn-flat">${icon}</button>`;
const toggleLabel = isExpanded ? i18n("post.collapse") : i18n("expand");
expandContract = `<button aria-controls="${quoteId}" aria-expanded="${isExpanded}" aria-label="${toggleLabel}" title="${toggleLabel}" class="quote-toggle btn-flat">${icon}</button>`;
if (titleElement) {
titleElement.style.cursor = "pointer";