feature #58366 [HttpKernel] Improve accessibility (javiereguiluz)

fabpot · fabpot · commit d1e909ac1f08 · 2024-09-27T10:53:57.000+02:00
This PR was squashed before being merged into the 7.2 branch. Discussion ---------- [HttpKernel] Improve accessibility | Q | A | ------------- | --- | Branch? | 7.2 | Bug fix? | no | New feature? | yes | Deprecations? | no | Issues | - | License | MIT There are still some things to improve, but I'll do that in a separate PR because requires some changes. Commits ------- 3268842 [HttpKernel] Improve accessibility
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .9C5.8.9.9 5.8.9 12a11 11 0 1 0 22.2 0A11 11 0 0 0 12 .9zm6.5 6c-.6 0-.9-.3-.9-.8 0-.2 0-.4.2-.6l.2-.4c0-.3-.5-.4-.6-.4-1.8.1-2.3 2.5-2.7 4.4l-.2 1c1 .2 1.8 0 2.2-.3.6-.4-.2-.7-.1-1.2.1-.3.5-.5.7-.6.5 0 .7.5.7.9 0 .7-1 1.8-3 1.8l-.6-.1-.6 2.4c-.4 1.6-.8 3.8-2.4 5.7-1.4 1.7-2.9 1.9-3.5 1.9-1.2 0-1.9-.6-2-1.5 0-.8.7-1.3 1.2-1.3.6 0 1.1.5 1.1 1s-.2.6-.4.6c-.1.1-.3.2-.3.4 0 .1.1.3.4.3.5 0 .8-.3 1.1-.5 1.2-.9 1.6-2.7 2.2-5.7l.1-.7.7-3.2c-.8-.6-1.3-1.4-2.4-1.7-.6-.1-1.1.1-1.5.5-.4.5-.2 1.1.2 1.5l.7.6c.7.8 1.2 1.6 1 2.5-.3 1.5-2 2.6-4 1.9-1.8-.6-2-1.8-1.8-2.5.2-.6.6-.7 1.1-.6.5.2.6.7.6 1.2l-.1.3c-.2.1-.3.3-.3.4-.1.4.4.6.7.7.7.3 1.6-.2 1.8-.8a1 1 0 0 0-.4-1.1l-.7-.8c-.4-.4-1.1-1.4-.7-2.6.1-.5.4-.9.7-1.3a4 4 0 0 1 2.8-.6c1.2.4 1.8 1.1 2.6 1.8.5-1.2 1-2.4 1.8-3.5.9-.9 1.9-1.6 3.1-1.7 1.3.2 2.2.7 2.2 1.6 0 .4-.2 1.1-.9 1.1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Symfony" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .9C5.8.9.9 5.8.9 12a11 11 0 1 0 22.2 0A11 11 0 0 0 12 .9zm6.5 6c-.6 0-.9-.3-.9-.8 0-.2 0-.4.2-.6l.2-.4c0-.3-.5-.4-.6-.4-1.8.1-2.3 2.5-2.7 4.4l-.2 1c1 .2 1.8 0 2.2-.3.6-.4-.2-.7-.1-1.2.1-.3.5-.5.7-.6.5 0 .7.5.7.9 0 .7-1 1.8-3 1.8l-.6-.1-.6 2.4c-.4 1.6-.8 3.8-2.4 5.7-1.4 1.7-2.9 1.9-3.5 1.9-1.2 0-1.9-.6-2-1.5 0-.8.7-1.3 1.2-1.3.6 0 1.1.5 1.1 1s-.2.6-.4.6c-.1.1-.3.2-.3.4 0 .1.1.3.4.3.5 0 .8-.3 1.1-.5 1.2-.9 1.6-2.7 2.2-5.7l.1-.7.7-3.2c-.8-.6-1.3-1.4-2.4-1.7-.6-.1-1.1.1-1.5.5-.4.5-.2 1.1.2 1.5l.7.6c.7.8 1.2 1.6 1 2.5-.3 1.5-2 2.6-4 1.9-1.8-.6-2-1.8-1.8-2.5.2-.6.6-.7 1.1-.6.5.2.6.7.6 1.2l-.1.3c-.2.1-.3.3-.3.4-.1.4.4.6.7.7.7.3 1.6-.2 1.8-.8a1 1 0 0 0-.4-1.1l-.7-.8c-.4-.4-1.1-1.4-.7-2.6.1-.5.4-.9.7-1.3a4 4 0 0 1 2.8-.6c1.2.4 1.8 1.1 2.6 1.8.5-1.2 1-2.4 1.8-3.5.9-.9 1.9-1.6 3.1-1.7 1.3.2 2.2.7 2.2 1.6 0 .4-.2 1.1-.9 1.1z"/></svg>
diff --git a/src/Symfony/Component/HttpKernel/Resources/welcome.html.php b/src/Symfony/Component/HttpKernel/Resources/welcome.html.php
@@ -1,14 +1,24 @@
 <?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 $renderSymfonyLogoSvg = <<<SVG
