Improved a11y of spoiler bbcodes

See #2713

diff --git a/com.woltlab.wcf/templates/spoilerMetaCode.tpl b/com.woltlab.wcf/templates/spoilerMetaCode.tpl
index 5b1b26dd4054e8b78becf2a582d3f1431c1dc6e3..cf61094181114b5bbb9121579529b8a5b420c1ba 100644 (file)
--- 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 5550f6c70851cad6fddba5e68edc741c1cb515bc..5da1594ef60a9d78b00f3af103180a98ae9e5336 100644 (file)
--- 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'));
        }