Hide TOC with CSS instead of JavaScript

Changes in the behavior:
* The toggle button generate no FOUC on loading.
* On keyboard navigation the toggle key is the space key and not the
  return key.
* Animation on hide and show is missing. Maybe a new animation with CSS
  can added.
* The state of the button is not saved in a cookie.
* Self-build TOCs can not get hidden.

Browser support:
* The new implementation does not need JavaScript and therefor it works
  on browser with disabled JavaScript and on Grade C browser.
* The new implementation requires the CSS pseudo-class selector
  :checked. Therefor IE8 and lower are not supported.

Risks:
* The new implementation needs additional HTML elements. These elements
  also get cached and crawled. The elements have no content so they get
  hopefully ignored by crawler.
* The new CSS code imitates some styles (link, focus). This must kept
  up to date.
* Multiple TOCs on one page would generate the same id attribute.
  This can avoided by appending a counter or better and easier a random
  string to the id attribute.

Bug: T195053
Change-Id: I82db33d656b3795d7134a91d20ed9d93a3471086

diff --git a/includes/Linker.php b/includes/Linker.php
index 5fc5eb1..f4b9ede 100644 (file)
--- a/includes/Linker.php
+++ b/includes/Linker.php
@@ -1583,12 +1583,24 @@ class Linker {
                $title = wfMessage( 'toc' )->inLanguage( $lang )->escaped();
 
                return '<div id="toc" class="toc">'
+                       . Html::element( 'input', [
+                               'type' => 'checkbox',
+                               'id' => 'toctogglecheckbox',
+                               'class' => 'toctogglecheckbox',
+                               'style' => 'display:none',
+                       ] )
                        . Html::openElement( 'div', [
                                'class' => 'toctitle',
                                'lang' => $lang->getHtmlCode(),
                                'dir' => $lang->getDir(),
                        ] )
-                       . '<h2>' . $title . "</h2></div>\n"
+                       . "<h2>$title</h2>"
+                       . '<span class="toctogglespan">'
+                       . Html::label( '', 'toctogglecheckbox', [
+                               'class' => 'toctogglelabel',
+                       ] )
+                       . '</span>'
+                       . "</div>\n"
                        . $toc
                        . "</ul>\n</div>\n";
        }

diff --git a/includes/api/ApiHelp.php b/includes/api/ApiHelp.php
index 8d24859..cf92679 100644 (file)
--- a/includes/api/ApiHelp.php
+++ b/includes/api/ApiHelp.php
@@ -104,6 +104,7 @@ class ApiHelp extends ApiBase {
                ] );
                if ( !empty( $options['toc'] ) ) {
                        $out->addModules( 'mediawiki.toc' );
+                       $out->addModuleStyles( 'mediawiki.toc.styles' );
                }
                $out->setPageTitle( $context->msg( 'api-help-title' ) );
 

diff --git a/includes/skins/Skin.php b/includes/skins/Skin.php
index 340bc2f..b8cd921 100644 (file)
--- a/includes/skins/Skin.php
+++ b/includes/skins/Skin.php
@@ -235,6 +235,7 @@ abstract class Skin extends ContextSource {
 
                if ( $out->isTOCEnabled() ) {
                        $modules['content'][] = 'mediawiki.toc';
+                       $modules['styles']['content'][] = 'mediawiki.toc.styles';
                }
 
                // Add various resources if required

diff --git a/includes/specials/SpecialEditWatchlist.php b/includes/specials/SpecialEditWatchlist.php
index 5e04d8d..17b3201 100644 (file)
--- a/includes/specials/SpecialEditWatchlist.php
+++ b/includes/specials/SpecialEditWatchlist.php
@@ -160,6 +160,7 @@ class SpecialEditWatchlist extends UnlistedSpecialPage {
                } elseif ( $this->toc !== false ) {
                        $out->prependHTML( $this->toc );
                        $out->addModules( 'mediawiki.toc' );
+                       $out->addModuleStyles( 'mediawiki.toc.styles' );
                }
        }
 

diff --git a/resources/Resources.php b/resources/Resources.php
index 0fe5dd7..399f837 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1362,6 +1362,18 @@ return [
                'messages' => [ 'showtoc', 'hidetoc' ],
                'targets' => [ 'desktop', 'mobile' ],
        ],