-<svg aria-hidden="true" focusable="false" height="48" width="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.9 64.9"><path fill="currentColor" d="M32.5 0A32.5 32.5 0 0 0 0 32.5a32.5 32.5 0 0 0 32.5 32.4 32.5 32.5 0 0 0 32.4-32.4A32.5 32.5 0 0 0 32.5 0Zm14.1 12c3.3-.1 5.8 1.4 6 3.8 0 1-.6 3-2.6 3-1.5 0-2.6-.9-2.6-2.2 0-.5 0-1 .4-1.5.4-.6.4-.7.4-1 0-.9-1.3-.9-1.7-.9-4.8.2-6.1 6.8-7.2 12.1l-.5 2.8c2.8.4 4.8 0 6-.8 1.5-1-.5-2-.2-3.2a2.3 2.3 0 0 1 2.1-1.8c1.2 0 2 1.2 2 2.5 0 2-2.7 5-8.2 4.8l-2-.1-1 5.7c-.9 4.3-2.1 10.3-6.5 15.4a13.4 13.4 0 0 1-9.4 5.3c-3.2.1-5.4-1.6-5.4-3.9-.1-2.2 1.9-3.4 3.1-3.5 1.8 0 3 1.2 3 2.6 0 1.3-.6 1.6-1 1.9-.3.2-.7.4-.7 1 0 .1.2.6 1 .6 1.3 0 2.2-.7 2.9-1.2 3.1-2.6 4.3-7.1 5.9-15.4l.3-2c.6-2.8 1.2-5.8 2-8.8-2.1-1.6-3.5-3.7-6.4-4.5-2-.6-3.3-.1-4.2 1a3 3 0 0 0 .3 4l1.7 1.9c2 2.3 3.1 4.1 2.7 6.6-.7 3.9-5.3 6.9-10.9 5.2-4.7-1.4-5.6-4.8-5-6.6.5-1.6 1.8-2 3-1.6 1.4.5 2 2 1.5 3.3 0 .2 0 .4-.2.7l-.6 1c-.3 1 1 1.7 2 2 2.1.7 4.2-.4 4.7-2.1.5-1.6-.5-2.7-1-3.1l-2-2.1c-.8-1-2.8-3.9-1.9-7a6.8 6.8 0 0 1 2.4-3.5c2.4-1.8 5-2 7.6-1.3 3.2.9 4.8 3 6.8 4.7a28 28 0 0 1 5.1-9.3c2.2-2.6 5-4.4 8.3-4.5z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="48" width="48" viewBox="0 0 64.9 64.9"><path fill="currentColor" d="M32.5 0A32.5 32.5 0 0 0 0 32.5a32.5 32.5 0 0 0 32.5 32.4 32.5 32.5 0 0 0 32.4-32.4A32.5 32.5 0 0 0 32.5 0Zm14.1 12c3.3-.1 5.8 1.4 6 3.8 0 1-.6 3-2.6 3-1.5 0-2.6-.9-2.6-2.2 0-.5 0-1 .4-1.5.4-.6.4-.7.4-1 0-.9-1.3-.9-1.7-.9-4.8.2-6.1 6.8-7.2 12.1l-.5 2.8c2.8.4 4.8 0 6-.8 1.5-1-.5-2-.2-3.2a2.3 2.3 0 0 1 2.1-1.8c1.2 0 2 1.2 2 2.5 0 2-2.7 5-8.2 4.8l-2-.1-1 5.7c-.9 4.3-2.1 10.3-6.5 15.4a13.4 13.4 0 0 1-9.4 5.3c-3.2.1-5.4-1.6-5.4-3.9-.1-2.2 1.9-3.4 3.1-3.5 1.8 0 3 1.2 3 2.6 0 1.3-.6 1.6-1 1.9-.3.2-.7.4-.7 1 0 .1.2.6 1 .6 1.3 0 2.2-.7 2.9-1.2 3.1-2.6 4.3-7.1 5.9-15.4l.3-2c.6-2.8 1.2-5.8 2-8.8-2.1-1.6-3.5-3.7-6.4-4.5-2-.6-3.3-.1-4.2 1a3 3 0 0 0 .3 4l1.7 1.9c2 2.3 3.1 4.1 2.7 6.6-.7 3.9-5.3 6.9-10.9 5.2-4.7-1.4-5.6-4.8-5-6.6.5-1.6 1.8-2 3-1.6 1.4.5 2 2 1.5 3.3 0 .2 0 .4-.2.7l-.6 1c-.3 1 1 1.7 2 2 2.1.7 4.2-.4 4.7-2.1.5-1.6-.5-2.7-1-3.1l-2-2.1c-.8-1-2.8-3.9-1.9-7a6.8 6.8 0 0 1 2.4-3.5c2.4-1.8 5-2 7.6-1.3 3.2.9 4.8 3 6.8 4.7a28 28 0 0 1 5.1-9.3c2.2-2.6 5-4.4 8.3-4.5z"/></svg>
 SVG;
 
 // SVG icons from the Tabler Icons project
 // MIT License - Copyright (c) 2020-2023 Paweł Kuna
 // https://github.com/tabler/tabler-icons/blob/master/LICENSE
 
 $renderBoxIconSvg = <<<SVG
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-box" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
     <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
     <path d="M12 12l8 -4.5" />
