Merge pull request #226 from statikbe/KarelJanVanHaute/issue206

KarelJanVanHaute/issue206
statikbe · Jan 12, 2024 · aa20c90 · aa20c90
2 parents 714850b + ccca420
commit aa20c90
Show file tree

Hide file tree

Showing 23 changed files with 87 additions and 61 deletions.
diff --git a/tailoff/js/components/glide.component.ts b/tailoff/js/components/glide.component.ts
@@ -149,26 +149,30 @@ export class GlideComponent {
           const slider = document.getElementById(sliderID);
           const slides = slider.querySelectorAll('.glide__slide');
 
-          const prevController = slider.querySelector("div[data-glide-el='controls'] .glide__arrow--left");
-          const nextController = slider.querySelector("div[data-glide-el='controls'] .glide__arrow--right");
+          const prevController = slider.querySelector("div[data-glide-el='controls'] .glide__arrow--left") as HTMLButtonElement;
+          const nextController = slider.querySelector("div[data-glide-el='controls'] .glide__arrow--right") as HTMLButtonElement;
           if (glide.index == 0) {
             prevController.classList.add('opacity-25');
             prevController.classList.add('pointer-events-none');
             prevController.classList.remove('pointer-events-auto');
+            prevController.disabled = true;
           } else {
             prevController.classList.remove('opacity-25');
             prevController.classList.remove('pointer-events-none');
             prevController.classList.add('pointer-events-auto');
+            prevController.disabled = false;
           }
 
           if (glide.index + glide.settings.perView >= slides.length) {
             nextController.classList.add('opacity-25');
             nextController.classList.add('pointer-events-none');
             nextController.classList.remove('pointer-events-auto');
+            nextController.disabled = true;
           } else {
             nextController.classList.remove('opacity-25');
             nextController.classList.remove('pointer-events-none');
             nextController.classList.add('pointer-events-auto');
+            nextController.disabled = false;
           }
         });
 

diff --git a/tailoff/js/components/toggle.component.ts b/tailoff/js/components/toggle.component.ts
@@ -72,6 +72,20 @@ export class ToggleComponent {
       }
       this.toggleAction(trigger, target, changeClass, animation);
     });
