minor #1139 [Site] Quick wins to improve website accessibility (smnandre)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Site] Quick wins to improve website accessibility

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| License       | MIT

Minor PR to improve the website accessibility via some "quick-wins"
* add missing aria labels
* use pre/code instead of input in package "install command"

Commits
-------

5b74a7a [Site] Quick wins to improve website accessibility

Author: weaverryan

ux.symfony.com/assets/styles/app/_typography.scss

@@ -24,8 +24,8 @@ h2.ubuntu {
 h3, a.component-title {
   font-family: var(--font-family-title);
   font-weight: 700;
-  font-size: 28px !important;
-  line-height: 32px !important;
+  font-size: 28px;
+  line-height: 32px;
   letter-spacing: -1px;
   color: #0A0A0A;
   text-decoration: none;

ux.symfony.com/assets/styles/components/_PackageBox.scss

@@ -112,6 +112,14 @@
   flex-direction: row;
   align-items: center;
   gap: .75rem;
+
+  font-family: var(--font-family-title);
+  font-weight: 700;
+  font-size: 28px !important;
+  line-height: 32px !important;
+  letter-spacing: -1px;
+  color: #0A0A0A;
+  text-decoration: none;
 }
 
 .PackageBox_link {

ux.symfony.com/assets/styles/components/_TerminalCommand.scss

@@ -14,6 +14,9 @@
   z-index: 1;
   max-inline-size: 100%;
   max-width: 100%;
+  width: fit-content;
+  align-items: center;
+  align-self: center;
 
   &::before {
     content: '';
@@ -39,6 +42,7 @@
   padding: 0 .5rem;
   width: inherit;
   overflow: scroll;
+  margin: 0;
 }
 
 .TerminalCommand_action {

ux.symfony.com/src/Twig/PackageBox.php

@@ -9,4 +9,6 @@
 class PackageBox
 {
     public UxPackage $package;
+
+    public string $titleTag = 'h3';
 }

ux.symfony.com/templates/_footer.html.twig

@@ -4,11 +4,13 @@
             <div class="col-12 col-xl-3 order-xl-3 text-center text-xl-end">
                 <a href="https://github.com/symfony/ux" rel="external noopener noreferrer"
                    style="font-size: 1.5rem;"
+                   aria-label="Symfony UX on GitHub"
                 >
                     <twig:Icon name="github"/>
                 </a>
                 <a href="https://symfony.com" rel="external noopener noreferrer"
                    style="font-size: 1.5rem;"
+                   aria-label="Symfony website"
                 >
                     <twig:Icon name="symfony"/>
                 </a>

ux.symfony.com/templates/_header.html.twig

@@ -1,7 +1,7 @@
 <header class="AppHeader {{ theme is defined ? ('AppHeader--' ~ theme) }}">
     <nav class="navbar navbar-expand-sm AppNav--white">
         <div class="container-xxl px-4 px-md-5">
-            <a href="{{ path('app_homepage') }}" class="AppHeader_logo">
+            <a href="{{ path('app_homepage') }}" class="AppHeader_logo" aria-label="Homepage">
                 <span aria-hidden="false">Symfony UX</span>
             </a>
             <button class="AppHeader_toggler navbar-toggler collapsed" type="button"

ux.symfony.com/templates/_nav.html.twig

@@ -38,8 +38,9 @@
     <a class="AppNav_item AppNav_item--icon"
        href="https://github.com/symfony/ux"
        rel="external noopener noreferrer"
+       aria-label="Symfony UX on GitHub"
     >
         <twig:Icon name="github"/>
     </a>
-    <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" />
+    <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode" />
 {% endblock %}

ux.symfony.com/templates/components/PackageBox.html.twig

@@ -6,12 +6,12 @@
     </div>
 
     <div class="PackageBox_content">
-        <h3 class="PackageBox_title">
+        <{{ titleTag }} class="PackageBox_title">
             <a href="{{ path(package.route) }}" class="PackageBox_link">{{ package.humanName }}</a>
             <span class="PackageBox_arrow">
                 <twig:Icon name="arrow-right" />
             </span>
-        </h3>
+        </{{ titleTag }}>
         <div class="PackageBox_description">
             {{ package.description|markdown_to_html }}
         </div>

ux.symfony.com/templates/components/TerminalCommand.html.twig

@@ -1,13 +1,14 @@
 <div {{ attributes.defaults({class: 'TerminalCommand'}).defaults(stimulus_controller('clipboard')) }}>
-    <input
+    <pre
         class="TerminalCommand_input"
         aria-label="{{ label|default }}"
-        size="{{ command|length }}"
-        value="{{ command }}"
-        {{ stimulus_target('clipboard', 'source') }}
-        readonly
+    ><code {{ stimulus_target('clipboard', 'source') }}>{{ command }}</code></pre>
+    <button
+        type="button"
+        class="TerminalCommand_action btn btn-copy"
+        aria-label="Copy command"
+        {{ stimulus_action('clipboard', 'copy') }}
     >
-    <button type="button" class="TerminalCommand_action btn btn-copy" {{ stimulus_action('clipboard', 'copy') }}>
         <twig:Icon name="copy"/>
     </button>
 </div>

ux.symfony.com/templates/main/homepage.html.twig

@@ -102,7 +102,11 @@
         </a>
     </div>
     <div class="row mt-3 mt-md-5">
-        {{ block('list', 'main/packages.html.twig') }}
+        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
+            {% for package in packages %}
+                <twig:PackageBox :package="package" titleTag="h3" />
+            {% endfor %}
+        </div>
     </div>
 </div>
 {% endblock %}

ux.symfony.com/templates/main/packages.html.twig

@@ -14,7 +14,7 @@
     {% block list %}
         <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
             {% for package in packages %}
-                <twig:PackageBox :package="package"/>
+                <twig:PackageBox :package="package" titleTag="h2" />
             {% endfor %}
         </div>
     {% endblock %}