@@ -18,14 +28,14 @@
 SVG;
 
 $renderFolderIconSvg = <<<SVG
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder-open" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-folder-open" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2"></path>
 </svg>
 SVG;
 
 $renderInfoIconSvg = <<<SVG
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-info-circle" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
     <path d="M12 9h.01"></path>
@@ -34,7 +44,7 @@
 SVG;
 
 $renderNextStepIconSvg = <<<SVG
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-chevrons-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-square-chevrons-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
     <path d="M8 9l3 3l-3 3" />
     <path d="M13 9l3 3l-3 3" />
@@ -43,7 +53,7 @@
 SVG;
 
 $renderLearnIconSvg = <<<SVG
-<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-book" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-book" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
     <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
@@ -54,7 +64,7 @@
 SVG;
 
 $renderCommunityIconSvg = <<<SVG
-<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-users" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
     <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
@@ -64,7 +74,7 @@
 SVG;
 
 $renderUpdatesIconSvg = <<<SVG
-<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell-ringing" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-tabler icon-tabler-bell-ringing" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
     <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
     <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
@@ -74,7 +84,7 @@
 SVG;
 
 $renderWavesSvg = <<<SVG
-<svg aria-hidden="true" focusable="false" style="pointer-events: none" class="wave" width="100%" height="50px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="pointer-events: none" class="wave" width="100%" height="50px" preserveAspectRatio="none" viewBox="0 0 1920 75">
     <defs>
         <style>
             .a { fill: none; }
