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 35c0c8c4b1024148651ed0c8c7afd6c17efa073c..98b9adbef1f9603cf78b618eab626d1061f291cb 100644 (file)
--- 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 7b15fea581967540f84e779afa90f066a890f19a..9dcf9cbab3ae969e7eface9fd097d253f96bf982 100644 (file)
--- 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 65c73a6a8cac3831a82d483b32362e9a4d640951..c2ee69be72b1698ff48ef6b89d96929e48395095 100644 (file)
--- 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 f1323f4643106494bfb8aac7b062c89902f19307..d7f91226f2085aba99014ff2eed66d237ab43a42 100644 (file)
--- 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 35c0c8c4b1024148651ed0c8c7afd6c17efa073c..98b9adbef1f9603cf78b618eab626d1061f291cb 100644 (file)
--- 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 daae7e54b5d8644950dcab6c14d2c63e75a4bbfd..c6be9f3c6d025ca8fcdd74da4760e9419936efa3 100644 (file)
--- 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 99e97bf20805f13db3166f7a8797eec5d339a993..81575441bb9c89138b6f27008406528e52238ab2 100644 (file)
--- 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) {