Skip to content

[HttpKernel] Improve accessibility #58366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 27, 2024
Merged

[HttpKernel] Improve accessibility #58366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
140 changes: 76 additions & 64 deletions src/Symfony/Component/HttpKernel/Resources/welcome.html.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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>
Expand All @@ -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" />
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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" />
Expand All @@ -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; }
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -251,7 +261,7 @@
</li>
</ul>

<p class="next-step">
<p class="next-step" role="note">
<strong>Next Step</strong>
<?php echo $renderNextStepIconSvg; ?>
<span>
Expand All @@ -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>
Expand Down
Loading