@@ -124,7 +134,7 @@
         :root {
             --hue: <?php echo random_int(0, 360); ?>;
             --light-color: hsl(var(--hue), 20%, 95%);
-            --dark-color: hsl(var(--hue), 20%, 45%);
+            --dark-color: hsl(var(--hue), 20%, 40%);
         }
 
         body {
@@ -195,7 +205,7 @@
             .info code { margin-top: 10px; }
             .info .next-step { display: flex; align-items: center; margin: 0 0 45px; padding: 15px; }
             .info .next-step svg { display: inline-flex; margin: 0 10px; top: 0; }
-            main article { display: flex; justify-content: space-between; padding-top: 45px; }
+            main article nav { display: flex; justify-content: space-between; padding-top: 45px; }
             main article section + section { margin-top: 0; }
             main h2 { font-size: 21px; }
             main h2 svg { height: 36px; width: 36px; margin-right: 15px; }
@@ -251,7 +261,7 @@
                     </li>
                 </ul>
 
-                <p class="next-step">
+                <p class="next-step" role="note">
                     <strong>Next Step</strong>
                     <?php echo $renderNextStepIconSvg; ?>
                     <span>
@@ -262,67 +272,69 @@
             </section>
         </div>
 
-        <section class="waves">
+        <section class="waves" aria-hidden="true" role="separator">
             <?php echo $renderWavesSvg; ?>
         </section>
     </header>
 
     <main>
         <div class="wrapper">
             <article>
-                <section>
-                    <h2>
-                        <span><?php echo $renderLearnIconSvg; ?></span>
-                        Learn
-                    </h2>
-                    <ul>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/doc/<?php echo $docVersion; ?>">Read Symfony Docs</a>
-                        </li>
-                        <li>
-                            <a target="_blank" href="https://symfonycasts.com/screencast/symfony">Watch Symfony Screencast</a>
-                        </li>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/book">Read Symfony Book</a>
-                        </li>
-                    </ul>
-                </section>
+                <nav>
+                    <section>
+                        <h2>
+                            <span><?php echo $renderLearnIconSvg; ?></span>
+                            Learn
+                        </h2>
+                        <ul>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/doc/<?php echo $docVersion; ?>">Read Symfony Docs</a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="https://symfonycasts.com/screencast/symfony">Watch Symfony Screencast</a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/book">Read Symfony Book</a>
+                            </li>
+                        </ul>
+                    </section>
 
-                <section>
-                    <h2>
-                        <span><?php echo $renderCommunityIconSvg; ?></span>
-                        Community & Support
-                    </h2>
-                    <ul>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/support">Symfony Support</a>
-                        </li>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/community">Join the Symfony Community</a>
-                        </li>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/doc/current/contributing/index.html">Contribute to Symfony</a>
-                        </li>
-                    </ul>
-                </section>
+                    <section>
+                        <h2>
+                            <span><?php echo $renderCommunityIconSvg; ?></span>
+                            Community & Support
+                        </h2>
+                        <ul>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/support">Symfony Support</a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/community">Join the Symfony Community</a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/doc/current/contributing/index.html">Contribute to Symfony</a>
+                            </li>
+                        </ul>
+                    </section>
 
-                <section>
-                    <h2>
-                        <span><?php echo $renderUpdatesIconSvg; ?></span>
-                        Stay Updated
-                    </h2>
-                    <ul>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/blog/">Symfony Blog</a>
-                        </li>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/community#interact">Follow Symfony</a>
-                        </li>
-                        <li>
-                            <a target="_blank" href="https://symfony.com/events/">Attend Symfony Events</a>
-                        </li>
-                    </ul>
-                </section>
+                    <section>
+                        <h2>
+                            <span><?php echo $renderUpdatesIconSvg; ?></span>
+                            Stay Updated
+                        </h2>
+                        <ul>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/blog/">Symfony Blog</a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/community#interact">Follow Symfony</a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="https://symfony.com/events/">Attend Symfony Events</a>
+                            </li>
+                        </ul>
+                    </section>
+                </nav>
             </article>
         </div>
     </main>
