55 composants ajout accessibilité (#69)

* feat(components): add tailwind default structure

* feat(a11y): add custom skip link button

* feat(link): add default aria label

* fix(styles): standardize components naming

* fix(headings): standardize components naming

web/app/themes/adeliom/assets/scripts/global.ts

@@ -1,4 +1,5 @@
 import "@scripts/navigations/menu";
+import "@scripts/navigations/keyboard";
 
 import Alpine from "alpinejs";
 

web/app/themes/adeliom/assets/scripts/navigations/keyboard.ts

@@ -0,0 +1,17 @@
+const classes = {
+    tabActive: "tab-active",
+};
+
+/*
+Ajout d'une classe sur le body lorsque l'utilisateur navigue avec la touche tab
+*/
+document.addEventListener("keyup", (e) => {
+    e.keyCode == 9 &&
+        !document.body.classList.contains(classes.tabActive) &&
+        document.body.classList.add(classes.tabActive);
+});
+
+document.addEventListener("click", () => {
+    document.body.classList.contains(classes.tabActive) &&
+        document.body.classList.remove(classes.tabActive);
+});

web/app/themes/adeliom/assets/styles/tailwind/components/action/button.pcss

@@ -0,0 +1,15 @@
+@layer components {
+    .btn {
+        @apply relative flex items-center justify-center gap-2 transition-colors;
+
+        /* Primary button */
+        &--primary {
+            @apply text-red-600;
+        }
+    }
+
+    .skip-link {
+        @apply pointer-events-none absolute top-1 left-1 overflow-hidden opacity-0;
+        @apply keyboard:focus:pointer-events-auto keyboard:focus:opacity-100;
+    }
+}

web/app/themes/adeliom/assets/styles/tailwind/components/action/link.pcss

@@ -0,0 +1,5 @@
+@layer components {
+    a {
+        @apply keyboard:focus:outline-0 keyboard:focus:ring keyboard:focus:ring-black;
+    }
+}

web/app/themes/adeliom/assets/styles/tailwind/components/components.pcss

@@ -1,5 +1,10 @@
-@layer components {
-    .my-component {
-        display: block;
-    }
-}
+@import "action/button.pcss";
+@import "action/link.pcss";
+
+@import "overlay/modal.pcss";
+
+@import "structure/list.pcss";
+
+@import "typography/heading.pcss";
+@import "typography/text.pcss";
+@import "typography/wysiwyg.pcss";

web/app/themes/adeliom/assets/styles/tailwind/components/structure/list.pcss

@@ -0,0 +1,21 @@
+@layer components {
+    .list {
+        @apply list-inside space-y-1;
+
+        &--none {
+            @apply list-none;
+        }
+
+        &--disc {
+            @apply list-disc;
+
+            li {
+                @apply marker:mr-2 marker:text-black;
+            }
+        }
+
+        &--decimal {
+            @apply list-decimal;
+        }
+    }
+}

web/app/themes/adeliom/assets/styles/tailwind/components/typography/heading.pcss

@@ -0,0 +1,37 @@
+@layer components {
+    .heading {
+        @apply dark:text-white;
+    }
+
+    .heading-1 {
+        @apply text-5xl md:text-6xl lg:text-7xl;
+    }
+
+    .heading-2 {
+        @apply text-4xl md:text-5xl lg:text-6xl;
+    }
+
+    .heading-3 {
+        @apply text-3xl md:text-4xl lg:text-5xl;
+    }
+
+    .heading-4 {
+        @apply text-2xl md:text-3xl lg:text-4xl;
+    }
+
+    .heading-5 {
+        @apply text-xl md:text-2xl lg:text-3xl;
+    }
+
+    .heading-6 {
+        @apply text-lg md:text-xl lg:text-2xl;
+    }
+
+    .heading-7 {
+        @apply text-base md:text-lg lg:text-xl;
+    }
+
+    .headline {
+        @apply uppercase tracking-wider;
+    }
+}

web/app/themes/adeliom/assets/styles/tailwind/components/typography/text.pcss

@@ -0,0 +1,10 @@
+@layer components {
+    div,
+    p {
+        @apply dark:text-white;
+    }
+
+    .tag {
+        @apply py-1 px-2 text-sm font-bold text-white;
+    }
+}

web/app/themes/adeliom/assets/styles/tailwind/components/typography/wysiwyg.pcss

@@ -0,0 +1,34 @@
+.wysiwyg {
+    .h2 {
+        @apply heading heading-2;
+    }
+
+    .h3 {
+        @apply heading heading-3;
+    }
+
+    .h4 {
+        @apply heading heading-4;
+    }
+
+    .h5 {
+        @apply heading heading-5;
+    }
+
+    a:not(.btn) {
+        @apply font-bold underline transition lg:hover:opacity-80;
+    }
+
+    ul,
+    ol {
+        @apply flex flex-col gap-2;
+    }
+
+    ul {
+        @apply list list--disc;
+    }
+
+    ol {
+        @apply list list--decimal;
+    }
+}

web/app/themes/adeliom/assets/styles/tailwind/tailwind.pcss

@@ -3,7 +3,6 @@
 
 @import "tailwindcss/components";
 @import "components/components.pcss";
-@import "components/modals.pcss";
 
 @import "tailwindcss/utilities";
 @import "utilities/utilities.pcss";

web/app/themes/adeliom/tailwind.config.js

@@ -24,14 +24,10 @@ module.exports = {
         clear: false,
     },
     plugins: [
-        require("tailwind-css-extensions")({
-            base: ["assets/styles/tailwind/base/**/*.{css,pcss}"], // Glob paths to your bases
-            utilities: ["assets/styles/tailwind/utilities/**/*.{css,pcss}"], // Glob paths to your utilities
-            components: ["assets/styles/tailwind/components/**/*.{css,pcss}"], // Glob paths to your components
-        }),
         // Ajout de variants custom
         plugin(function ({ addVariant }) {
             addVariant('is-active', ['&.is-active', '.is-active &']);
+            addVariant('keyboard', '.tab-active &');
         }),
     ],
 };

