From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 21 Feb 2021 12:20:04 +0000 (+0100)
Subject: Improved the accessibility for code listings and quotes
X-Git-Tag: 5.4.0_Alpha_1~249
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=042d7d32384fa2e82c6fcd815f6b94fc8e345a1b;p=GitHub%2FWoltLab%2FWCF.git

Improved the accessibility for code listings and quotes

Fixes #3702
---

diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 35c0c8c4b1..98b9adbef1 100644
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -3,14 +3,14 @@
 		<div class="codeBoxHeadline">{$title}{if $filename}: {$filename}{/if}</div>
 		
 		{if !$isAmp && $lines > 10}
-			<span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}"></span>
+			<span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0"></span>
 		{/if}
 	</div>
 	
 	{assign var='lineNumber' value=$startLineNumber}
 	<pre class="codeBoxCode collapsibleBbcodeOverflow"><code{if $language} class="language-{$language}"{/if}>{foreach from=$content item=line}{*
 		*}{assign var='codeLineID' value='codeLine_'|concat:$lineNumber:'_':$codeID}{*
-		*}<span class="codeBoxLine" id="{$codeLineID}"><a href="{@$__wcf->getAnchor($codeLineID)}" class="lineAnchor" title="{@$lineNumber}"></a><span>{$line}</span></span>{*
+		*}<span class="codeBoxLine" id="{$codeLineID}"><a href="{@$__wcf->getAnchor($codeLineID)}" class="lineAnchor" title="{@$lineNumber}" tabindex="-1" aria-hidden="true"></a><span>{$line}</span></span>{*
 		*}{assign var='lineNumber' value=$lineNumber+1}{*
 	*}{/foreach}</code></pre>
 	
diff --git a/com.woltlab.wcf/templates/quoteMetaCode.tpl b/com.woltlab.wcf/templates/quoteMetaCode.tpl
index 7b15fea581..9dcf9cbab3 100644
--- a/com.woltlab.wcf/templates/quoteMetaCode.tpl
+++ b/com.woltlab.wcf/templates/quoteMetaCode.tpl
@@ -26,7 +26,7 @@
 	</div>
 	
 	{if $collapseQuote}
-		<span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
+		<span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0">{lang}wcf.bbcode.button.showAll{/lang}</span>
 		
 		<script data-relocate="true">
 			require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
diff --git a/ts/WoltLabSuite/Core/Bbcode/Code.ts b/ts/WoltLabSuite/Core/Bbcode/Code.ts
index 65c73a6a8c..c2ee69be72 100644
--- a/ts/WoltLabSuite/Core/Bbcode/Code.ts
+++ b/ts/WoltLabSuite/Core/Bbcode/Code.ts
@@ -62,12 +62,23 @@ class Code {
     }
 
     const button = document.createElement("span");
+    button.tabIndex = 0;
+    button.setAttribute("role", "button");
     button.className = "icon icon24 fa-files-o pointer jsTooltip";
     button.setAttribute("title", Language.get("wcf.message.bbcode.code.copy"));
-    button.addEventListener("click", async () => {
+
+    const clickCallback = async () => {
       await Clipboard.copyElementTextToClipboard(this.codeContainer);
 
       UiNotification.show(Language.get("wcf.message.bbcode.code.copy.success"));
+    };
+    button.addEventListener("click", clickCallback);
+    button.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+
+        void clickCallback();
+      }
     });
 
     header.appendChild(button);
diff --git a/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts b/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts
index f1323f4643..d7f91226f2 100644
--- a/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts
+++ b/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts
@@ -11,6 +11,14 @@ function initContainer(container: HTMLElement, toggleButtons: HTMLElement[], ove
   toggleButtons.forEach((toggleButton) => {
     toggleButton.classList.add("jsToggleButtonEnabled");
     toggleButton.addEventListener("click", (ev) => toggleContainer(container, toggleButtons, ev));
+
+    toggleButton.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+
+        toggleContainer(container, toggleButtons);
+      }
+    });
   });
 
   // expand boxes that are initially scrolled
diff --git a/wcfsetup/install/files/acp/templates/codeMetaCode.tpl b/wcfsetup/install/files/acp/templates/codeMetaCode.tpl
index 35c0c8c4b1..98b9adbef1 100644
--- a/wcfsetup/install/files/acp/templates/codeMetaCode.tpl
+++ b/wcfsetup/install/files/acp/templates/codeMetaCode.tpl
@@ -3,14 +3,14 @@
 		<div class="codeBoxHeadline">{$title}{if $filename}: {$filename}{/if}</div>
 		
 		{if !$isAmp && $lines > 10}
-			<span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}"></span>
+			<span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0"></span>
 		{/if}
 	</div>
 	
 	{assign var='lineNumber' value=$startLineNumber}
 	<pre class="codeBoxCode collapsibleBbcodeOverflow"><code{if $language} class="language-{$language}"{/if}>{foreach from=$content item=line}{*
 		*}{assign var='codeLineID' value='codeLine_'|concat:$lineNumber:'_':$codeID}{*
-		*}<span class="codeBoxLine" id="{$codeLineID}"><a href="{@$__wcf->getAnchor($codeLineID)}" class="lineAnchor" title="{@$lineNumber}"></a><span>{$line}</span></span>{*
+		*}<span class="codeBoxLine" id="{$codeLineID}"><a href="{@$__wcf->getAnchor($codeLineID)}" class="lineAnchor" title="{@$lineNumber}" tabindex="-1" aria-hidden="true"></a><span>{$line}</span></span>{*
 		*}{assign var='lineNumber' value=$lineNumber+1}{*
 	*}{/foreach}</code></pre>
 	
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
index daae7e54b5..c6be9f3c6d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
@@ -48,11 +48,20 @@ define(["require", "exports", "tslib", "../Language", "../Clipboard", "../Ui/Not
                 return;
             }
             const button = document.createElement("span");
+            button.tabIndex = 0;
+            button.setAttribute("role", "button");
             button.className = "icon icon24 fa-files-o pointer jsTooltip";
             button.setAttribute("title", Language.get("wcf.message.bbcode.code.copy"));
-            button.addEventListener("click", async () => {
+            const clickCallback = async () => {
                 await Clipboard.copyElementTextToClipboard(this.codeContainer);
                 UiNotification.show(Language.get("wcf.message.bbcode.code.copy.success"));
+            };
+            button.addEventListener("click", clickCallback);
+            button.addEventListener("keydown", (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    void clickCallback();
+                }
             });
             header.appendChild(button);
         }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js
index 99e97bf208..81575441bb 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js
@@ -14,6 +14,12 @@ define(["require", "exports"], function (require, exports) {
         toggleButtons.forEach((toggleButton) => {
             toggleButton.classList.add("jsToggleButtonEnabled");
             toggleButton.addEventListener("click", (ev) => toggleContainer(container, toggleButtons, ev));
+            toggleButton.addEventListener("keydown", (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    toggleContainer(container, toggleButtons);
+                }
+            });
         });
         // expand boxes that are initially scrolled
         if (overflowContainer.scrollTop !== 0) {