+    trigger.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (group) {
+          const groupElement = document.querySelector(`#${group}`) as HTMLElement;
+          const activeEl = groupElement.querySelector('[data-s-toggle-target][aria-expanded="true"]');
+          if (activeEl && activeEl !== trigger) {
+            const activeTarget = document.querySelector(`#${activeEl.getAttribute('data-s-toggle-target')}`);
+            this.toggleAction(activeEl, activeTarget, changeClass, animation);
+          }
+        }
+        this.toggleAction(trigger, target, changeClass, animation);
+      }
+    });
 
     trigger.addEventListener('open', () => {
       this.toggleAction(trigger, target, changeClass, animation);

diff --git a/tailoff/js/components/tooltip.component.ts b/tailoff/js/components/tooltip.component.ts
@@ -10,14 +10,21 @@ export class TooltipComponent {
   private async initTippy() {
     // @ts-ignore
     const tippy = await import('tippy.js');
-    tippy.default('[data-tippy-content]');
+    tippy.default('[data-tippy-content]', {
+      aria: {
+        content: 'describedby',
+      },
+    });
     tippy.default('[data-tippy-template]', {
       content(reference) {
         const id = reference.getAttribute('data-tippy-template');
         const template = document.getElementById(id);
         return template.innerHTML;
       },
       allowHTML: true,
+      aria: {
+        content: 'describedby',
+      },
     });
   }
 }
diff --git a/templates/_site/_snippet/_content/_blocks/_slider.twig b/templates/_site/_snippet/_content/_blocks/_slider.twig
@@ -29,11 +29,11 @@
 				</ul>
 			</div>
 			<div class="glide__arrows" data-glide-el="controls">
-				<button class="glide__arrow glide__arrow--left" data-glide-dir="&lt;">
+				<button type="button" class="glide__arrow glide__arrow--left" data-glide-dir="&lt;">
 					{{ icon('chevron-left') }} 
 					<span class="sr-only">{{' previous'|t }}</span>
 				</button>
-				<button class="glide__arrow glide__arrow--right" data-glide-dir="&gt;">
+				<button type="button" class="glide__arrow glide__arrow--right" data-glide-dir="&gt;">
 					{{ icon('chevron-right') }} 
 					<span class="sr-only">{{ 'next'|t }}</span>
 				</button>

diff --git a/templates/_site/_snippet/_global/_footer.twig b/templates/_site/_snippet/_global/_footer.twig
@@ -4,8 +4,7 @@
 			<div class="flex flex-wrap -mx-4">
 				<div class="w-full px-4 mt-4 sm:w-1/2 md:w-1/3">
 					<a href="{{ siteUrl }}" class="">
-						{{ svg('@webroot/frontend/img/site/logo.svg')|attr({ class: 'w-full max-w-logo', role: 'img', 'aria-label': 'Statik' }) }}
-						<span class="sr-only">{{"Startpagina"|t}}</span>
+						<img class="w-full max-w-logo" src="{{baseUrl ~ '/frontend/img/site/logo.svg'}}" alt="{{"Startpagina"|t}}"/>
 					</a>
 					<h3 class="text-3xl">{{ systemName }}</h3>
 					{% set generalInfo = craft.entries.section('contact').status(null).one() %}

diff --git a/templates/_site/_snippet/_global/_header.twig b/templates/_site/_snippet/_global/_header.twig
@@ -17,7 +17,7 @@
 								{% include "_site/_snippet/_nav/_language" %}
 							</div>
 							<div class="ml-6">
-								<button class="text-lg cursor-pointer text-primary js-search-trigger js-search-animated" type="button">
+								<button type="button" class="text-lg cursor-pointer text-primary js-search-trigger js-search-animated">
 									<span class="sr-only">{{ 'Zoeken'|t }}</span>
 									{{ icon('magnify') }} 
 								</button>

diff --git a/templates/_site/_snippet/_nav/_doormat.twig b/templates/_site/_snippet/_nav/_doormat.twig
@@ -10,7 +10,7 @@
                 {% else %}
                     <li class="my-2 {% if node.classes|length %}{{ node.classes }}{% endif %}">
                         <a href="{{ node.url }}" class="hover:underline {% if node.active %}active underline{% endif %}"
-                           {% if node.blank %}target="_blank" rel="noopener"{% endif %}>{{ node.name }}
+                           {% if node.blank %}target="_blank" rel="noopener"{% endif %} {% if node.active %}aria-current="page"{% endif %}>{{ node.name }}
                         </a>
                     </li>
                 {% endif %}
@@ -22,7 +22,7 @@
         <ul class="">
             {% for node in serviceNav %}
                 <li class="{% if node.classes|length %}{{ node.classes }}{% endif %}">
-                    <a href="{{ node.url }}" class="text-sm text-gray-500 hover:underline{% if node.active %} text-black underline{% endif %}" {% if node.blank %} target="_blank" rel="noopener" {% endif %}>{{ node.name }}
+                    <a href="{{ node.url }}" class="text-sm text-gray-500 hover:underline{% if node.active %} text-black underline{% endif %}" {% if node.blank %} target="_blank" rel="noopener" {% endif %} {% if node.active %}aria-current="page"{% endif %}>{{ node.name }}
                     </a>
                 </li>
             {% endfor %}

diff --git a/templates/_site/_snippet/_nav/_flyout.twig b/templates/_site/_snippet/_nav/_flyout.twig
@@ -5,7 +5,7 @@
             {% for node in mainNav %}
                 <li class="{% if node.classes|length %}{{ node.classes }}{% endif %}">
                     <a href="{{ node.url }}" class="{% if node.active %}active{% endif %}"
-                       {% if node.blank %}target="_blank" rel="noopener"{% endif %}>{{ node.name }}
+                       {% if node.blank %}target="_blank" rel="noopener"{% endif %} {% if node.active %}aria-current="page"{% endif %}>{{ node.name }}
                     </a>
                 </li>
             {% endfor %}
@@ -16,7 +16,7 @@
         <ul class="mt-10">
             {% for node in serviceNav %}
                 <li class="{% if node.classes|length %}{{ node.classes }}{% endif %}">
-                    <a href="{{ node.url }}" class="text-sm text-gray-500 hover:underline{% if node.active %} text-black underline{% endif %}" {% if node.blank %} target="_blank" rel="noopener" {% endif %}>{{ node.name }}
+                    <a href="{{ node.url }}" class="text-sm text-gray-500 hover:underline{% if node.active %} text-black underline{% endif %}" {% if node.blank %} target="_blank" rel="noopener" {% endif %} {% if node.active %}aria-current="page"{% endif %}>{{ node.name }}
                     </a>
                 </li>
             {% endfor %}

diff --git a/templates/_site/_snippet/_nav/_main.twig b/templates/_site/_snippet/_nav/_main.twig
@@ -6,7 +6,7 @@
 		<ul class="flex flex-wrap space-x-4">
 			{% for node in mainNav %}
 				<li class="{% if node.classes|length %}{{ node.classes }}{% endif %}">
-					<a href="{{ node.url }}" class="font-bold text-xl hover:underline hover:text-primary {% if node.active %}active{% endif %}" {% if node.blank %} target="_blank" rel="noopener" {% endif %}>{{ node.name }}
+					<a href="{{ node.url }}" class="font-bold text-xl hover:underline hover:text-primary {% if node.active %}active{% endif %}" {% if node.blank %} target="_blank" rel="noopener" {% endif %} {% if node.active %}aria-current="page"{% endif %}>{{ node.name }}
 					</a>
 				</li>
 			{% endfor %}

diff --git a/templates/jsPlugins/autocomplete.twig b/templates/jsPlugins/autocomplete.twig
@@ -43,7 +43,7 @@
 						<option value="6">Fun Stuff 2</option>
 						<option value="7">Option 3</option>
 					</select>
-					<button class="px-4 py-2 mt-8 text-white bg-blue-500 rounded" type="submit">Send</button>
+					<button type="submit" class="px-4 py-2 mt-8 text-white bg-blue-500 rounded">Send</button>
 				</form>
 			</div>
 			<div class="w-8/12 mt-12">
@@ -64,7 +64,7 @@
 						<option value="6">Fun Stuff 2</option>
 						<option value="7">Option 3</option>
 					</select>
-					<button class="px-4 py-2 mt-8 text-white bg-blue-500 rounded" type="submit">Send</button>
+					<button type="submit" class="px-4 py-2 mt-8 text-white bg-blue-500 rounded">Send</button>
 				</form>
 			</div>
 			<div class="w-8/12 mt-12">
@@ -86,7 +86,7 @@
 						<option value="7">Option 7</option>
 					</select>
 
-					<button class="px-4 py-2 mt-8 text-white bg-blue-500 rounded" type="submit">Send</button>
+					<button type="submit" class="px-4 py-2 mt-8 text-white bg-blue-500 rounded">Send</button>
 				</form>
 			</div>
 		</div>

diff --git a/templates/jsPlugins/chipFilter.twig b/templates/jsPlugins/chipFilter.twig
@@ -18,10 +18,11 @@
                    value="{{ category.id }}" {% if category.id in catQuery %} checked {% endif %}/>
             <label for="category-{{ category.id }}">{{ category.title }}</label>
             {% if category.children|length %}
-                <button class="ml-auto cursor-pointer ie-hidden js-indeterminate-toggle">
-					{{ icon('chevron-down') }} 
+                <button type="button" class="ml-auto cursor-pointer ie-hidden js-indeterminate-toggle">
+                    {{ icon('chevron-down') }}
                     <span class="sr-only">{{ 'Options'|t }}
-                        {{ category.title }}</span>
+                        {{ category.title }}
+                    </span>
                 </button>
             {% endif %}
         </div>
@@ -151,7 +152,7 @@
 							</ul>
 						</div>
 					{% endif %}
-					<button class="ie-hidden js-filter-clear">Clear filter</button>
+					<button type="button" class="ie-hidden js-filter-clear">Clear filter</button>
 				{% endif %}
 			</form>
 		</div>
@@ -169,8 +170,8 @@
 						<span class="mr-4">{{ "Resultaten gefilterd op:"|t }}</span>
 						{% if catQuery %}
 							{% for category in craft.entries.section('newsCategories').id(catQuery).all() %}
-								<span class="flex items-center px-2 mb-2 mr-2 text-sm font-light text-white capitalize rounded-full bg-primary">{{ category.title }}
-									<button class="flex items-center justify-center w-4 h-4 ml-2 text-black ie-hidden js-clear-filter-element" data-filter-elements='[{"name": "category[]","value": "{{ category.id }}"}]'>
+								<span class="flex items-center px-2 mb-2 mr-2 text-sm font-light text-white capitalize rounded-full bg-primary">{{ category.title 
+									<button type="button" class="flex items-center justify-center w-4 h-4 ml-2 text-black ie-hidden js-clear-filter-element" data-filter-elements='[{"name": "category[]","value": "{{ category.id }}"}]'>
 										{{ icon('clear') }} 
 										<span class="sr-only">{{ "Verwijder filter "|t }} {{ category.title }}</span>
 									</button>

diff --git a/templates/jsPlugins/dropdown.twig b/templates/jsPlugins/dropdown.twig
@@ -23,7 +23,7 @@
 	<div class="section section--default">
 		<div class="container">
 			<div class="mb-10 js-dropdown">
-                <button class="btn js-dropdown-toggle">Toggle the dropdown</button>
+                <button type="button" class="btn js-dropdown-toggle">Toggle the dropdown</button>
                 <ul class="p-4 bg-white shadow js-dropdown-menu">
                     <li><a href="#">Item 1</a></li>
                     <li><a href="#">Item 2</a></li>
@@ -40,7 +40,7 @@
             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere nostrum, sunt dolorum libero magni quidem in optio odit sint quae nesciunt distinctio vitae molestias laborum maiores est cum deserunt expedita? Nihil voluptates ullam iste unde. Suscipit cum atque deleniti blanditiis accusantium nulla eveniet, et sapiente perferendis asperiores harum reprehenderit architecto, minima illo vitae est incidunt cupiditate quod voluptates expedita, iure officia. Earum nihil quasi unde et. Molestias excepturi possimus ea, aut aliquam ducimus assumenda dolorum necessitatibus quod fugit repellendus dolore, aliquid harum. Laborum adipisci impedit eligendi aspernatur atque officiis odit rem earum sunt, unde, deleniti numquam, vitae iste velit eius.</p>
             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere nostrum, sunt dolorum libero magni quidem in optio odit sint quae nesciunt distinctio vitae molestias laborum maiores est cum deserunt expedita? Nihil voluptates ullam iste unde. Suscipit cum atque deleniti blanditiis accusantium nulla eveniet, et sapiente perferendis asperiores harum reprehenderit architecto, minima illo vitae est incidunt cupiditate quod voluptates expedita, iure officia. Earum nihil quasi unde et. Molestias excepturi possimus ea, aut aliquam ducimus assumenda dolorum necessitatibus quod fugit repellendus dolore, aliquid harum. Laborum adipisci impedit eligendi aspernatur atque officiis odit rem earum sunt, unde, deleniti numquam, vitae iste velit eius.</p>
 			<div class="mt-10 js-dropdown">
-                <button class="btn js-dropdown-toggle">Toggle the dropdown</button>
+                <button type="button" class="btn js-dropdown-toggle">Toggle the dropdown</button>
                 <ul class="p-4 bg-white shadow js-dropdown-menu">
                     <li><a href="#">Item 1</a></li>
                     <li><a href="#">Item 2</a></li>

diff --git a/templates/jsPlugins/filter.twig b/templates/jsPlugins/filter.twig
@@ -18,7 +18,7 @@
                    value="{{ category.id }}" {% if category.id in catQuery %} checked {% endif %}/>
             <label for="{{ category.id }}">{{ category.title }}</label>
             {% if category.children|length %}
-                <button class="ml-auto cursor-pointer ie-hidden js-indeterminate-toggle">
+                <button type="button" class="ml-auto cursor-pointer ie-hidden js-indeterminate-toggle">
                     {{ icon('chevron-down') }} 
                     <span class="sr-only">{{ 'Options'|t }}
                         {{ category.title }}</span>
@@ -102,7 +102,7 @@
                                                 <li
                                                         class="js-filter-show-more">
                                                     {# This needs to be on the same lavel as the .js-filter-extra-content elements #}
-                                                    <button>{{ "Toon meer"|t }}</button>
+                                                    <button type="button">{{ "Toon meer"|t }}</button>
                                                 </li>
                                                 {% for category in categories|slice(3,categories|length - 3) %}
                                                     <li class="hidden form__custom-checkbox js-filter-extra-content">
@@ -146,7 +146,7 @@
 
                             <div>
                                 {# this one can be put wherever you want #}
-                                <button class="ie-hidden js-filter-clear" {# data-s-always-show="true" #}>Clear filter</button>
+                                <button type="button" class="ie-hidden js-filter-clear" {# data-s-always-show="true" #}>Clear filter</button>
                             </div>
                         </div>
                     </div>
@@ -169,15 +169,16 @@
                                     <span class="mr-4">{{ "Resultaten gefilterd op:"|t }}</span>
                                     {% if searchQuery %}
                                         <span class="flex items-center px-2 mb-2 mr-2 text-sm font-light text-white capitalize rounded-full bg-primary">{{ searchQuery }}
-                                            <button class="flex items-center justify-center w-4 h-4 ml-2 text-black js-clear-filter-element" data-filter-elements='[{"name": "search"}]'>{{ icon('clear') }}
+                                            <button type="button" class="flex items-center justify-center w-4 h-4 ml-2 text-black js-clear-filter-element" data-filter-elements='[{"name": "search"}]'>
+                                                {{ icon('clear') }}
                                                 <span class="sr-only">{{ "Verwijder filter "|t }} {{ searchQuery }}</span>
                                             </button>
                                         </span>
                                     {% endif %}
                                     {% if catQuery %}
                                         {% for category in categories.id(catQuery).all() %}
                                             <span class="flex items-center px-2 mb-2 mr-2 text-sm font-light text-white capitalize rounded-full bg-primary">{{ category.title }}
-                                                <button class="flex items-center justify-center w-4 h-4 ml-2 text-black ie-hidden js-clear-filter-element" data-filter-elements='[{"name": "category[]","value": "{{ category.id }}"}]'>
+                                                <button type="button" class="flex items-center justify-center w-4 h-4 ml-2 text-black ie-hidden js-clear-filter-element" data-filter-elements='[{"name": "category[]","value": "{{ category.id }}"}]'>
                                                     {{ icon('clear') }} 
                                                     <span class="sr-only">{{ "Verwijder filter "|t }} {{ category.title }}</span>
                                                 </button>

diff --git a/templates/jsPlugins/filterButton.twig b/templates/jsPlugins/filterButton.twig
@@ -47,7 +47,7 @@
 			<div class="container">
                 <form action="" class="flex flex-wrap items-baseline mb-10 md:flex-no-wrap js-filter-form js-filter-scroll-position">
                     <div class="flex flex-wrap">
-                        <button class="mr-4 my-2 btn {% if catQuery|length == 0 %}btn--primary{% else %}btn--ghost{% endif %} js-filter-clear" data-active-class="btn--primary" data-inactive-class="btn--ghost" data-s-always-show>Everything</button>
+                        <button type="button" class="mr-4 my-2 btn {% if catQuery|length == 0 %}btn--primary{% else %}btn--ghost{% endif %} js-filter-clear" data-active-class="btn--primary" data-inactive-class="btn--ghost" data-s-always-show>Everything</button>
                         {% set categories = craft.entries.section('newsCategories').level(1) %}
                         {% if categories|length %}
                             {% for cat in categories %}

diff --git a/templates/jsPlugins/formValidation.twig b/templates/jsPlugins/formValidation.twig
@@ -304,7 +304,7 @@
 						<input type="checkbox" id="policy" name="policy" required/>
 						<label for="policy">I agree to all the nonsense of the privacy policy</label>
 					</div>
-					<button class="btn" type="submit">Submit</button>
+					<button type="submit" class="btn">Submit</button>
 				</form>
 			</div>
 		</div>

diff --git a/templates/jsPlugins/matrix.twig b/templates/jsPlugins/matrix.twig
@@ -44,8 +44,8 @@
                         We like you to check this checkbox if you add input fields
                     </label>
                 </div>
-                <button class="btn js-matrix-add" data-s-type="js-type" data-s-template="typeRow">Add inputs</button>
-                <button class="btn btn--primary" type="submit">Send form</button>
+                <button type="button" class="btn js-matrix-add" data-s-type="js-type" data-s-template="typeRow">Add inputs</button>
+                <button type="submit" class="btn btn--primary">Send form</button>
             </form>
             <script id="typeRow" type="text/template">
                 <div class="relative js-type js-row" data-s-type="js-type">
@@ -58,7 +58,7 @@
                         <input class="form__input" type="email" id="email" name="email[%%block%%]" value="" required>
                     </div>
                     <div class="absolute top-0 right-0 mt-1 mr-2">
-                        <button class="js-remove-row">
+                        <button type="button" class="js-remove-row">
                             Remove row
                         </button>
                     </div>