+       'mediawiki.toc.styles' => [
+               'class' => ResourceLoaderLessVarFileModule::class,
+               'lessMessages' => [ 'hidetoc', 'showtoc' ],
+               'styles' => [
+                       'resources/src/mediawiki.toc.styles/common.css',
+                       'resources/src/mediawiki.toc.styles/screen.less'
+                               => [ 'media' => 'screen' ],
+                       'resources/src/mediawiki.toc.styles/print.css'
+                               => [ 'media' => 'print' ],
+               ],
+               'targets' => [ 'desktop', 'mobile' ],
+       ],
        'mediawiki.Uri' => [
                'scripts' => 'resources/src/mediawiki.Uri/Uri.js',
                'templates' => [

diff --git a/resources/src/mediawiki.toc.styles/common.css b/resources/src/mediawiki.toc.styles/common.css
new file mode 100644 (file)
index 0000000..31a8826
--- /dev/null
+++ b/resources/src/mediawiki.toc.styles/common.css
@@ -0,0 +1,6 @@
+/* This style is loaded on all media. */
+
+/* Hide the content of the TOC when the checkbox is checked. */
+.toctogglecheckbox:checked ~ ul {
+       display: none;
+}

diff --git a/resources/src/mediawiki.toc.styles/print.css b/resources/src/mediawiki.toc.styles/print.css
new file mode 100644 (file)
index 0000000..e905dbe
--- /dev/null
+++ b/resources/src/mediawiki.toc.styles/print.css
@@ -0,0 +1,4 @@
+/* Hide the complete TOC on print when the TOC is hidden. */
+.toctogglecheckbox:checked + .toctitle {
+       display: none;
+}

diff --git a/resources/src/mediawiki.toc.styles/screen.less b/resources/src/mediawiki.toc.styles/screen.less
new file mode 100644 (file)
index 0000000..16b2591
--- /dev/null
+++ b/resources/src/mediawiki.toc.styles/screen.less
@@ -0,0 +1,50 @@
+/* This style adds a toggle button with internationalized message for the TOC. */
+
+/* When the browser supports :checked then overwrite the style="display:none" and make the /*
+/* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
+:not( :checked ) > .toctogglecheckbox {
+       display: inline !important; /* stylelint-disable-line declaration-no-important */
+       position: absolute;
+       opacity: 0;
+}
+
+.toctogglespan {
+       font-size: 94%;
+}
+
+/* IE8 does not support :checked and therefor it does not support the hiding at all. */
+/* The selector ":not( :checked ) >" prevents that the useless brackets are shown on IE8. */
+:not( :checked ) > .toctogglespan:before {
+       content: ' [';
+}
+
+:not( :checked ) > .toctogglespan:after {
+       content: ']';
+}
+
+/* Make the label look like a link. */
+.toctogglelabel {
+       cursor: pointer;
+       color: #0645ad;
+}
+
+.toctogglelabel:hover {
+       text-decoration: underline;
+}
+
+/* Show a focus ring around the label when focusing the invisible checkbox. */
+/* This simulates that the label is in focus. */
+.toctogglecheckbox:focus + .toctitle .toctogglelabel {
+       text-decoration: underline;
+       outline: dotted 1px; /* Firefox style for focus */
+       outline: auto -webkit-focus-ring-color; /* Webkit style for focus */
+}
+
+/* Change the text of the button based on the state of the checkbox. */
+.toctogglecheckbox:checked + .toctitle .toctogglelabel:after {
+       content: '@{msg-showtoc}';
+}
+
+.toctogglecheckbox:not( :checked ) + .toctitle .toctogglelabel:after {
+       content: '@{msg-hidetoc}';
+}

diff --git a/resources/src/mediawiki.toc/toc.js b/resources/src/mediawiki.toc/toc.js
index 5e10a5b..4c201a6 100644 (file)
--- a/resources/src/mediawiki.toc/toc.js
+++ b/resources/src/mediawiki.toc/toc.js
@@ -6,6 +6,7 @@
                $content.find( '.toc' ).addBack( '.toc' ).each( function () {
                        var hideToc,
                                $this = $( this ),
+                               $tocToggleCheckbox = $this.children( '.toctogglecheckbox' ),
                                $tocTitle = $this.find( '.toctitle' ),
                                $tocToggleLink = $this.find( '.togglelink' ),
                                $tocList = $this.find( 'ul' ).eq( 0 );
@@ -27,7 +28,7 @@
 
                        // Only add it if there is a complete TOC and it doesn't
                        // have a toggle added already
-                       if ( $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
+                       if ( !$tocToggleCheckbox.length && $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
                                hideToc = mw.cookie.get( 'hidetoc' ) === '1';
 
                                $tocToggleLink = $( '<a role="button" tabindex="0" class="togglelink"></a>' )

diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt
index 05afefa..e1a94b3 100644 (file)
--- a/tests/parser/parserTests.txt
+++ b/tests/parser/parserTests.txt
@@ -16390,7 +16390,7 @@ Section headings with TOC
 Some text
 ===Another headline===
 !! html
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Headline_1"><span class="tocnumber">1</span> <span class="toctext">Headline 1</span></a>
 <ul>
@@ -16433,7 +16433,7 @@ __FORCETOC__
 ==Headline 2==
 ==Headline==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Headline_2"><span class="tocnumber">1</span> <span class="toctext">Headline 2</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Headline"><span class="tocnumber">2</span> <span class="toctext">Headline</span></a></li>
@@ -16467,7 +16467,7 @@ parsoid=wt2html
 =========Level 9 Heading=========
 ==========Level 10 Heading==========
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Level_1_Heading"><span class="tocnumber">1</span> <span class="toctext">Level 1 Heading</span></a>
 <ul>
@@ -16531,7 +16531,7 @@ TOC regression (T11764)
 ==title 2==
 ===title 2.1===
 !! html
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
 <ul>
@@ -16566,7 +16566,7 @@ TOC for heading containing <span id="..."></span> (T96153)
 __FORCETOC__
 ==<span id="old-anchor"></span>New title==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#New_title"><span class="tocnumber">1</span> <span class="toctext">New title</span></a></li>
 </ul>
@@ -16588,7 +16588,7 @@ wgMaxTocLevel=3
 ==title 2==
 ===title 2.1===
 !! html
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
 <ul>
@@ -16624,7 +16624,7 @@ wgMaxTocLevel=3
 ====Section 1.1.1.1====
 ==Section 2==
 !! html
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="tocnumber">1</span> <span class="toctext">Section 1</span></a>
 <ul>
@@ -16717,7 +16717,7 @@ __TOC__
 ===title 1.1===
 ==title 2==
 !! html
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
 <ul>
@@ -16793,7 +16793,7 @@ section 5
 !! html/php
 <p>The tooltips shall not show entities to the user (ie. be double escaped)
 </p>
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#text_.3E_text"><span class="tocnumber">1</span> <span class="toctext">text &gt; text</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#text_.3C_text"><span class="tocnumber">2</span> <span class="toctext">text &lt; text</span></a></li>
@@ -16869,7 +16869,7 @@ section 6
 !! html/php
 <p>Id should not contain + for spaces
 </p>
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Space_between_Text"><span class="tocnumber">1</span> <span class="toctext">Space between Text</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Space-Entity_between_Text"><span class="tocnumber">2</span> <span class="toctext">Space-Entity&#32;between&#32;Text</span></a></li>
@@ -16945,7 +16945,7 @@ parsoid=wt2html,wt2wt,html2html
 =''italic'' heading==
 ==''italic'' heading=
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#foo.3D"><span class="tocnumber">1</span> <span class="toctext">foo=</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#.3Dfoo"><span class="tocnumber">2</span> <span class="toctext">=foo</span></a></li>
@@ -16980,7 +16980,7 @@ HTML headers vs TOC (T25393)
 ==Header 2.2==
 __NOEDITSECTION__
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1"><a href="#Header_1"><span class="tocnumber">1</span> <span class="toctext">Header 1</span></a>
 <ul>
@@ -18906,7 +18906,7 @@ Fuzz testing: Parser14
 http://__TOC__
 !! html/php
 <h2><span class="mw-headline" id="onmouseover.3D">onmouseover=</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&amp;action=edit&amp;section=1" title="Edit section: onmouseover=">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
-http://<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+http://<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#onmouseover.3D"><span class="tocnumber">1</span> <span class="toctext">onmouseover=</span></a></li>
 </ul>
@@ -18915,7 +18915,7 @@ http://<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>C
 
 !! html/php+tidy
 <h2><span class="mw-headline" id="onmouseover.3D">onmouseover=</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&amp;action=edit&amp;section=1" title="Edit section: onmouseover=">edit</a><span class="mw-editsection-bracket">]</span></span></h2><p>
-http://</p><div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+http://</p><div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none" /><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#onmouseover.3D"><span class="tocnumber">1</span> <span class="toctext">onmouseover=</span></a></li>
 </ul>
@@ -21464,7 +21464,7 @@ Out-of-order TOC heading levels
 =====5=====
 ==2==
 !! html
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#2"><span class="tocnumber">1</span> <span class="toctext">2</span></a>
 <ul>
@@ -24097,7 +24097,7 @@ title=[[Main Page]]
 __TOC__
 ==''Lost'' episodes==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Lost_episodes"><span class="tocnumber">1</span> <span class="toctext"><i>Lost</i> episodes</span></a></li>
 </ul>
@@ -24118,7 +24118,7 @@ title=[[Main Page]]
 __TOC__
 =='''should be bold''' then normal text==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#should_be_bold_then_normal_text"><span class="tocnumber">1</span> <span class="toctext"><b>should be bold</b> then normal text</span></a></li>
 </ul>
@@ -24139,7 +24139,7 @@ title=[[Main Page]]
 __TOC__
 ==Image [[Image:foobar.jpg]]==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Image"><span class="tocnumber">1</span> <span class="toctext">Image</span></a></li>
 </ul>
@@ -24160,7 +24160,7 @@ title=[[Main Page]]
 __TOC__
 ==<blockquote>Quote</blockquote>==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Quote"><span class="tocnumber">1</span> <span class="toctext">Quote</span></a></li>
 </ul>
@@ -24169,7 +24169,7 @@ __TOC__
 <h2><span class="mw-headline" id="Quote"><blockquote>Quote</blockquote></span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Main_Page&amp;action=edit&amp;section=1" title="Edit section: Quote">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
 
 !! html/php+tidy
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none" /><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Quote"><span class="tocnumber">1</span> <span class="toctext">Quote</span></a></li>
 </ul>
@@ -24193,7 +24193,7 @@ __TOC__
 <small>Hanc marginis exiguitas non caperet.</small>
 QED
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Proof:_2_&lt;_3"><span class="tocnumber">1</span> <span class="toctext">Proof: 2 &lt; 3</span></a></li>
 </ul>
@@ -24218,7 +24218,7 @@ __TOC__
 
 ==<i>Foo</i> <blockquote>Bar</blockquote>==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Foo_Bar"><span class="tocnumber">1</span> <span class="toctext"><i>Foo</i> <b>Bar</b></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext"><i>Foo</i> Bar</span></a></li>
@@ -24229,7 +24229,7 @@ __TOC__
 <h2><span class="mw-headline" id="Foo_Bar_2"><i>Foo</i> <blockquote>Bar</blockquote></span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&amp;action=edit&amp;section=2" title="Edit section: Foo Bar">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
 
 !! html/php+tidy
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none" /><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Foo_Bar"><span class="tocnumber">1</span> <span class="toctext"><i>Foo</i> <b>Bar</b></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#Foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext"><i>Foo</i> Bar</span></a></li>
@@ -24257,7 +24257,7 @@ __TOC__
 
 ==<sup class="a > b">Evilbye</sup>==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Hello"><span class="tocnumber">1</span> <span class="toctext"><sup>Hello</sup></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#b.22.3EEvilbye"><span class="tocnumber">2</span> <span class="toctext"><sup> b"&gt;Evilbye</sup></span></a></li>
@@ -24288,7 +24288,7 @@ __TOC__
 
 ==<span dir="ltr" style="font-style: italic">Attributes after dir on these span tags must be deleted from the TOC</span>==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#C.2B.2B"><span class="tocnumber">1</span> <span class="toctext"><span dir="ltr">C++</span></span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#.D7.96.D7.91.D7.A0.D7.92.21"><span class="tocnumber">2</span> <span class="toctext"><span dir="rtl">זבנג!</span></span></a></li>
@@ -24319,7 +24319,7 @@ T74884: bdi element in ToC
 __TOC__
 ==<bdi>test</bdi>==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#test"><span class="tocnumber">1</span> <span class="toctext"><bdi>test</bdi></span></a></li>
 </ul>
@@ -24338,7 +24338,7 @@ T35715: s/strike element in ToC
 __TOC__
 ==<s>test</s> test <strike>test</strike>==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#test_test_test"><span class="tocnumber">1</span> <span class="toctext"><s>test</s> test <strike>test</strike></span></a></li>
 </ul>
@@ -24357,7 +24357,7 @@ Empty <p> tag in TOC, removed by Sanitizer (T92892)
 __TOC__
 ==x==
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#x"><span class="tocnumber">1</span> <span class="toctext">x</span></a></li>
 </ul>
@@ -29937,7 +29937,7 @@ wgFragmentMode=[ 'html5', 'legacy' ]
 [[#啤酒]] [[#%E5%95%A4%E9%85%92]]
 
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Foo_bar"><span class="tocnumber">1</span> <span class="toctext">Foo bar</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext">foo Bar</span></a></li>
@@ -30003,7 +30003,7 @@ wgFragmentMode=[ 'legacy', 'html5' ]
 [[#啤酒]] [[#%E5%95%A4%E9%85%92]]
 
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Foo_bar"><span class="tocnumber">1</span> <span class="toctext">Foo bar</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext">foo Bar</span></a></li>
@@ -30051,7 +30051,7 @@ wgFragmentMode=[ 'html5' ]
 [[#啤酒]] [[#%E5%95%A4%E9%85%92]]
 
 !! html/php
-<div id="toc" class="toc"><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2></div>
+<div id="toc" class="toc"><input type="checkbox" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"/><div class="toctitle" lang="en" dir="ltr"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div>
 <ul>
 <li class="toclevel-1 tocsection-1"><a href="#Foo_bar"><span class="tocnumber">1</span> <span class="toctext">Foo bar</span></a></li>
 <li class="toclevel-1 tocsection-2"><a href="#foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext">foo Bar</span></a></li>