web/app/themes/adeliom/views/blocks/content/three-cards.html.twig

@@ -1,6 +1,6 @@
 {% embed "blocks/block.html.twig" %}
     {% block content %}
-        {% import "components/action/buttons/btn.html.twig" as button %}
+        {% import "components/action/button/btn.html.twig" as button %}
         {% import "components/typography/typography.html.twig" as typography %}
         {{ typography.heading({
             fields,

web/app/themes/adeliom/views/blocks/content/title-text.html.twig

@@ -1,7 +1,7 @@
 {% embed "blocks/block.html.twig" %}
     {% block content %}
         {% import "components/typography/typography.html.twig" as typography %}
-        {% import "components/action/buttons/btn.html.twig" as button %}
+        {% import "components/action/button/btn.html.twig" as button %}
 
         <div class="grid gap-6 lg:grid-cols-12">
             <div class="lg:col-span-5">

web/app/themes/adeliom/views/blocks/cta/cta.html.twig

@@ -2,7 +2,7 @@
     {% block content %}
 
         {% import "components/typography/typography.html.twig" as typography %}
-        {% import "components/action/buttons/btn.html.twig" as button %}
+        {% import "components/action/button/btn.html.twig" as button %}
 
         <div class="grid items-center gap-10 lg:gap-6 lg:grid-cols-12">
 

web/app/themes/adeliom/views/blocks/listing/last-news.html.twig

@@ -5,9 +5,7 @@
 
         {{ typography.heading({
             fields,
-            title: {
-                size: 2,
-            }
+            size: 2,
         }) }}
 
         <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">

web/app/themes/adeliom/views/components/action/buttons/btn.html.twig → web/app/themes/adeliom/views/components/action/button/btn.html.twig

@@ -28,15 +28,20 @@
     {% set target = btn.target ??  btn.link.target ?? "" %}
     {% set id = btn.id ?? "" %}
     {% set tag = btn.tag ?? "div" %}
+    {% set ariaLabel = btn.ariaLabel ?? content %}
 
     {% if url %}
         {% set tag = 'a' %}
     {% endif %}
 
+    {% if target == '_blank' %}
+        {% set ariaLabel = ariaLabel ~ ' - Ouvrir dans un nouvel onglet' %}
+    {% endif %}
+
     {% set attributes = obj.attributes ?? "" %}
 
     {% if content %}
-        <{{ tag }} id="{{ id }}" class="{{ class }}" {{ attributes }} {% if url %}href="{{ url }}"{% endif %} {% if target %}target="{{ target }}"{% endif %}>
+        <{{ tag }} id="{{ id }}" class="{{ class }}" {{ attributes }} {% if url %}href="{{ url }}"{% endif %} {% if target %}target="{{ target }}"{% endif %} aria-label="{{ ariaLabel }}">
         {{ content }}
         </{{ tag }}>
     {% endif %}

web/app/themes/adeliom/views/components/content/cards/basic/card-basic.html.twig

@@ -39,7 +39,7 @@
                 className: 'mt-3',
             }) }}
         </div>
