From: Marcel Werk <burntime@woltlab.com>
Date: Sat, 16 Mar 2019 21:35:01 +0000 (+0100)
Subject: Improved a11y of spoiler bbcodes
X-Git-Tag: 5.2.0_Alpha_1~211
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e7b08e07cf258332c321446e0f8b913842c7d875;p=GitHub%2FWoltLab%2FWCF.git

Improved a11y of spoiler bbcodes

See #2713
---

diff --git a/com.woltlab.wcf/templates/spoilerMetaCode.tpl b/com.woltlab.wcf/templates/spoilerMetaCode.tpl
index 5b1b26dd40..cf61094181 100644
--- a/com.woltlab.wcf/templates/spoilerMetaCode.tpl
+++ b/com.woltlab.wcf/templates/spoilerMetaCode.tpl
@@ -1,9 +1,9 @@
 <div class="spoilerBox jsSpoilerBox">
 	<div class="jsOnly spoilerBoxHeader">
-		<a class="button small jsSpoilerToggle"{if $buttonLabel} data-has-custom-label="true"{/if}>{if $buttonLabel}{$buttonLabel}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
+		<a href="#" id="spoiler-button-{@$spoilerID}" role="button" aria-expanded="false" aria-controls="spoiler-content-{@$spoilerID}" class="button small jsSpoilerToggle"{if $buttonLabel} data-has-custom-label="true"{/if}>{if $buttonLabel}{$buttonLabel}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
 	</div>
 	
-	<div class="spoilerBoxContent" style="display: none">
+	<div class="spoilerBoxContent" style="display: none" id="spoiler-content-{@$spoilerID}" aria-hidden="true" aria-labelledby="spoiler-button-{@$spoilerID}">
 		<!-- META_CODE_INNER_CONTENT -->
 	</div>
 	
@@ -20,7 +20,10 @@
 					event.preventDefault();
 					
 					toggleButton.classList.toggle('active');
-					window[(toggleButton.classList.contains('active') ? 'elShow' : 'elHide')](container);
+					var isActive = toggleButton.classList.contains('active');
+					window[(isActive ? 'elShow' : 'elHide')](container);
+					elAttr(toggleButton, 'aria-expanded', isActive);
+					elAttr(container, 'aria-hidden', !isActive);
 					
 					if (!elDataBool(toggleButton, 'has-custom-label')) {
 						toggleButton.textContent = (toggleButton.classList.contains('active')) ? '{lang}wcf.bbcode.spoiler.hide{/lang}' : '{lang}wcf.bbcode.spoiler.show{/lang}';
diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSpoiler.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSpoiler.class.php
index 5550f6c708..5da1594ef6 100644
--- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSpoiler.class.php
+++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabSpoiler.class.php
@@ -47,7 +47,8 @@ class HtmlOutputNodeWoltlabSpoiler extends AbstractHtmlOutputNode {
 	 */
 	public function replaceTag(array $data) {
 		WCF::getTPL()->assign([
-			'buttonLabel' => $data['label']
+			'buttonLabel' => $data['label'],
+			'spoilerID' => substr(StringUtil::getRandomID(), 0, 8)
 		]);
 		return WCF::getTPL()->fetch((HtmlBBCodeParser::getInstance()->getIsGoogleAmp() ? 'spoilerAmpMetaCode' : 'spoilerMetaCode'));
 	}