diff --git a/tailoff/js/components/glide.component.ts b/tailoff/js/components/glide.component.ts
index ebe32f04..98f9fb19 100644
--- 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
index 536192bc..e7dad20b 100644
--- 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
index 6f477be9..0f3e336f 100644
--- a/tailoff/js/components/tooltip.component.ts
+++ b/tailoff/js/components/tooltip.component.ts
@@ -10,7 +10,11 @@ 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');
@@ -18,6 +22,9 @@ export class TooltipComponent {
         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
index 6b71e8d1..ae62674f 100644
--- 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
index 000a3a93..4dc37ae9 100644
--- 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
index f90a462f..ca9e166b 100644
--- 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
index 4ceec730..6ed956db 100644
--- 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
index fa7155e4..8363207c 100644
--- 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
index d5ab9e82..1959b396 100644
--- 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
index 97df82ac..6eb133b9 100644
--- 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
index e596c0a7..e442359a 100644
--- 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
index 8e8a197e..acc923ca 100644
--- 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
index f65c48a2..4810a6cb 100644
--- 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,7 +169,8 @@
                                     <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>
@@ -177,7 +178,7 @@
                                     {% 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
index b02c8d32..a6bc55cc 100644
--- 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
index 139dbd60..23294d6c 100644
--- 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
index 5d522f9d..326dbc49 100644
--- 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>
diff --git a/templates/jsPlugins/modal.twig b/templates/jsPlugins/modal.twig
index d867d35a..60a5aea0 100644
--- a/templates/jsPlugins/modal.twig
+++ b/templates/jsPlugins/modal.twig
@@ -24,7 +24,7 @@
             <h2>Inline content</h2>
             <div class="w-8/12">
                 <a href="#inline-content" class="btn js-modal">Show modal inline 1</a>
-                <button data-modal-id="#inline-content" class="btn js-modal">Show modal inline 2</button>
+                <button type="button" data-modal-id="#inline-content" class="btn js-modal">Show modal inline 2</button>
             </div>
             <div id="inline-content" class="hidden">
                 <h1>This is my cool modal</h1>
@@ -114,7 +114,7 @@
                 </a>
             </div>
             <div class="mt-4">
-                <button id="modalConfirmationButton" class="btn">This is triggered by JS</button>
+                <button type="button" id="modalConfirmationButton" class="btn">This is triggered by JS</button>
             </div>
         </div>
     </div>
diff --git a/templates/jsPlugins/pageFind.twig b/templates/jsPlugins/pageFind.twig
index 3e23c26e..c8cfe854 100644
--- a/templates/jsPlugins/pageFind.twig
+++ b/templates/jsPlugins/pageFind.twig
@@ -25,9 +25,9 @@
 						<span class="js-total-find">0</span>
 					</div>
 				</div>
-				<buttons class="cursor-pointer js-page-find-next" title="Next Search Result">{{ icon('chevron-down', { class: 'text-lg' }) }}<span class="sr-only">Next Search Result</span></buttons>
-				<buttons class="cursor-pointer js-page-find-prev" title="Previous Search Result">{{ icon('chevron-up', { class: 'text-lg' }) }}<span class="sr-only">Previous Search Result</span></buttons>
-				<buttons class="cursor-pointer js-page-find-clear" title="Clear Search Result">{{ icon('clear', { class: 'text-lg' }) }}<span class="sr-only">Clear Search Result</span></buttons>
+				<buttons type="button" class="cursor-pointer js-page-find-next" title="Next Search Result">{{ icon('chevron-down', { class: 'text-lg' }) }}<span class="sr-only">Next Search Result</span></buttons>
+				<buttons type="button" class="cursor-pointer js-page-find-prev" title="Previous Search Result">{{ icon('chevron-up', { class: 'text-lg' }) }}<span class="sr-only">Previous Search Result</span></buttons>
+				<buttons type="button" class="cursor-pointer js-page-find-clear" title="Clear Search Result">{{ icon('clear', { class: 'text-lg' }) }}<span class="sr-only">Clear Search Result</span></buttons>
 			</form>
 		</div>
 	</div>
@@ -44,7 +44,7 @@
 				<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur asperiores fugiat temporibus ullam consectetur dicta tempora blanditiis, vel illo, sit mollitia facilis vero non, aut eveniet voluptatem harum ipsa neque atque a! Laudantium repellendus numquam voluptatem, quae dolores repudiandae vero reprehenderit sunt, delectus quaerat consectetur tempore optio nam, nulla aspernatur.</p>
 				<p>Cutoff out of view text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur asperiores fugiat temporibus ullam consectetur dicta tempora blanditiis, vel illo, sit mollitia facilis vero non, aut eveniet voluptatem harum ipsa neque atque a! Laudantium repellendus numquam voluptatem, quae dolores repudiandae vero reprehenderit sunt, delectus quaerat consectetur tempore optio nam, nulla aspernatur.</p>
 			</div>
-			<button class="mb-10 btn btn--primary js-open-on-find" data-s-toggle-target="cutoffContent-1">
+			<button type="button" class="mb-10 btn btn--primary js-open-on-find" data-s-toggle-target="cutoffContent-1">
 				Read more
 				{{ icon('chevron-down') }} 
 			</button>
diff --git a/templates/jsPlugins/slider.twig b/templates/jsPlugins/slider.twig
index e2e866c4..87a450b4 100644
--- a/templates/jsPlugins/slider.twig
+++ b/templates/jsPlugins/slider.twig
@@ -72,15 +72,15 @@
 						</div>
 						<div class="absolute bottom-0 mb-4 glide__bullets" data-glide-el="controls[nav]">
 							{% for image in images %}
-								<button class="mx-2 glide__bullet" data-glide-dir="={{loop.index - 1}}"></button>
+								<button type="button" class="mx-2 glide__bullet" data-glide-dir="={{loop.index - 1}}"></button>
 							{% endfor %}
 						</div>
 						<div class="absolute z-10 w-full max-w-screen-xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" data-glide-el="controls">
-							<button class="left-0 flex items-center justify-center glide__arrow glide__arrow--left" data-glide-dir="&lt;">
+							<button type="button" class="left-0 flex items-center justify-center glide__arrow glide__arrow--left" data-glide-dir="&lt;">
 								{{ icon('chevron-left') }} 
 							</button>
-							<button class="right-0 flex items-center justify-center glide__arrow glide__arrow--right" data-glide-dir="&gt;">
-								{{ icon('chevron-right') }} 
+							<button type="button" class="right-0 flex items-center justify-center glide__arrow glide__arrow--right" data-glide-dir="&gt;">
+								{{ icon('chevron-right') }}
 							</button>
 						</div>
 					</div>
@@ -104,11 +104,11 @@
 						</div>
 					</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/jsPlugins/tabs.twig b/templates/jsPlugins/tabs.twig
index d818b7e1..b8561362 100644
--- a/templates/jsPlugins/tabs.twig
+++ b/templates/jsPlugins/tabs.twig
@@ -22,22 +22,22 @@
   <div class="container">
     <ul class="flex flex-wrap -mx-1 lg:divide-x-2 lg:divide-light lg:m-0 tabs js-tabs" data-first-tab="1">
       <li class="w-full sm:w-1/2 lg:w-auto lg:m-0">
-        <button class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab1">
+        <button type="button" class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab1">
           Tab 1
         </button>
       </li>
       <li class="w-full sm:w-1/2 lg:w-auto lg:m-0">
-        <button class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab2">
+        <button type="button" class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab2">
           Tab 2
         </button>
       </li>
       <li class="w-full sm:w-1/2 lg:w-auto lg:m-0">
-        <button class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab3">
+        <button type="button" class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab3">
           Tab 3
         </button>
       </li>
       <li class="w-full sm:w-1/2 lg:w-auto lg:m-0">
-        <button class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab4">
+        <button type="button" class="w-full px-5 py-3 text-base font-normal text-primary bg-white-50" data-panel="Tab4">
           Tab 4
         </button>
       </li>
diff --git a/templates/jsPlugins/toggle.twig b/templates/jsPlugins/toggle.twig
index f78e6596..385d9d06 100644
--- a/templates/jsPlugins/toggle.twig
+++ b/templates/jsPlugins/toggle.twig
@@ -93,7 +93,7 @@
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur asperiores fugiat temporibus ullam consectetur dicta tempora blanditiis, vel illo, sit mollitia facilis vero non, aut eveniet voluptatem harum ipsa neque atque a! Laudantium repellendus numquam voluptatem, quae dolores repudiandae vero reprehenderit sunt, delectus quaerat consectetur tempore optio nam, nulla aspernatur.</p>
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur asperiores fugiat temporibus ullam consectetur dicta tempora blanditiis, vel illo, sit mollitia facilis vero non, aut eveniet voluptatem harum ipsa neque atque a! Laudantium repellendus numquam voluptatem, quae dolores repudiandae vero reprehenderit sunt, delectus quaerat consectetur tempore optio nam, nulla aspernatur.</p>
     </div>
-    <button class="mb-10 btn btn--primary" data-s-toggle-target="toggleContent8">
+    <button type="button" class="mb-10 btn btn--primary" data-s-toggle-target="toggleContent8">
         Read more
         {{ icon('chevron-down') }} 
     </button>
@@ -103,7 +103,7 @@
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur asperiores fugiat temporibus ullam consectetur dicta tempora blanditiis, vel illo, sit mollitia facilis vero non, aut eveniet voluptatem harum ipsa neque atque a! Laudantium repellendus numquam voluptatem, quae dolores repudiandae vero reprehenderit sunt, delectus quaerat consectetur tempore optio nam, nulla aspernatur.</p>
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur asperiores fugiat temporibus ullam consectetur dicta tempora blanditiis, vel illo, sit mollitia facilis vero non, aut eveniet voluptatem harum ipsa neque atque a! Laudantium repellendus numquam voluptatem, quae dolores repudiandae vero reprehenderit sunt, delectus quaerat consectetur tempore optio nam, nulla aspernatur.</p>
     </div>
-    <button class="mb-10 btn btn--primary" data-s-toggle-target="toggleContent9">
+    <button type="button" class="mb-10 btn btn--primary" data-s-toggle-target="toggleContent9">
         Read more
         {{ icon('chevron-down') }} 
     </button>
diff --git a/templates/jsPlugins/tooltip.twig b/templates/jsPlugins/tooltip.twig
index e284e3ca..9b4b5ca2 100644
--- a/templates/jsPlugins/tooltip.twig
+++ b/templates/jsPlugins/tooltip.twig
@@ -19,29 +19,29 @@
   <div class="container">
     <h2>Tooltip on the button</h2>
     <div class="space-x-8">
-        <button class="btn" data-tippy-content="Tooltip">Text</button>
-        <button class="btn" data-tippy-content="Another Tooltip">Text</button>
+        <button type="button" class="btn" data-tippy-content="Tooltip">Text</button>
+        <button type="button" class="btn" data-tippy-content="Another Tooltip">Text</button>
     </div>
     <h2>Tooltip on the  with options</h2>
     <p>For a full set of the tippy options visit: <a href="https://atomiks.github.io/tippyjs/v6/all-props">https://atomiks.github.io/tippyjs/v6/all-props</a></p>
     <div class="mt-4 space-x-8">
-        <button class="btn" data-tippy-content="Tooltip" 
+        <button type="button" class="btn" data-tippy-content="Tooltip" 
                 data-tippy-duration="0"
                 data-tippy-arrow="false"
                 data-tippy-delay="[1000, 200]">No arrow and delay</button>
-        <button class="btn" data-tippy-content="Tooltip" 
+        <button type="button" class="btn" data-tippy-content="Tooltip" 
                 data-tippy-placement="bottom">Tooltip at the bottom</button>
     </div>
     <h2>Tooltip with template</h2>
     <div>
-        <button class="btn" id="button" data-tippy-template="tooltip">Tooltip</button>
+        <button type="button" class="btn" id="button" data-tippy-template="tooltip">Tooltip</button>
         <div class="hidden">
             <div id="tooltip" role="tooltip">My tooltip <strong>With html enabled</strong>.</div>
         </div>
     </div>
     <h2>Tooltip with template and interactive</h2>
     <div>
-        <button class="btn" id="button" data-tippy-interactive="true" data-tippy-template="tooltipInteractive">Tooltip</button>
+        <button type="button" class="btn" id="button" data-tippy-interactive="true" data-tippy-template="tooltipInteractive">Tooltip</button>
         <div class="hidden">
             <div id="tooltipInteractive" role="tooltip">My tooltip <a href="https://www.statik.be">Go to Statik</a>.</div>
         </div>
diff --git a/templates/jsPlugins/videoToggle.twig b/templates/jsPlugins/videoToggle.twig
index 55cff255..357c3296 100644
--- a/templates/jsPlugins/videoToggle.twig
+++ b/templates/jsPlugins/videoToggle.twig
@@ -18,7 +18,7 @@
         <div class="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
             {% set embed = craft.videoparser.parse("https://www.youtube.com/watch?v=r2GZHjFBhp4") %}
             {% if embed %}
-            <button class="px-4 py-2 bg-white rounded" 
+            <button type="button" class="px-4 py-2 bg-white rounded" 
                     data-s-video-toggle="{{embed.embedSrc}}" 
                     data-s-video-toggle-container="#video1">
                 {{ icon('play-arrow', { class: 'ml-2 text-xl' }) }}  {{ 'Play video'|t }}
@@ -38,7 +38,7 @@
         <div class="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
             {% set embed = craft.videoparser.parse("https://www.youtube.com/watch?v=r2GZHjFBhp4") %}
             {% if embed %}
-            <button class="px-4 py-2 bg-white rounded" 
+            <button type="button" class="px-4 py-2 bg-white rounded" 
                     data-s-video-toggle="{{embed.embedSrc}}" 
                     data-s-video-toggle-container="#video2" 
                     data-s-video-toggle-aspect-ratio="16:9">
@@ -59,7 +59,7 @@
         <div class="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
             {% set embed = craft.videoparser.parse("https://www.youtube.com/watch?v=r2GZHjFBhp4") %}
             {% if embed %}
-            <button class="px-4 py-2 bg-white rounded" 
+            <button type="button" class="px-4 py-2 bg-white rounded" 
                     data-s-video-toggle="{{embed.embedSrc}}" 
                     data-s-video-toggle-container="#video3" 
                     data-s-video-toggle-aspect-ratio="16:9"