fix: fixed accessibility issues on layout + cleanup (#144)

strangebuzz · Dec 21, 2024 · e99cda5 · e99cda5
1 parent 035e2ee
commit e99cda5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/assets/styles/app.css b/assets/styles/app.css
@@ -24,13 +24,22 @@ hgroup > h1 > a {
 header .theme-icon {
     text-decoration: none;
     font-size: 150%;
-    cursor: pointer;
 }
 
 footer div.github {
     text-align: right;
 }
 
+/** See h6 */
+footer span.versions {
+    display: block;
+    color: var(--pico-h6-color);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25;
+    margin-bottom: var(--pico-typography-spacing-vertical);
+}
+
 /* Symfony —————————————————————————————————————————————————————————————————— */
 
 /**

diff --git a/src/Twig/Extension/MarkdownExtension.php b/src/Twig/Extension/MarkdownExtension.php
@@ -35,9 +35,9 @@ public function addHeadersAnchors(string $html): string
         $dom = new \DOMDocument();
         $dom->loadHTML(mb_encode_numericentity($html, [0x80, 0x10FFFF, 0, ~0], 'UTF-8'), \LIBXML_HTML_NOIMPLIED | \LIBXML_HTML_NODEFDTD);
 
-        /** @var \DOMNodeList<\DOMNode> $tags */
-        $tags = (new \DOMXPath($dom))->query('//h1 | //h2 | //h3 | //h4 | //h5 | //h6');
         // Allow to have the same "buggy" anchors as GitHub
+        /** @var \DOMNodeList<\DOMNode> $tags */
+        $tags = (new \DOMXPath($dom))->query('//h2 | //h3');
         foreach ($tags as $headerTag) {
             $slug = $this->stringHelper->slugify($headerTag->textContent);
             /** @var \DOMElement $headerTag */

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -59,8 +59,8 @@
                     </li>
                     <li>{{ _self.gitHubIcon('bottom') }}</li>
                     <li>
-                        <a class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🔆</a>
-                        <a class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom">🌘 </a>
+                        <a rel="nofollow" href="#" class="theme-icon" {{ stimulus_target('header', 'lightEmoji') }} {{ stimulus_action('header', 'setDarkMode', 'click') }} data-tooltip="Switch to dark mode" data-placement="bottom">🔆</a>
+                        <a rel="nofollow" href="#" class="theme-icon" {{ stimulus_target('header', 'darkEmoji') }} {{ stimulus_action('header', 'setLightMode', 'click') }} data-tooltip="Switch to light mode" data-placement="bottom">🌘 </a>
                     </li>
                 </ul>
             </nav>
@@ -79,7 +79,8 @@
 
     <div class="grid">
         <div>
-            <h6>{{ brand|raw }} v{{ sf_version }}{# version #} ({{ 'frankenphp' in php_sapi ? php_sapi : 'PHP '~php_sapi }} {{ php_version }})</h6>
+            <span class="versions">{{ brand|raw }} v{{ sf_version }}{# version #} ({{ 'frankenphp' in php_sapi ? php_sapi : 'PHP '~php_sapi }} {{ php_version }})</span>
+
             <small>
                 A Symfony minimalist application template by <a href="https://www.strangebuzz.com" target="_blank">COil/Strangebuzz 🐝</a>
                 and <a href="{{ website }}/graphs/contributors">other contributors</a>.<br/>