-        <a href="{{ fn('get_permalink', card) }}" class="absolute-full"></a>
+        <a href="{{ fn('get_permalink', card) }}" aria-label="{{ card.post_title }}" class="absolute-full"></a>
     {% endblock %}
 
 {% endembed %}

web/app/themes/adeliom/views/components/content/cards/news/card-news.html.twig

@@ -35,7 +35,7 @@
                 Category : {{ category.name }}
             {% endif %}
 
-            <a href="{{ fn('get_permalink', card) }}" class="absolute-full"></a>
+            <a href="{{ fn('get_permalink', card) }}" aria-label="{{ card.post_title }}" class="absolute-full"></a>
 
         </article>
 

web/app/themes/adeliom/views/components/content/media/media.html.twig

@@ -38,7 +38,7 @@
 
         <a class="js-glightbox-video-single relative" href="{{ videoURL }}">
             {% include "components/content/media/image.html.twig" with optionsMedia only %}
-            {% include "components/action/buttons/btn-play.html.twig" %}
+            {% include "components/action/button/btn-play.html.twig" %}
         </a>
 
     {% endif %}

web/app/themes/adeliom/views/components/overlay/README.md

@@ -32,6 +32,6 @@ Côté template, il y a 2 étapes à suivre :
 endblock %} {% endembed %}
 ```
 
-3 effets d'apparition sont prédéfinis : `slide-fade`, `slide-top`, `slide-bottom`. (Ajustables dans le fichier `web/app/themes/adeliom/assets/components/utils/modals/index.pcss`)
+3 effets d'apparition sont prédéfinis : `slide-fade`, `slide-top`, `slide-bottom`. (Ajustables dans le fichier `web/app/themes/adeliom/assets/styles/tailwind/components/overlay/modals/modals.pcss`)
 
 Il est important que l'ID des modal soit unique sur la page.

web/app/themes/adeliom/views/components/typography/typography.html.twig

@@ -14,13 +14,13 @@
             color: "black"
         },
         size: {
-            1 : "",
-            2 : "",
-            3 : "",
-            4 : "",
-            5 : "",
-            6 : "",
-            headline: "",
+            1 : "heading heading-1",
+            2 : "heading heading-2",
+            3 : "heading heading-3",
+            4 : "heading heading-4",
+            5 : "heading heading-5",
+            6 : "heading heading-6",
+            headline: "headline",
         },
         color: {
             current: "text-current",
@@ -34,8 +34,10 @@
     {% set tag = obj.tag ?? title.tag ?? "div" %}
     {% set content = title.content ?? title %}
 
+    {% set ariaHeading = tag == "div" ? true : false %}
+
     {% if content %}
-        <{{ tag }} class="{{ class }}">
+        <{{ tag }} class="{{ class }}" {% if ariaHeading %}role="heading" aria-level="{{ obj.size }}"{% endif %}>
         {{ content }}
         </{{ tag }}>
     {% endif %}
@@ -204,7 +206,7 @@
 
         {% if obj.fields.button or obj.button or obj.fields.buttons or obj.buttons %}
 
-            {% import "components/action/buttons/btn.html.twig" as btn %}
+            {% import "components/action/button/btn.html.twig" as btn %}
 
             {% set className = "mt-6" %}
 

web/app/themes/adeliom/views/layout.html.twig

@@ -22,7 +22,13 @@
     </script> #}
 </head>
 <body class="{{ body_class }} font-sans leading-normal tracking-normal">
-    <a class="skip-link screen-reader-text" href="#content">{{ _e( 'Skip to content') }}</a>
+    {% import "components/action/button/btn.html.twig" as button %}
+
+    {{ button.single({
+        title: "Accéder au contenu principal",
+        url: '#content',
+        className: 'skip-link'
+    }) }}
 
     {% block header %}
         {% if hide_header is not defined %}