diff --git a/.storybook/drupal-attribute.js b/.storybook/drupal-attribute.js
new file mode 100644
index 000000000..d1207dd10
--- /dev/null
+++ b/.storybook/drupal-attribute.js
@@ -0,0 +1,56 @@
+const { DrupalAttribute } = require("drupal-attribute");
+
+/**
+ * Storybook-specific DrupalAttribute variant.
+ *
+ * Aligns the JS implementation with Drupal's PHP Attribute behavior by keeping
+ * empty-string attribute values (e.g. `hidden=""`) instead of dropping them.
+ */
+class StorybookDrupalAttribute extends DrupalAttribute {
+  toString() {
+    const components = [];
+
+    for (const key of this.keys()) {
+      let value = this.get(key);
+
+      if (value === null || value === undefined || value === false) {
+        continue;
+      }
+
+      if (value === true) {
+        components.push(key);
+        continue;
+      }
+
+      if (Array.isArray(value)) {
+        const filtered = value
+          .filter((v) => v !== null && v !== undefined && v !== "")
+          .map(String);
+
+        if (filtered.length === 0) {
+          continue;
+        }
+
+        value = filtered.join(" ");
+      }
+
+      if (value === key) {
+        components.push(key);
+        continue;
+      }
+
+      if (value === "") {
+        components.push(`${key}=""`);
+        continue;
+      }
+
+      components.push(`${key}="${String(value)}"`);
+    }
+
+    return components.length ? ` ${components.join(" ")}` : "";
+  }
+}
+
+module.exports = {
+  StorybookDrupalAttribute,
+};
diff --git a/.storybook/environment.js b/.storybook/environment.js
index 251c59710..af5e304f0 100644
--- a/.storybook/environment.js
+++ b/.storybook/environment.js
@@ -6,7 +6,7 @@ const {
   createFilesystemLoader,
   createFunction,
 } = require("twing");
-const { DrupalAttribute } = require("drupal-attribute");
+const { StorybookDrupalAttribute } = require("./drupal-attribute");
 
 const projComponentsAbsPath = path.resolve(__dirname, "../src/components");
 const projCompositionsAbsPath = path.resolve(__dirname, "../src/compositions");
@@ -23,7 +23,7 @@ try {
 
   const createAttribute = createFunction(
     "create_attribute",
-    () => Promise.resolve(new DrupalAttribute()),
+    () => Promise.resolve(new StorybookDrupalAttribute()),
     [],
   );
 
diff --git a/src/components/bcl-card-layout/__snapshots__/card-layout.test.js.snap b/src/components/bcl-card-layout/__snapshots__/card-layout.test.js.snap
index a8f94913b..d184b1936 100644
--- a/src/components/bcl-card-layout/__snapshots__/card-layout.test.js.snap
+++ b/src/components/bcl-card-layout/__snapshots__/card-layout.test.js.snap
@@ -585,7 +585,7 @@ exports[`OE - Card grid renders correctly with cards having equal height 1`] = `
       class="col"
     >
       <article
-        class="mb-3 card h-100"
+        class="mb-3 h-100 card"
       >
         <div
           class="card-header"
@@ -632,7 +632,7 @@ exports[`OE - Card grid renders correctly with cards having equal height 1`] = `
       class="col"
     >
       <article
-        class="mb-3 card h-100"
+        class="mb-3 h-100 card"
       >
         <div
           class="card-header"
@@ -678,7 +678,7 @@ exports[`OE - Card grid renders correctly with cards having equal height 1`] = `
       class="col"
     >
       <article
-        class="mb-3 card h-100"
+        class="mb-3 h-100 card"
       >
         <div
           class="card-header"
@@ -730,7 +730,7 @@ exports[`OE - Card grid renders correctly with cards having equal height 1`] = `
       class="col"
     >
       <article
-        class="mb-3 card h-100"
+        class="mb-3 h-100 card"
       >
         <div
           class="card-header"
@@ -777,7 +777,7 @@ exports[`OE - Card grid renders correctly with cards having equal height 1`] = `
       class="col"
     >
       <article
-        class="mb-3 card h-100"
+        class="mb-3 h-100 card"
       >
         <div
           class="card-header"
@@ -819,7 +819,7 @@ exports[`OE - Card grid renders correctly with cards having equal height 1`] = `
       class="col"
     >
       <article
-        class="mb-3 card h-100"
+        class="mb-3 h-100 card"
       >
         <div
           class="card-header"
diff --git a/src/components/bcl-carousel/__snapshots__/carousel.test.js.snap b/src/components/bcl-carousel/__snapshots__/carousel.test.js.snap
index e77391cb0..81a8ac484 100644
--- a/src/components/bcl-carousel/__snapshots__/carousel.test.js.snap
+++ b/src/components/bcl-carousel/__snapshots__/carousel.test.js.snap
@@ -11,7 +11,7 @@ exports[`OE - carousel renders correctly 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -175,7 +175,7 @@ exports[`OE - carousel renders correctly when touch swipe is disabled 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -338,7 +338,7 @@ exports[`OE - carousel renders correctly with caption title and no caption 1`] =
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -489,7 +489,7 @@ exports[`OE - carousel renders correctly with custom intervals 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -656,7 +656,7 @@ exports[`OE - carousel renders correctly with dark variant 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -819,7 +819,7 @@ exports[`OE - carousel renders correctly with fade and dark variant 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -982,7 +982,7 @@ exports[`OE - carousel renders correctly with fade transition 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1145,7 +1145,7 @@ exports[`OE - carousel renders correctly with rounded indicators 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1314,7 +1314,7 @@ exports[`OE - carousel renders correctly with specific slide 1`] = `
         type="button"
       />
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 2"
         class="active"
         data-bs-slide-to="1"
@@ -1481,7 +1481,7 @@ exports[`OE - carousel renders correctly with title 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1643,7 +1643,7 @@ exports[`OE - carousel renders correctly without autoplay 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1806,7 +1806,7 @@ exports[`OE - carousel renders correctly without controls 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
diff --git a/src/components/bcl-dropdown/__snapshots__/dropdown.test.js.snap b/src/components/bcl-dropdown/__snapshots__/dropdown.test.js.snap
index 07e76bca6..bc80d0eb2 100644
--- a/src/components/bcl-dropdown/__snapshots__/dropdown.test.js.snap
+++ b/src/components/bcl-dropdown/__snapshots__/dropdown.test.js.snap
@@ -44,7 +44,7 @@ exports[`OE - dropdown renders correctly 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -107,7 +107,7 @@ exports[`OE - dropdown renders correctly with alignment end 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -170,7 +170,7 @@ exports[`OE - dropdown renders correctly with dark mode 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -233,7 +233,7 @@ exports[`OE - dropdown renders correctly with direction dropup 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -296,7 +296,7 @@ exports[`OE - dropdown renders correctly with trigger link 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -356,7 +356,7 @@ exports[`OE - dropdown renders correctly without wrapper 1`] = `
       <button
         aria-disabled="true"
         class="dropdown-item"
-        disabled="disabled"
+        disabled
         type="button"
       >
         I'm a disabled button
diff --git a/src/components/bcl-form-input/__snapshots__/form-input.test.js.snap b/src/components/bcl-form-input/__snapshots__/form-input.test.js.snap
index 124f85569..a5baa1d74 100644
--- a/src/components/bcl-form-input/__snapshots__/form-input.test.js.snap
+++ b/src/components/bcl-form-input/__snapshots__/form-input.test.js.snap
@@ -218,7 +218,7 @@ exports[`OE - Form Input renders correctly when disabled 1`] = `
   <input
     aria-describedby="helperText"
     class="form-control"
-    disabled="disabled"
+    disabled
     id="example-form-input-1"
     type="text"
   />
@@ -323,7 +323,7 @@ exports[`OE - Form Input renders correctly when readonly 1`] = `
     aria-describedby="helperText"
     class="form-control"
     id="example-form-input-1"
-    readonly="readonly"
+    readonly
     type="text"
   />
   <div
@@ -357,7 +357,7 @@ exports[`OE - Form Input renders correctly when required 1`] = `
     aria-describedby="helperText"
     class="form-control"
     id="example-form-input-1"
-    required="required"
+    required
     type="text"
   />
   <div
diff --git a/src/components/bcl-form/__snapshots__/form.test.js.snap b/src/components/bcl-form/__snapshots__/form.test.js.snap
index a63db4b51..214c27552 100644
--- a/src/components/bcl-form/__snapshots__/form.test.js.snap
+++ b/src/components/bcl-form/__snapshots__/form.test.js.snap
@@ -4,7 +4,7 @@ exports[`OE - Form basic renders correctly 1`] = `
 <jest>
   <form
     class="needs-validation"
-    novalidate="novalidate"
+    novalidate
     onsubmit="return false;"
   >
     <div
@@ -20,7 +20,7 @@ exports[`OE - Form basic renders correctly 1`] = `
         aria-describedby="emailHelp"
         class="form-control"
         id="exampleInputEmail1"
-        required="required"
+        required
         type="email"
       />
       <div
@@ -52,7 +52,7 @@ exports[`OE - Form basic renders correctly 1`] = `
       <input
         class="form-control"
         id="exampleInputPassword1"
-        required="required"
+        required
         type="password"
       />
       <div
@@ -75,7 +75,7 @@ exports[`OE - Form basic renders correctly 1`] = `
         <input
           class="form-check-input"
           id="exampleInputCheck1"
-          required="required"
+          required
           type="checkbox"
         />
         <label
@@ -126,7 +126,7 @@ exports[`OE - Form horizontal renders correctly 1`] = `
         <input
           class="form-control"
           id="exampleInputEmail1"
-          required="required"
+          required
           type="email"
         />
       </div>
@@ -146,7 +146,7 @@ exports[`OE - Form horizontal renders correctly 1`] = `
         <input
           class="form-control"
           id="exampleInputPassword1"
-          required="required"
+          required
           type="password"
         />
       </div>
@@ -197,7 +197,7 @@ exports[`OE - Form horizontal renders correctly 1`] = `
         >
           <input
             class="form-check-input"
-            disabled="disabled"
+            disabled
             id="exampleInputRadios3"
             type="radio"
           />
@@ -222,7 +222,7 @@ exports[`OE - Form horizontal renders correctly 1`] = `
           <input
             class="form-check-input"
             id="exampleInputCheck1"
-            required="required"
+            required
             type="checkbox"
           />
           <label
@@ -252,7 +252,7 @@ exports[`OE - Form inline renders correctly 1`] = `
 <jest>
   <form
     class="row row-cols-lg-auto g-3 align-items-center"
-    novalidate="novalidate"
+    novalidate
     onsubmit="return false;"
   >
     <div
@@ -268,7 +268,7 @@ exports[`OE - Form inline renders correctly 1`] = `
         class="form-control"
         id="inlineFormInputGroupUsername"
         placeholder="Username"
-        required="required"
+        required
         type="text"
       />
     </div>
@@ -285,7 +285,7 @@ exports[`OE - Form inline renders correctly 1`] = `
         class="form-control"
         id="inlineFormInputGroupPassword"
         placeholder="Password"
-        required="required"
+        required
         type="text"
       />
     </div>
@@ -298,7 +298,7 @@ exports[`OE - Form inline renders correctly 1`] = `
         <input
           class="form-check-input"
           id="exampleInputCheck1"
-          required="required"
+          required
           type="checkbox"
         />
         <label
@@ -326,11 +326,11 @@ exports[`OE - Form inline renders correctly 1`] = `
 exports[`OE - Form renders correctly when disabled 1`] = `
 <jest>
   <form
-    novalidate="novalidate"
+    novalidate
     onsubmit="return false;"
   >
     <fieldset
-      disabled=""
+      disabled
     >
       <legend>
         Disabled fieldset example
@@ -348,7 +348,7 @@ exports[`OE - Form renders correctly when disabled 1`] = `
           class="form-control"
           id="disabledTextInput"
           placeholder="Disabled input"
-          required="required"
+          required
           type="text"
         />
         <div
@@ -386,7 +386,7 @@ exports[`OE - Form renders correctly when disabled 1`] = `
             last option
           </option>
           <option
-            selected=""
+            selected
             value=""
           >
             the selected option
@@ -443,7 +443,7 @@ exports[`OE - Form renders correctly with title 1`] = `
   </h1>
   <form
     class="needs-validation"
-    novalidate="novalidate"
+    novalidate
     onsubmit="return false;"
   >
     <div
@@ -459,7 +459,7 @@ exports[`OE - Form renders correctly with title 1`] = `
         aria-describedby="emailHelp"
         class="form-control"
         id="exampleInputEmail1"
-        required="required"
+        required
         type="email"
       />
       <div
@@ -491,7 +491,7 @@ exports[`OE - Form renders correctly with title 1`] = `
       <input
         class="form-control"
         id="exampleInputPassword1"
-        required="required"
+        required
         type="password"
       />
       <div
@@ -514,7 +514,7 @@ exports[`OE - Form renders correctly with title 1`] = `
         <input
           class="form-check-input"
           id="exampleInputCheck1"
-          required="required"
+          required
           type="checkbox"
         />
         <label
@@ -549,7 +549,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
 <jest>
   <form
     class="row g-3"
-    novalidate="novalidate"
+    novalidate
     onsubmit="return false;"
   >
     <div
@@ -565,7 +565,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
         aria-describedby="emailHelp"
         class="form-control"
         id="exampleInputEmail1"
-        required="required"
+        required
         type="email"
       />
       <div
@@ -587,7 +587,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
       <input
         class="form-control"
         id="exampleInputPassword1"
-        required="required"
+        required
         type="password"
       />
     </div>
@@ -633,7 +633,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
       <input
         class="form-control"
         id="exampleInputCity1"
-        required="required"
+        required
         type="text"
       />
     </div>
@@ -649,7 +649,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
       <input
         class="form-control"
         id="exampleInputState1"
-        required="required"
+        required
         type="text"
       />
     </div>
@@ -665,7 +665,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
       <input
         class="form-control"
         id="exampleInputZip1"
-        required="required"
+        required
         type="text"
       />
     </div>
@@ -678,7 +678,7 @@ exports[`OE - Form using a grid renders correctly 1`] = `
         <input
           class="form-check-input"
           id="exampleInputCheck1"
-          required="required"
+          required
           type="checkbox"
         />
         <label
diff --git a/src/components/bcl-list-group/__snapshots__/list-group.test.js.snap b/src/components/bcl-list-group/__snapshots__/list-group.test.js.snap
index aa0189fc6..c211a90bf 100644
--- a/src/components/bcl-list-group/__snapshots__/list-group.test.js.snap
+++ b/src/components/bcl-list-group/__snapshots__/list-group.test.js.snap
@@ -167,7 +167,7 @@ exports[`OE - List group renders correctly with actionable items 1`] = `
     <button
       aria-disabled="true"
       class="list-group-item list-group-item-action"
-      disabled="disabled"
+      disabled
       type="button"
     >
       Button 1
diff --git a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
index 8797630a9..b57fddd8f 100644
--- a/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
+++ b/src/components/bcl-navbar/__snapshots__/navbar.test.js.snap
@@ -148,6 +148,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -235,6 +236,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -405,7 +407,7 @@ exports[`OE - navbar dark renders correctly 1`] = `
                 <button
                   aria-disabled="true"
                   class="dropdown-item"
-                  disabled="disabled"
+                  disabled
                   type="button"
                 >
                   I'm a disabled button
@@ -576,6 +578,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -663,6 +666,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -833,7 +837,7 @@ exports[`OE - navbar light renders correctly 1`] = `
                 <button
                   aria-disabled="true"
                   class="dropdown-item"
-                  disabled="disabled"
+                  disabled
                   type="button"
                 >
                   I'm a disabled button
@@ -987,6 +991,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                           <div
                             aria-labelledby="custom-trigger-mm-1"
                             class="bcl-mega-menu__submenu __level-2"
+                            hidden
                             id="mm-panel-custom-trigger-mm-1"
                             role="group"
                           >
@@ -1074,6 +1079,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
                           <div
                             aria-labelledby="custom-trigger-mm-2"
                             class="bcl-mega-menu__submenu __level-2"
+                            hidden
                             id="mm-panel-custom-trigger-mm-2"
                             role="group"
                           >
@@ -1244,7 +1250,7 @@ exports[`OE - navbar renders correctly with disable collapse 1`] = `
               <button
                 aria-disabled="true"
                 class="dropdown-item"
-                disabled="disabled"
+                disabled
                 type="button"
               >
                 I'm a disabled button
@@ -1414,6 +1420,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -1501,6 +1508,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1671,7 +1679,7 @@ exports[`OE - navbar renders correctly with expand small 1`] = `
                 <button
                   aria-disabled="true"
                   class="dropdown-item"
-                  disabled="disabled"
+                  disabled
                   type="button"
                 >
                   I'm a disabled button
diff --git a/src/components/bcl-navigation/__snapshots__/navigation.test.js.snap b/src/components/bcl-navigation/__snapshots__/navigation.test.js.snap
index 8dd2cfbbe..0a52dee1f 100644
--- a/src/components/bcl-navigation/__snapshots__/navigation.test.js.snap
+++ b/src/components/bcl-navigation/__snapshots__/navigation.test.js.snap
@@ -348,7 +348,7 @@ exports[`OE - navigation renders correctly with tabs 1`] = `
       class="nav-link"
       data-bs-target="#third"
       data-bs-toggle="tab"
-      disabled="disabled"
+      disabled
       id="third-tab"
       role="tab"
       type="button"
diff --git a/src/components/bcl-select/__snapshots__/select.test.js.snap b/src/components/bcl-select/__snapshots__/select.test.js.snap
index b78d5d0ff..b8baa9752 100644
--- a/src/components/bcl-select/__snapshots__/select.test.js.snap
+++ b/src/components/bcl-select/__snapshots__/select.test.js.snap
@@ -11,7 +11,7 @@ exports[`OE - select renders correctly 1`] = `
   <select
     class="form-select"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -34,7 +34,7 @@ exports[`OE - select renders correctly 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -69,8 +69,8 @@ exports[`OE - select renders correctly as a multiple choice select 1`] = `
   </label>
   <select
     id="multiselect-1"
-    multiple="multiple"
-    required="required"
+    multiple
+    required
   >
     <optgroup
       label="Group 1"
@@ -112,7 +112,7 @@ exports[`OE - select renders correctly as a multiple choice select 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value="9"
     >
       the selected option
@@ -147,9 +147,9 @@ exports[`OE - select renders correctly when disabled 1`] = `
   </label>
   <select
     class="form-select"
-    disabled="disabled"
+    disabled
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -172,7 +172,7 @@ exports[`OE - select renders correctly when disabled 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -208,7 +208,7 @@ exports[`OE - select renders correctly when invalid 1`] = `
   <select
     class="form-select is-invalid"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -231,7 +231,7 @@ exports[`OE - select renders correctly when invalid 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -267,8 +267,8 @@ exports[`OE - select renders correctly when multiple 1`] = `
   <select
     class="form-select"
     id="select-1"
-    multiple="multiple"
-    required="required"
+    multiple
+    required
   >
     <option
       value="1"
@@ -291,7 +291,7 @@ exports[`OE - select renders correctly when multiple 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -327,7 +327,7 @@ exports[`OE - select renders correctly when readonly 1`] = `
   <select
     class="form-select"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -350,7 +350,7 @@ exports[`OE - select renders correctly when readonly 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -386,7 +386,7 @@ exports[`OE - select renders correctly when required 1`] = `
   <select
     class="form-select"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -409,7 +409,7 @@ exports[`OE - select renders correctly when required 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -445,7 +445,7 @@ exports[`OE - select renders correctly when valid 1`] = `
   <select
     class="form-select is-valid"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -468,7 +468,7 @@ exports[`OE - select renders correctly when valid 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -504,7 +504,7 @@ exports[`OE - select renders correctly with a label 1`] = `
   <select
     class="form-select"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -527,7 +527,7 @@ exports[`OE - select renders correctly with a label 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
@@ -563,7 +563,7 @@ exports[`OE - select renders correctly with an hidden label 1`] = `
   <select
     class="form-select"
     id="select-1"
-    required="required"
+    required
   >
     <option
       value="1"
@@ -586,7 +586,7 @@ exports[`OE - select renders correctly with an hidden label 1`] = `
       last option
     </option>
     <option
-      selected=""
+      selected
       value=""
     >
       the selected option
diff --git a/src/components/bcl-textarea/__snapshots__/textarea.test.js.snap b/src/components/bcl-textarea/__snapshots__/textarea.test.js.snap
index 1ac0d88fc..45f728106 100644
--- a/src/components/bcl-textarea/__snapshots__/textarea.test.js.snap
+++ b/src/components/bcl-textarea/__snapshots__/textarea.test.js.snap
@@ -42,7 +42,7 @@ exports[`OE - textarea renders correctly when disabled 1`] = `
   </label>
   <textarea
     class="form-control"
-    disabled="disabled"
+    disabled
     id="example-textarea-1"
     placeholder="Text here"
     rows="4"
@@ -149,7 +149,7 @@ exports[`OE - textarea renders correctly when readonly 1`] = `
     class="form-control"
     id="example-textarea-1"
     placeholder="Text here"
-    readonly="readonly"
+    readonly
     rows="4"
   />
   <div
@@ -182,7 +182,7 @@ exports[`OE - textarea renders correctly when required 1`] = `
     class="form-control"
     id="example-textarea-1"
     placeholder="Text here"
-    required="required"
+    required
     rows="4"
   />
   <div
diff --git a/src/compositions/bcl-attributes/__snapshots__/attributes.test.js.snap b/src/compositions/bcl-attributes/__snapshots__/attributes.test.js.snap
new file mode 100644
index 000000000..2efcf3753
--- /dev/null
+++ b/src/compositions/bcl-attributes/__snapshots__/attributes.test.js.snap
@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`OE - Attributes default renders correctly 1`] = `
+<jest>
+  <div
+    data-case="boolean-true"
+    data-flag
+  >
+    Boolean true attribute
+  </div>
+  
+
+  <div
+    data-case="value-matches-key"
+    data-match
+  >
+    Value matches key attribute
+  </div>
+  
+
+  <div
+    data-case="string-true"
+    data-flag="true"
+  >
+    String literal "true" attribute
+  </div>
+  
+
+  <div
+    data-case="empty-string"
+    data-empty=""
+  >
+    Empty string attribute
+  </div>
+  
+
+  <div
+    data-case="zero"
+    data-zero="0"
+  >
+    Zero attribute
+  </div>
+  
+
+  <div
+    data-case="null"
+  >
+    Null attribute
+  </div>
+  
+
+  <div
+    data-case="false"
+  >
+    False attribute
+  </div>
+  
+
+  <div
+    data-case="undefined"
+  >
+    Undefined attribute
+  </div>
+  
+
+  <div
+    data-case="string-value"
+    data-value="example"
+  >
+    String value attribute
+  </div>
+  
+
+  <div
+    data-case="array"
+    data-list="one two three"
+  >
+    Array attribute with values
+  </div>
+  
+
+  <div
+    data-case="array-empty-values"
+    data-list="one"
+  >
+    Array attribute with empty values
+  </div>
+  
+
+  <div
+    data-case="empty-array"
+  >
+    Empty array attribute
+  </div>
+  
+
+  <div
+    data-case="array-only-empty-strings"
+  >
+    Array attribute with only empty strings
+  </div>
+  
+
+
+  <form
+    data-empty=""
+    data-value="form"
+    data-zero="0"
+    id="attribute-form"
+    novalidate
+  >
+    
+  
+    <fieldset>
+      
+    
+      <legend>
+        Form attribute examples
+      </legend>
+      
+    
+      <label
+        for="sample-input"
+      >
+        Sample input
+      </label>
+      
+    
+      <input
+        id="sample-input"
+        type="text"
+      />
+      
+    
+      <button
+        type="submit"
+      >
+        Submit
+      </button>
+      
+  
+    </fieldset>
+    
+
+  </form>
+</jest>
+`;
diff --git a/src/compositions/bcl-attributes/attributes.html.twig b/src/compositions/bcl-attributes/attributes.html.twig
new file mode 100644
index 000000000..eb84b24b1
--- /dev/null
+++ b/src/compositions/bcl-attributes/attributes.html.twig
@@ -0,0 +1,97 @@
+{% set undefined_value = undefined_variable ?? null %}
+
+{% set attr_boolean_true = create_attribute()
+  .setAttribute('data-case', 'boolean-true')
+  .setAttribute('data-flag', true)
+%}
+
+{% set attr_value_matches_key = create_attribute()
+  .setAttribute('data-case', 'value-matches-key')
+  .setAttribute('data-match', 'data-match')
+%}
+
+{% set attr_string_true = create_attribute()
+  .setAttribute('data-case', 'string-true')
+  .setAttribute('data-flag', 'true')
+%}
+
+{% set attr_empty_string = create_attribute()
+  .setAttribute('data-case', 'empty-string')
+  .setAttribute('data-empty', '')
+%}
+
+{% set attr_zero = create_attribute()
+  .setAttribute('data-case', 'zero')
+  .setAttribute('data-zero', 0)
+%}
+
+{% set attr_null = create_attribute()
+  .setAttribute('data-case', 'null')
+  .setAttribute('data-null', null)
+%}
+
+{% set attr_false = create_attribute()
+  .setAttribute('data-case', 'false')
+  .setAttribute('data-flag', false)
+%}
+
+{% set attr_undefined = create_attribute()
+  .setAttribute('data-case', 'undefined')
+  .setAttribute('data-flag', undefined_value)
+%}
+
+{% set attr_regular_value = create_attribute()
+  .setAttribute('data-case', 'string-value')
+  .setAttribute('data-value', 'example')
+%}
+
+{% set attr_array = create_attribute()
+  .setAttribute('data-case', 'array')
+  .setAttribute('data-list', ['one', 'two', null, 'three', ''])
+%}
+
+{% set attr_array_empty_values = create_attribute()
+  .setAttribute('data-case', 'array-empty-values')
+  .setAttribute('data-list', ['one', '', null, '', undefined_value])
+%}
+
+{% set attr_empty_array = create_attribute()
+  .setAttribute('data-case', 'empty-array')
+  .setAttribute('data-list', [])
+%}
+
+{% set attr_array_only_empty_strings = create_attribute()
+  .setAttribute('data-case', 'array-only-empty-strings')
+  .setAttribute('data-list', ['', ''])
+%}
+
+{% set attr_form = create_attribute()
+  .setAttribute('id', 'attribute-form')
+  .setAttribute('novalidate', true)
+  .setAttribute('data-empty', '')
+  .setAttribute('data-zero', 0)
+  .setAttribute('data-value', 'form')
+%}
+
+<div{{ attr_boolean_true }}>Boolean true attribute</div>
+<div{{ attr_value_matches_key }}>Value matches key attribute</div>
+<div{{ attr_string_true }}>String literal "true" attribute</div>
+<div{{ attr_empty_string }}>Empty string attribute</div>
+<div{{ attr_zero }}>Zero attribute</div>
+<div{{ attr_null }}>Null attribute</div>
+<div{{ attr_false }}>False attribute</div>
+<div{{ attr_undefined }}>Undefined attribute</div>
+<div{{ attr_regular_value }}>String value attribute</div>
+<div{{ attr_array }}>Array attribute with values</div>
+<div{{ attr_array_empty_values }}>Array attribute with empty values</div>
+<div{{ attr_empty_array }}>Empty array attribute</div>
+<div{{ attr_array_only_empty_strings }}>Array attribute with only empty strings</div>
+
+<form{{ attr_form }}>
+  <fieldset>
+    <legend>Form attribute examples</legend>
+    <label for="sample-input">Sample input</label>
+    <input id="sample-input" type="text" />
+    <button type="submit">Submit</button>
+  </fieldset>
+</form>
diff --git a/src/compositions/bcl-attributes/attributes.test.js b/src/compositions/bcl-attributes/attributes.test.js
new file mode 100644
index 000000000..15722950b
--- /dev/null
+++ b/src/compositions/bcl-attributes/attributes.test.js
@@ -0,0 +1,11 @@
+import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+
+const template = "@oe-bcl/bcl-attributes/attributes.html.twig";
+const render = () => renderTwigFileAsNode(template);
+
+describe("OE - Attributes", () => {
+  test("default renders correctly", () => {
+    expect.assertions(1);
+    return expect(render()).resolves.toMatchSnapshot();
+  });
+});
diff --git a/src/compositions/bcl-attributes/package.json b/src/compositions/bcl-attributes/package.json
new file mode 100644
index 000000000..92ecd9c9c
--- /dev/null
+++ b/src/compositions/bcl-attributes/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@openeuropa/bcl-attributes",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "1.10.8",
+  "private": true,
+  "description": "OE - BCL attribute fixtures for regression tests",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues"
+  },
+  "homepage": "https://github.com/openeuropa/bootstrap-component-library",
+  "keywords": [
+    "openeuropa",
+    "bootstrap-component-library",
+    "design-system",
+    "twig"
+  ]
+}
diff --git a/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap b/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap
index 45a860c32..d4dd62340 100644
--- a/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap
+++ b/src/compositions/bcl-contact-form/__snapshots__/contact-form.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1070,7 +1072,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
           </p>
           <form
             class="needs-validation row g-3"
-            novalidate="novalidate"
+            novalidate
             onsubmit="return false;"
           >
             <div
@@ -1086,7 +1088,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText1"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="text"
               />
               <div
@@ -1108,7 +1110,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                 class="form-control is-invalid"
                 id="exampleInputEmail1"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="email"
               />
               <div
@@ -1130,7 +1132,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText2"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="text"
               />
               <div
@@ -1152,7 +1154,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText3"
                 placeholder="Placeholder"
-                required="required"
+                required
                 rows="4"
               />
               <div
@@ -1173,10 +1175,10 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
               <select
                 class="form-select"
                 id="exampleInputSelect1"
-                required="required"
+                required
               >
                 <option
-                  selected=""
+                  selected
                   value="1"
                 >
                   Other topic
@@ -1195,10 +1197,10 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
               <select
                 class="form-select"
                 id="exampleInputSelect2"
-                required="required"
+                required
               >
                 <option
-                  selected=""
+                  selected
                   value="1"
                 >
                   Belgium
@@ -1218,7 +1220,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputPhone"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="telephone"
               />
               <div
@@ -1237,7 +1239,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                   <input
                     class="form-check-input"
                     id="exampleInputCheck1"
-                    required="required"
+                    required
                     type="checkbox"
                   />
                   <label
@@ -1256,7 +1258,7 @@ exports[`OE - Contact-form contact-form error page renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="exampleInputCheck1"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -1680,6 +1682,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -1777,6 +1780,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -2552,7 +2556,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
           </p>
           <form
             class="needs-validation row g-3"
-            novalidate="novalidate"
+            novalidate
             onsubmit="return false;"
           >
             <div
@@ -2568,7 +2572,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText1"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="text"
               />
               <div
@@ -2590,7 +2594,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputEmail1"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="email"
               />
               <div
@@ -2612,7 +2616,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText2"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="text"
               />
               <div
@@ -2634,7 +2638,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText3"
                 placeholder="Placeholder"
-                required="required"
+                required
                 rows="4"
               />
               <div
@@ -2655,10 +2659,10 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
               <select
                 class="form-select"
                 id="exampleInputSelect1"
-                required="required"
+                required
               >
                 <option
-                  selected=""
+                  selected
                   value="1"
                 >
                   Other topic
@@ -2677,10 +2681,10 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
               <select
                 class="form-select"
                 id="exampleInputSelect2"
-                required="required"
+                required
               >
                 <option
-                  selected=""
+                  selected
                   value="1"
                 >
                   Belgium
@@ -2700,7 +2704,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputPhone"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="telephone"
               />
               <div
@@ -2719,7 +2723,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                   <input
                     class="form-check-input"
                     id="exampleInputCheck1"
-                    required="required"
+                    required
                     type="checkbox"
                   />
                   <label
@@ -2738,7 +2742,7 @@ exports[`OE - Contact-form contact-form page renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="exampleInputCheck2"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3162,6 +3166,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -3259,6 +3264,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -4137,7 +4143,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
           </p>
           <form
             class="needs-validation row g-3"
-            novalidate="novalidate"
+            novalidate
             onsubmit="return false;"
           >
             <div
@@ -4153,7 +4159,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText1"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="text"
               />
               <div
@@ -4175,7 +4181,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputEmail1"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="email"
               />
               <div
@@ -4197,7 +4203,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText2"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="text"
               />
               <div
@@ -4219,7 +4225,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputText3"
                 placeholder="Placeholder"
-                required="required"
+                required
                 rows="4"
               />
               <div
@@ -4240,10 +4246,10 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
               <select
                 class="form-select"
                 id="exampleInputSelect1"
-                required="required"
+                required
               >
                 <option
-                  selected=""
+                  selected
                   value="1"
                 >
                   Other topic
@@ -4262,10 +4268,10 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
               <select
                 class="form-select"
                 id="exampleInputSelect2"
-                required="required"
+                required
               >
                 <option
-                  selected=""
+                  selected
                   value="1"
                 >
                   Belgium
@@ -4285,7 +4291,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                 class="form-control"
                 id="exampleInputPhone"
                 placeholder="Placeholder"
-                required="required"
+                required
                 type="telephone"
               />
               <div
@@ -4304,7 +4310,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                   <input
                     class="form-check-input"
                     id="exampleInputCheck1"
-                    required="required"
+                    required
                     type="checkbox"
                   />
                   <label
@@ -4323,7 +4329,7 @@ exports[`OE - Contact-form contact-form success page renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="exampleInputCheck2"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
diff --git a/src/compositions/bcl-event/__snapshots__/event.test.js.snap b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
index 40ba8f41f..7bf980d90 100644
--- a/src/compositions/bcl-event/__snapshots__/event.test.js.snap
+++ b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - event listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - event listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1050,7 +1052,7 @@ exports[`OE - event listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <label
@@ -1077,7 +1079,7 @@ exports[`OE - event listing renders correctly 1`] = `
                   <select
                     class="multiselect form-select"
                     id="type"
-                    multiple="multiple"
+                    multiple
                   >
                     <option
                       value="1"
@@ -1100,7 +1102,7 @@ exports[`OE - event listing renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       Culture
@@ -1141,7 +1143,7 @@ exports[`OE - event listing renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       Placeholder
@@ -1303,7 +1305,7 @@ exports[`OE - event listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
@@ -2517,6 +2519,7 @@ exports[`OE - event page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2614,6 +2617,7 @@ exports[`OE - event page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3641,7 +3645,7 @@ exports[`OE - event page renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="/example.html"
                     target="_blank"
                   >
@@ -3702,7 +3706,7 @@ exports[`OE - event page renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="/example.html"
                     target="_blank"
                   >
diff --git a/src/compositions/bcl-featured-media/__snapshots__/featured-media.test.js.snap b/src/compositions/bcl-featured-media/__snapshots__/featured-media.test.js.snap
index 8d30debe4..8e63d5ea4 100644
--- a/src/compositions/bcl-featured-media/__snapshots__/featured-media.test.js.snap
+++ b/src/compositions/bcl-featured-media/__snapshots__/featured-media.test.js.snap
@@ -334,7 +334,7 @@ exports[`OE - Featured media renders correctly with ratio 1`] = `
   >
     <video
       class="w-100 d-block"
-      controls=""
+      controls
       poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
     >
       <source
@@ -368,7 +368,7 @@ exports[`OE - Featured media renders correctly with video 1`] = `
   >
     <video
       class="w-100 d-block"
-      controls=""
+      controls
       poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
     >
       <source
@@ -407,7 +407,7 @@ exports[`OE - Featured media renders correctly with video and with title 1`] = `
   >
     <video
       class="w-100 d-block"
-      controls=""
+      controls
       poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
     >
       <source
diff --git a/src/compositions/bcl-file/__snapshots__/file.test.js.snap b/src/compositions/bcl-file/__snapshots__/file.test.js.snap
index c5a6d287d..5f6341ff7 100644
--- a/src/compositions/bcl-file/__snapshots__/file.test.js.snap
+++ b/src/compositions/bcl-file/__snapshots__/file.test.js.snap
@@ -67,7 +67,7 @@ exports[`OE - File Card renders correctly 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -146,7 +146,7 @@ exports[`OE - File Card renders correctly 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -199,7 +199,7 @@ exports[`OE - File Card renders correctly 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -250,7 +250,7 @@ exports[`OE - File Card renders correctly 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -332,7 +332,7 @@ exports[`OE - File Card renders correctly with different download icon 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -401,7 +401,7 @@ exports[`OE - File Card renders correctly with different download icon 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -442,7 +442,7 @@ exports[`OE - File Card renders correctly with different download icon 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -483,7 +483,7 @@ exports[`OE - File Card renders correctly with different download icon 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -566,7 +566,7 @@ exports[`OE - File Card renders correctly with download that has different icon
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -635,7 +635,7 @@ exports[`OE - File Card renders correctly with download that has different icon
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -676,7 +676,7 @@ exports[`OE - File Card renders correctly with download that has different icon
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -717,7 +717,7 @@ exports[`OE - File Card renders correctly with download that has different icon
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -800,7 +800,7 @@ exports[`OE - File Card renders correctly with empty download icon name 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -869,7 +869,7 @@ exports[`OE - File Card renders correctly with empty download icon name 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -910,7 +910,7 @@ exports[`OE - File Card renders correctly with empty download icon name 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -951,7 +951,7 @@ exports[`OE - File Card renders correctly with empty download icon name 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1034,7 +1034,7 @@ exports[`OE - File Card renders correctly with new attributes download 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             example="test"
             href="/example.html"
             target="_blank"
@@ -1104,7 +1104,7 @@ exports[`OE - File Card renders correctly with new attributes download 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -1145,7 +1145,7 @@ exports[`OE - File Card renders correctly with new attributes download 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1186,7 +1186,7 @@ exports[`OE - File Card renders correctly with new attributes download 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1338,7 +1338,7 @@ exports[`OE - File Card renders correctly with override default attributes downl
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -1379,7 +1379,7 @@ exports[`OE - File Card renders correctly with override default attributes downl
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1420,7 +1420,7 @@ exports[`OE - File Card renders correctly with override default attributes downl
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1529,7 +1529,7 @@ exports[`OE - File Card renders correctly with title 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -1608,7 +1608,7 @@ exports[`OE - File Card renders correctly with title 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1661,7 +1661,7 @@ exports[`OE - File Card renders correctly with title 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1712,7 +1712,7 @@ exports[`OE - File Card renders correctly with title 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1815,7 +1815,7 @@ exports[`OE - File Card translations renders correctly with download that has di
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -1894,7 +1894,7 @@ exports[`OE - File Card translations renders correctly with download that has di
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1947,7 +1947,7 @@ exports[`OE - File Card translations renders correctly with download that has di
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -1998,7 +1998,7 @@ exports[`OE - File Card translations renders correctly with download that has di
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2101,7 +2101,7 @@ exports[`OE - File Card translations renders correctly with empty download icon
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -2180,7 +2180,7 @@ exports[`OE - File Card translations renders correctly with empty download icon
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2233,7 +2233,7 @@ exports[`OE - File Card translations renders correctly with empty download icon
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2284,7 +2284,7 @@ exports[`OE - File Card translations renders correctly with empty download icon
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2387,7 +2387,7 @@ exports[`OE - File Card translations renders correctly with new attributes downl
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             example="test"
             href="/example.html"
             target="_blank"
@@ -2467,7 +2467,7 @@ exports[`OE - File Card translations renders correctly with new attributes downl
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2520,7 +2520,7 @@ exports[`OE - File Card translations renders correctly with new attributes downl
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2571,7 +2571,7 @@ exports[`OE - File Card translations renders correctly with new attributes downl
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2653,7 +2653,7 @@ exports[`OE - File renders correctly 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -2722,7 +2722,7 @@ exports[`OE - File renders correctly 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -2763,7 +2763,7 @@ exports[`OE - File renders correctly 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2804,7 +2804,7 @@ exports[`OE - File renders correctly 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -2887,7 +2887,7 @@ exports[`OE - File renders correctly with new class on translation 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -2949,7 +2949,7 @@ exports[`OE - File renders correctly with new class on translation 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -3027,7 +3027,7 @@ exports[`OE - File renders correctly with title and link 1`] = `
           </div>
           <a
             class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-            download="true"
+            download
             href="/example.html"
             target="_blank"
           >
@@ -3096,7 +3096,7 @@ exports[`OE - File renders correctly with title and link 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="http://www.africau.edu/images/default/sample.pdf"
                 target="_blank"
               >
@@ -3137,7 +3137,7 @@ exports[`OE - File renders correctly with title and link 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
@@ -3178,7 +3178,7 @@ exports[`OE - File renders correctly with title and link 1`] = `
             >
               <a
                 class="d-block standalone mt-1"
-                download="download"
+                download
                 href="/example.html"
                 target="_blank"
               >
diff --git a/src/compositions/bcl-file/file.html.twig b/src/compositions/bcl-file/file.html.twig
index 1af0a7fd2..bb18963b1 100644
--- a/src/compositions/bcl-file/file.html.twig
+++ b/src/compositions/bcl-file/file.html.twig
@@ -139,7 +139,7 @@
           {% endif %}
         </div>
         {% set download_attributes = create_attribute()
-                                      .setAttribute('download', 'true')
+                                      .setAttribute('download', true)
                                       .setAttribute('target', '_blank')
                                       .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0', 'flex-shrink-0']) %}
         {% set _download = _download|merge({
diff --git a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
index 175f3943a..669a9967a 100644
--- a/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
+++ b/src/compositions/bcl-glossary/__snapshots__/glossary.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1100,7 +1102,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="/example.html"
                       target="_blank"
                     >
@@ -1169,7 +1171,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="http://www.africau.edu/images/default/sample.pdf"
                           target="_blank"
                         >
@@ -1210,7 +1212,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="/example.html"
                           target="_blank"
                         >
@@ -1251,7 +1253,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="/example.html"
                           target="_blank"
                         >
@@ -1333,7 +1335,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="/example.html"
                       target="_blank"
                     >
@@ -1402,7 +1404,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="http://www.africau.edu/images/default/sample.pdf"
                           target="_blank"
                         >
@@ -1443,7 +1445,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="/example.html"
                           target="_blank"
                         >
@@ -1484,7 +1486,7 @@ exports[`OE - Glossary detail renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="/example.html"
                           target="_blank"
                         >
@@ -1896,6 +1898,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -1993,6 +1996,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3150,7 +3154,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                 Z-A
               </option>
               <option
-                selected=""
+                selected
                 value="3"
               >
                 Recent entry
@@ -3181,7 +3185,7 @@ exports[`OE - Glossary listing renders correctly 1`] = `
                 10
               </option>
               <option
-                selected=""
+                selected
                 value="20"
               >
                 20
diff --git a/src/compositions/bcl-group/__snapshots__/group.test.js.snap b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
index 17091e618..db9650c62 100644
--- a/src/compositions/bcl-group/__snapshots__/group.test.js.snap
+++ b/src/compositions/bcl-group/__snapshots__/group.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Group landing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Group landing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1110,7 +1112,7 @@ exports[`OE - Group landing renders correctly 1`] = `
             <button
               aria-disabled="true"
               class="dropdown-item"
-              disabled="disabled"
+              disabled
               type="button"
             >
               I'm a disabled button
@@ -2351,6 +2353,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2448,6 +2451,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3284,7 +3288,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
               <button
                 aria-disabled="true"
                 class="dropdown-item"
-                disabled="disabled"
+                disabled
                 type="button"
               >
                 I'm a disabled button
@@ -3337,6 +3341,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
               </h2>
               <button
                 aria-controls="bcl-offcanvas"
+                aria-label=""
                 class="btn-close text-reset d-lg-none"
                 data-bs-dismiss="offcanvas"
                 data-bs-target="#bcl-offcanvas"
@@ -3348,7 +3353,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -3385,7 +3390,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       the selected option
@@ -3403,7 +3408,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                   <select
                     aria-label="multiselect"
                     class="multi-select"
-                    multiple="multiple"
+                    multiple
                   >
                     <option
                       value="1"
@@ -3426,7 +3431,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       the selected option
@@ -3448,7 +3453,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                       class="form-check"
                     >
                       <input
-                        checked="checked"
+                        checked
                         class="form-check-input"
                         id="checked-filter"
                         type="checkbox"
@@ -3637,7 +3642,7 @@ exports[`OE - Group listing Content renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
@@ -4500,6 +4505,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -4597,6 +4603,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -5433,7 +5440,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
               <button
                 aria-disabled="true"
                 class="dropdown-item"
-                disabled="disabled"
+                disabled
                 type="button"
               >
                 I'm a disabled button
@@ -5498,7 +5505,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <fieldset
@@ -5686,7 +5693,7 @@ exports[`OE - Group listing Member renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
@@ -6497,6 +6504,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -6594,6 +6602,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -7397,7 +7406,7 @@ exports[`OE - Group listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <fieldset
@@ -7418,7 +7427,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="public-groups"
                           type="checkbox"
@@ -7438,7 +7447,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="restricted-groups"
                           type="checkbox"
@@ -7628,7 +7637,7 @@ exports[`OE - Group listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/compositions/bcl-header/__snapshots__/header.test.js.snap b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
index 43d890a08..3be6681e0 100644
--- a/src/compositions/bcl-header/__snapshots__/header.test.js.snap
+++ b/src/compositions/bcl-header/__snapshots__/header.test.js.snap
@@ -182,6 +182,7 @@ exports[`OE - Header EC renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -279,6 +280,7 @@ exports[`OE - Header EC renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1184,6 +1186,7 @@ exports[`OE - Header EU renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -1281,6 +1284,7 @@ exports[`OE - Header EU renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -2175,6 +2179,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2272,6 +2277,7 @@ exports[`OE - Header Neutral renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
diff --git a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
index fea11a825..fb2116062 100644
--- a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
+++ b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Landing page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Landing page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
diff --git a/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
index 53eacc92f..56dddfbc4 100644
--- a/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
+++ b/src/compositions/bcl-mega-menu/__snapshots__/mega-menu.test.js.snap
@@ -109,6 +109,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                   <div
                     aria-labelledby="custom-trigger-mm-1"
                     class="bcl-mega-menu__submenu __level-2"
+                    hidden
                     id="mm-panel-custom-trigger-mm-1"
                     role="group"
                   >
@@ -198,6 +199,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                   <div
                     aria-labelledby="custom-trigger-mm-2"
                     class="bcl-mega-menu__submenu __level-2"
+                    hidden
                     id="mm-panel-custom-trigger-mm-2"
                     role="group"
                   >
@@ -384,6 +386,7 @@ exports[`OE - Mega Menu renders correctly 1`] = `
                   <div
                     aria-labelledby="custom-trigger-mm-3"
                     class="bcl-mega-menu__submenu __level-2"
+                    hidden
                     id="mm-panel-custom-trigger-mm-3"
                     role="group"
                   >
diff --git a/src/compositions/bcl-mega-menu/mega-menu-submenu.html.twig b/src/compositions/bcl-mega-menu/mega-menu-submenu.html.twig
index e501ae4dc..f0336ebb4 100644
--- a/src/compositions/bcl-mega-menu/mega-menu-submenu.html.twig
+++ b/src/compositions/bcl-mega-menu/mega-menu-submenu.html.twig
@@ -44,7 +44,7 @@
 {% endif %}
 {% set submenu_attributes = create_attribute()
   .setAttribute('id', _panel_id)
-  .setAttribute('hidden', '')
+  .setAttribute('hidden', true)
   .setAttribute('role', 'group')
   .setAttribute('aria-labelledby', _trigger_id)
   .addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
diff --git a/src/compositions/bcl-news/__snapshots__/news.test.js.snap b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
index a4a8defd4..deb10fee8 100644
--- a/src/compositions/bcl-news/__snapshots__/news.test.js.snap
+++ b/src/compositions/bcl-news/__snapshots__/news.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - News full page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - News full page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1598,6 +1600,7 @@ exports[`OE - News listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -1695,6 +1698,7 @@ exports[`OE - News listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -2498,7 +2502,7 @@ exports[`OE - News listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <label
@@ -2677,7 +2681,7 @@ exports[`OE - News listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/compositions/bcl-page/__snapshots__/page.test.js.snap b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
index acfe8a5e7..7db6a4fe1 100644
--- a/src/compositions/bcl-page/__snapshots__/page.test.js.snap
+++ b/src/compositions/bcl-page/__snapshots__/page.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1393,7 +1395,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="#"
                     target="_blank"
                   >
@@ -1472,7 +1474,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                     >
                       <a
                         class="d-block standalone mt-1"
-                        download="download"
+                        download
                         href="#"
                         target="_blank"
                       >
@@ -1523,7 +1525,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                     >
                       <a
                         class="d-block standalone mt-1"
-                        download="download"
+                        download
                         href="#"
                         target="_blank"
                       >
@@ -1574,7 +1576,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                     >
                       <a
                         class="d-block standalone mt-1"
-                        download="download"
+                        download
                         href="#"
                         target="_blank"
                       >
@@ -1651,7 +1653,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="#"
                     target="_blank"
                   >
@@ -1730,7 +1732,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                     >
                       <a
                         class="d-block standalone mt-1"
-                        download="download"
+                        download
                         href="#"
                         target="_blank"
                       >
@@ -1781,7 +1783,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                     >
                       <a
                         class="d-block standalone mt-1"
-                        download="download"
+                        download
                         href="#"
                         target="_blank"
                       >
@@ -1832,7 +1834,7 @@ exports[`OE - Page Page renders correctly 1`] = `
                     >
                       <a
                         class="d-block standalone mt-1"
-                        download="download"
+                        download
                         href="#"
                         target="_blank"
                       >
diff --git a/src/compositions/bcl-person/__snapshots__/person.test.js.snap b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
index 7275ad909..a4999b928 100644
--- a/src/compositions/bcl-person/__snapshots__/person.test.js.snap
+++ b/src/compositions/bcl-person/__snapshots__/person.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Person details renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Person details renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1208,7 +1210,7 @@ exports[`OE - Person details renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="#"
                     target="_blank"
                   >
@@ -1274,7 +1276,7 @@ exports[`OE - Person details renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="#"
                     target="_blank"
                   >
@@ -1335,7 +1337,7 @@ exports[`OE - Person details renders correctly 1`] = `
                   </div>
                   <a
                     class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                    download="true"
+                    download
                     href="#"
                     target="_blank"
                   >
@@ -1729,6 +1731,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -1826,6 +1829,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -2629,7 +2633,7 @@ exports[`OE - Person listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -2733,7 +2737,7 @@ exports[`OE - Person listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
index a7b2ca50d..96090f288 100644
--- a/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
+++ b/src/compositions/bcl-procurement/__snapshots__/procurement.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1036,7 +1038,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
         >
           <button
             class="btn btn-primary btn-md"
-            disabled=""
+            disabled
             type="button"
           >
             <svg
@@ -1287,7 +1289,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -1366,7 +1368,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1417,7 +1419,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1468,7 +1470,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1549,7 +1551,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -1628,7 +1630,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1679,7 +1681,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1730,7 +1732,7 @@ exports[`OE - Procurement details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -2141,6 +2143,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2238,6 +2241,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3261,7 +3265,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -3340,7 +3344,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3391,7 +3395,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3442,7 +3446,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3523,7 +3527,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -3602,7 +3606,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3653,7 +3657,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3704,7 +3708,7 @@ exports[`OE - Procurement details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -4115,6 +4119,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -4212,6 +4217,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -5016,7 +5022,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <label
@@ -5068,7 +5074,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="closed"
                           type="checkbox"
@@ -5088,7 +5094,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="canceled"
                           type="checkbox"
@@ -5137,7 +5143,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       All
@@ -5291,7 +5297,7 @@ exports[`OE - Procurement listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/compositions/bcl-project/__snapshots__/project.test.js.snap b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
index d04149218..d88795b16 100644
--- a/src/compositions/bcl-project/__snapshots__/project.test.js.snap
+++ b/src/compositions/bcl-project/__snapshots__/project.test.js.snap
@@ -1992,6 +1992,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2089,6 +2090,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -2892,7 +2894,7 @@ exports[`OE - Project listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <label
@@ -2941,7 +2943,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       All
@@ -2966,7 +2968,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="ongoing"
                           type="checkbox"
@@ -2983,7 +2985,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                       class="form-check"
                     >
                       <input
-                        checked="checked"
+                        checked
                         class="form-check-input"
                         id="closed"
                         type="checkbox"
@@ -3031,7 +3033,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       0-100
@@ -3202,7 +3204,7 @@ exports[`OE - Project listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
@@ -4058,6 +4060,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -4155,6 +4158,7 @@ exports[`OE - Project page (closed) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -7382,6 +7386,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -7479,6 +7484,7 @@ exports[`OE - Project page (ongoing) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -10706,6 +10712,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -10803,6 +10810,7 @@ exports[`OE - Project page (planned) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
diff --git a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
index eb668bee1..f94c68c8e 100644
--- a/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
+++ b/src/compositions/bcl-publication/__snapshots__/publication.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1275,7 +1277,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -1354,7 +1356,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1405,7 +1407,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1456,7 +1458,7 @@ exports[`OE - Publication details (multiple authors) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1953,6 +1955,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2050,6 +2053,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3071,7 +3075,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -3150,7 +3154,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3201,7 +3205,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3252,7 +3256,7 @@ exports[`OE - Publication details renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3749,6 +3753,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -3846,6 +3851,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -4649,7 +4655,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <label
@@ -4682,7 +4688,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="type-1"
                           type="checkbox"
@@ -4702,7 +4708,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="type-2"
                           type="checkbox"
@@ -4722,7 +4728,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="type-3"
                           type="checkbox"
@@ -4739,7 +4745,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                       class="form-check"
                     >
                       <input
-                        checked="checked"
+                        checked
                         class="form-check-input"
                         id="type-4"
                         type="checkbox"
@@ -4895,7 +4901,7 @@ exports[`OE - Publication listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/compositions/bcl-search/__snapshots__/search.test.js.snap b/src/compositions/bcl-search/__snapshots__/search.test.js.snap
index 5a2d80819..edc99944f 100644
--- a/src/compositions/bcl-search/__snapshots__/search.test.js.snap
+++ b/src/compositions/bcl-search/__snapshots__/search.test.js.snap
@@ -696,7 +696,7 @@ exports[`OE - Search renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -733,7 +733,7 @@ exports[`OE - Search renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       the selected option
@@ -752,7 +752,7 @@ exports[`OE - Search renders correctly 1`] = `
                   <select
                     class="multi-select"
                     id="filter-select-a"
-                    multiple="multiple"
+                    multiple
                   >
                     <option
                       value="1"
@@ -775,7 +775,7 @@ exports[`OE - Search renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       the selected option
@@ -800,7 +800,7 @@ exports[`OE - Search renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="checked-input"
                           type="checkbox"
@@ -1002,7 +1002,7 @@ exports[`OE - Search renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
index 6cf215cd1..8d8556e38 100644
--- a/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
+++ b/src/compositions/bcl-subscription/__snapshots__/subscription.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1314,7 +1316,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                 >
                   <form
                     class="needs-validation"
-                    novalidate="novalidate"
+                    novalidate
                     onsubmit="return false;"
                   >
                     <fieldset>
@@ -1337,7 +1339,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                       <input
                         class="form-control"
                         placeholder="Type in your e-mail address"
-                        required="required"
+                        required
                         type="email"
                       />
                       <div
@@ -1358,12 +1360,12 @@ exports[`OE - Subscription renders correctly 1`] = `
                       <select
                         class="form-select"
                         id="language-select"
-                        required="required"
+                        required
                       >
                         <option
-                          disabled=""
-                          hidden=""
-                          selected=""
+                          disabled
+                          hidden
+                          selected
                           value=""
                         >
                           Please select a language
@@ -1404,7 +1406,7 @@ exports[`OE - Subscription renders correctly 1`] = `
                         <input
                           class="form-check-input"
                           id="exampleInputCheck1"
-                          required="required"
+                          required
                           type="checkbox"
                         />
                         <label
diff --git a/src/compositions/bcl-user/__snapshots__/user.test.js.snap b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
index d084524d8..d7728554a 100644
--- a/src/compositions/bcl-user/__snapshots__/user.test.js.snap
+++ b/src/compositions/bcl-user/__snapshots__/user.test.js.snap
@@ -208,6 +208,7 @@ exports[`OE - User list renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -305,6 +306,7 @@ exports[`OE - User list renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1108,7 +1110,7 @@ exports[`OE - User list renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -1264,7 +1266,7 @@ exports[`OE - User list renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
@@ -2075,6 +2077,7 @@ exports[`OE - User renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2172,6 +2175,7 @@ exports[`OE - User renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3302,7 +3306,7 @@ exports[`OE - User renders correctly 1`] = `
                 >
                   <form
                     class="row"
-                    novalidate="novalidate"
+                    novalidate
                     onsubmit="return false;"
                   >
                     <fieldset
@@ -3329,7 +3333,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="first-name"
-                          required="required"
+                          required
                           type="text"
                           value="Stefan"
                         />
@@ -3351,7 +3355,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="last-name"
-                          required="required"
+                          required
                           type="text"
                           value="Mayer"
                         />
@@ -3372,7 +3376,7 @@ exports[`OE - User renders correctly 1`] = `
                         <select
                           aria-label="gender-select"
                           class="form-select"
-                          required="required"
+                          required
                         >
                           <option
                             value="2"
@@ -3403,7 +3407,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="nationality-input"
-                          required="required"
+                          required
                           type="text"
                           value="German"
                         />
@@ -3425,7 +3429,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="birth-date"
-                          required="required"
+                          required
                           type="date"
                           value="1972-01-22"
                         />
@@ -3451,7 +3455,7 @@ exports[`OE - User renders correctly 1`] = `
                         <textarea
                           class="form-control"
                           id="bio-description"
-                          required="required"
+                          required
                           rows="4"
                         >
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -3474,7 +3478,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="country-input"
-                          required="required"
+                          required
                           type="text"
                           value="Germany"
                         />
@@ -3496,7 +3500,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="city-input"
-                          required="required"
+                          required
                           type="text"
                           value="Düsseldorf"
                         />
@@ -3531,7 +3535,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="organisation-input"
-                          required="required"
+                          required
                           type="text"
                           value="DG digit"
                         />
@@ -3553,7 +3557,7 @@ exports[`OE - User renders correctly 1`] = `
                         <input
                           class="form-control"
                           id="position-input"
-                          required="required"
+                          required
                           type="text"
                           value="Officer"
                         />
@@ -3576,8 +3580,8 @@ exports[`OE - User renders correctly 1`] = `
                       <select
                         class="multi-select"
                         id="multiselect-1"
-                        multiple="multiple"
-                        required="required"
+                        multiple
+                        required
                       >
                         <optgroup
                           label="Group 1"
@@ -3619,7 +3623,7 @@ exports[`OE - User renders correctly 1`] = `
                           last option
                         </option>
                         <option
-                          selected=""
+                          selected
                           value="9"
                         >
                           the selected option
@@ -3677,7 +3681,7 @@ exports[`OE - User renders correctly 1`] = `
                 Who can consult my data
               </p>
               <form
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -3689,7 +3693,7 @@ exports[`OE - User renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="administrators"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3709,7 +3713,7 @@ exports[`OE - User renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="any"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3727,10 +3731,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="authenticated"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3778,7 +3782,7 @@ exports[`OE - User renders correctly 1`] = `
               </p>
               <form
                 class="row"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -3788,10 +3792,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="picture"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3809,10 +3813,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="position"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3830,10 +3834,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="city"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3851,10 +3855,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="firstName"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3874,7 +3878,7 @@ exports[`OE - User renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="gender"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3894,7 +3898,7 @@ exports[`OE - User renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="nationality"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3912,10 +3916,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="lastName"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3935,7 +3939,7 @@ exports[`OE - User renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="workingLanguages"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3955,7 +3959,7 @@ exports[`OE - User renders correctly 1`] = `
                     <input
                       class="form-check-input"
                       id="dateOfBirth"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3973,10 +3977,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="organisation"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -3994,10 +3998,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="country"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -4015,10 +4019,10 @@ exports[`OE - User renders correctly 1`] = `
                     class="form-check"
                   >
                     <input
-                      checked="checked"
+                      checked
                       class="form-check-input"
                       id="bio"
-                      required="required"
+                      required
                       type="checkbox"
                     />
                     <label
@@ -4065,7 +4069,7 @@ exports[`OE - User renders correctly 1`] = `
                 When cancelling your account
               </p>
               <form
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <div
@@ -4078,7 +4082,7 @@ exports[`OE - User renders correctly 1`] = `
                       class="form-check-input"
                       id="keep"
                       name="cancel"
-                      required="required"
+                      required
                       type="radio"
                     />
                     <label
@@ -4099,7 +4103,7 @@ exports[`OE - User renders correctly 1`] = `
                       class="form-check-input"
                       id="delete"
                       name="cancel"
-                      required="required"
+                      required
                       type="radio"
                     />
                     <label
@@ -4506,6 +4510,7 @@ exports[`OE - User terms renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -4603,6 +4608,7 @@ exports[`OE - User terms renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -5381,7 +5387,7 @@ exports[`OE - User terms renders correctly 1`] = `
             </li>
           </ul>
           <form
-            novalidate="novalidate"
+            novalidate
             onsubmit="return false;"
           >
             <div
@@ -5393,7 +5399,7 @@ exports[`OE - User terms renders correctly 1`] = `
                 <input
                   class="form-check-input"
                   id="terms"
-                  required="required"
+                  required
                   type="checkbox"
                 />
                 <label
diff --git a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
index 9ce0edba7..69481cf2c 100644
--- a/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
+++ b/src/compositions/bcl-vacancy/__snapshots__/vacancy.test.js.snap
@@ -166,6 +166,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -263,6 +264,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -1034,7 +1036,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
         >
           <button
             class="btn btn-primary btn-md"
-            disabled=""
+            disabled
             type="button"
           >
             <svg
@@ -1271,7 +1273,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -1350,7 +1352,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1401,7 +1403,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1452,7 +1454,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1533,7 +1535,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -1612,7 +1614,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1663,7 +1665,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -1714,7 +1716,7 @@ exports[`OE - Vacancy details (closed) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -2446,6 +2448,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -2543,6 +2546,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -3550,7 +3554,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -3629,7 +3633,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3680,7 +3684,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3731,7 +3735,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3812,7 +3816,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                     </div>
                     <a
                       class="standalone align-self-center d-inline-block mt-1 mt-md-0 flex-shrink-0"
-                      download="true"
+                      download
                       href="#"
                       target="_blank"
                     >
@@ -3891,7 +3895,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3942,7 +3946,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -3993,7 +3997,7 @@ exports[`OE - Vacancy details (opened) renders correctly 1`] = `
                       >
                         <a
                           class="d-block standalone mt-1"
-                          download="download"
+                          download
                           href="#"
                           target="_blank"
                         >
@@ -4725,6 +4729,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-1"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-1"
                               role="group"
                             >
@@ -4822,6 +4827,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                             <div
                               aria-labelledby="custom-trigger-mm-2"
                               class="bcl-mega-menu__submenu __level-2"
+                              hidden
                               id="mm-panel-custom-trigger-mm-2"
                               role="group"
                             >
@@ -5625,7 +5631,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
             >
               <form
                 class="w-100"
-                novalidate="novalidate"
+                novalidate
                 onsubmit="return false;"
               >
                 <label
@@ -5658,7 +5664,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                         class="form-check"
                       >
                         <input
-                          checked="checked"
+                          checked
                           class="form-check-input"
                           id="opened"
                           type="checkbox"
@@ -5675,7 +5681,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                       class="form-check"
                     >
                       <input
-                        checked="checked"
+                        checked
                         class="form-check-input"
                         id="closed"
                         type="checkbox"
@@ -5723,7 +5729,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                       last option
                     </option>
                     <option
-                      selected=""
+                      selected
                       value=""
                     >
                       All
@@ -5860,7 +5866,7 @@ exports[`OE - Vacancy listing renders correctly 1`] = `
                     last option
                   </option>
                   <option
-                    selected=""
+                    selected
                     value=""
                   >
                     A-Z
diff --git a/src/themes/default/storybook/.storybook/environment.js b/src/themes/default/storybook/.storybook/environment.js
index f994bee4e..d3a84e502 100644
--- a/src/themes/default/storybook/.storybook/environment.js
+++ b/src/themes/default/storybook/.storybook/environment.js
@@ -6,7 +6,17 @@ const {
   createFilesystemLoader,
   createFunction,
 } = require("twing");
-const { DrupalAttribute } = require("drupal-attribute");
+const storybookAttributePath = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "..",
+  "..",
+  "..",
+  ".storybook",
+  "drupal-attribute",
+);
+const { StorybookDrupalAttribute } = require(storybookAttributePath);
 
 const componentsPath = path.resolve(__dirname, "../../../components");
 const compositionsPath = path.resolve(__dirname, "../../../compositions");
@@ -26,7 +36,7 @@ try {
 
   const createAttribute = createFunction(
     "create_attribute",
-    () => Promise.resolve(new DrupalAttribute()),
+    () => Promise.resolve(new StorybookDrupalAttribute()),
     [],
   );
 
diff --git a/tools/test-utils/index.js b/tools/test-utils/index.js
index 71860449f..51f29d68f 100644
--- a/tools/test-utils/index.js
+++ b/tools/test-utils/index.js
@@ -1,22 +1,192 @@
+const path = require("path");
+const prettyFormat = require("pretty-format");
+const { DrupalAttribute: BaseDrupalAttribute } = require("drupal-attribute");
 const twing = require("../../.storybook/environment");
-const { DrupalAttribute } = require("drupal-attribute");
+const { StorybookDrupalAttribute } = require(
+  path.resolve(__dirname, "../../.storybook/drupal-attribute"),
+);
+
+const { DOMElement, DOMCollection } = prettyFormat.plugins;
+
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+const isPlainObject = (value) =>
+  Object.prototype.toString.call(value) === "[object Object]";
+
+function cloneValue(value) {
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  if (value instanceof StorybookDrupalAttribute) {
+    return value;
+  }
+
+  if (value instanceof BaseDrupalAttribute) {
+    const converted = new StorybookDrupalAttribute();
+
+    for (const [key, attributeValue] of value.entries()) {
+      converted.set(key, cloneValue(attributeValue));
+    }
+
+    return converted;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => cloneValue(item));
+  }
+
+  if (isPlainObject(value)) {
+    return Object.entries(value).reduce((accumulator, [key, item]) => {
+      accumulator[key] = cloneValue(item);
+      return accumulator;
+    }, {});
+  }
+
+  return value;
+}
+
+function normalizeOptions(options) {
+  if (options === null || options === undefined) {
+    return options;
+  }
+
+  return cloneValue(options);
+}
+
+// Track attributes rendered without explicit values so snapshots can mirror
+// Drupal's boolean attribute output.
+const getValuelessAttributeCounts = (markup) => {
+  const counts = new Map();
+  const tagRegex = /<([A-Za-z][^\s/>]*)([^>]*)>/g;
+
+  let tagMatch;
+  while ((tagMatch = tagRegex.exec(markup)) !== null) {
+    const attributesChunk = tagMatch[2];
+
+    if (!attributesChunk) {
+      continue;
+    }
+
+    const attributeRegex =
+      /([^\s=\/>]+)(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+))?/g;
+
+    let attributeMatch;
+    while ((attributeMatch = attributeRegex.exec(attributesChunk)) !== null) {
+      const [fullAttribute, attributeName] = attributeMatch;
+
+      if (!attributeName) {
+        continue;
+      }
+
+      const hasAssignment = fullAttribute.includes("=");
+      if (!hasAssignment) {
+        counts.set(attributeName, (counts.get(attributeName) ?? 0) + 1);
+      }
+    }
+  }
+
+  return counts;
+};
+
+// Re-apply valueless attributes within the pretty-printed DOM snapshot string.
+const applyValuelessAttributes = (snapshot, counts) => {
+  if (!counts || counts.size === 0) {
+    return snapshot;
+  }
+
+  let result = snapshot;
+
+  for (const [attributeName, occurrences] of counts.entries()) {
+    if (!occurrences) {
+      continue;
+    }
+
+    const escapedName = escapeRegExp(attributeName);
+    const pattern = new RegExp(`${escapedName}=""`, "g");
+    let remaining = occurrences;
+
+    result = result.replace(pattern, (match) => {
+      if (remaining > 0) {
+        remaining -= 1;
+        return attributeName;
+      }
+      return match;
+    });
+  }
+
+  return result;
+};
+
+// Remove escape sequences inside attribute values so JSON-like payloads render
+// with plain double quotes, matching the Twig templates.
+const normalizeAttributeQuotes = (snapshot) =>
+  snapshot.replace(
+    /([^\s=]+)="((?:[^"\\]|\\.)*)"/g,
+    (fullMatch, name, value) => {
+      if (!value.includes('\\"')) {
+        return fullMatch;
+      }
+
+      const unescaped = value.replace(/\\"/g, '"');
+
+      return `${name}="${unescaped}"`;
+    },
+  );
+
+if (
+  typeof expect !== "undefined" &&
+  typeof expect.addSnapshotSerializer === "function"
+) {
+  expect.addSnapshotSerializer({
+    test(val) {
+      return Boolean(val && val.__storybookDrupalHtml);
+    },
+    print(val) {
+      return val.__storybookDrupalHtml;
+    },
+  });
+}
 
 const renderTwigFileAsNode = async (file, options = {}, reset) => {
-  const localOptions = { ...options };
+  let baseOptions = options;
 
   if (reset) {
-    localOptions.attributes = new DrupalAttribute();
+    baseOptions = {
+      ...(isPlainObject(options) ? options : {}),
+      attributes: new StorybookDrupalAttribute(),
+    };
+  } else if (isPlainObject(options)) {
+    baseOptions = { ...options };
   }
 
-  const html = await twing.render(file, localOptions);
+  const renderOptions = normalizeOptions(baseOptions);
+
+  const html = await twing.render(file, renderOptions);
+  const markup = html.trim();
+  const valuelessCounts = getValuelessAttributeCounts(markup);
+
   const jest = document.createElement("jest");
-  jest.innerHTML = html.trim();
+  jest.innerHTML = markup;
+
+  const prettySnapshot = prettyFormat.format(jest, {
+    plugins: [DOMElement, DOMCollection],
+  });
+  const snapshotHtml = normalizeAttributeQuotes(
+    applyValuelessAttributes(prettySnapshot, valuelessCounts),
+  );
+
+  Object.defineProperty(jest, "__storybookDrupalHtml", {
+    value: snapshotHtml,
+    configurable: true,
+  });
 
   return jest;
 };
 
 const renderTwigFileAsHtml = async (file, options = {}, main) => {
-  const html = await twing.render(file, options);
+  const renderOptions = normalizeOptions(options);
+  const html = await twing.render(file, renderOptions);
 
   if (!main) {
     return html;
@@ -53,4 +223,5 @@ module.exports = {
   renderTwigFileAsNode,
   renderTwigFileAsHtml,
   getVariants,
+  DrupalAttribute: StorybookDrupalAttribute,
 };
diff --git a/tools/webpack/twig-wrapper-loader.cjs b/tools/webpack/twig-wrapper-loader.cjs
index 19dc27c0f..68cefcbaf 100644
--- a/tools/webpack/twig-wrapper-loader.cjs
+++ b/tools/webpack/twig-wrapper-loader.cjs
@@ -1,12 +1,45 @@
+/**
+ * Webpack loader that patches Twing's compiled templates so Storybook can lazy
+ * load them, share a single environment instance, and expose a Promise-based
+ * `render` helper compatible with the CLI tooling.
+ */
 module.exports = function twigWrapperLoader(source) {
   const options = this.getOptions() || {};
   const environmentModulePath = (options.environmentModulePath || "").replace(/\\/g, "/");
 
   let code = source;
 
+  // Allow template map entries to be either compiled templates or factories and
+  // resolve them lazily while keeping Drupal's base loader fallback.
+  code = code.replace(
+    /templates\.set\((['"][^'"]+['"]), (template\d+)\);/g,
+    "templates.set($1, () => $2);",
+  );
+
+  code = code.replace(
+    /template\.loadTemplate = \(executionContext, identifier\) => {\s*return templates.has\(identifier\) \? Promise\.resolve\(templates\.get\(identifier\)\) : baseLoadTemplate\(executionContext, identifier\);\s*};/,
+    `template.loadTemplate = (executionContext, identifier) => {
+  if (!templates.has(identifier)) {
+    return baseLoadTemplate(executionContext, identifier);
+  }
+
+  const candidate = templates.get(identifier);
+  const resolved = typeof candidate === 'function' ? candidate() : candidate;
+
+  if (!resolved) {
+    return baseLoadTemplate(executionContext, identifier);
+  }
+
+  return Promise.resolve(resolved);
+};`,
+  );
+
+  // Ensure each compiled template imports the shared Storybook environment.
   code = `import environment from '${environmentModulePath}';\n${code}`;
 
   if (code.includes("export default template;")) {
+    // Replace the default export so consumers call a Promise-returning render
+    // helper, while still exposing the original compiled template if needed.
     code = code.replace(
       /export default template;\s*$/,
       `const compiledTemplate = template;
diff --git a/yarn.lock b/yarn.lock
index 6d385006a..9bb05ef50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3961,6 +3961,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@openeuropa/bcl-attributes@workspace:src/compositions/bcl-attributes":
+  version: 0.0.0-use.local
+  resolution: "@openeuropa/bcl-attributes@workspace:src/compositions/bcl-attributes"
+  languageName: unknown
+  linkType: soft
+
 "@openeuropa/bcl-badge@npm:^1.10.8, @openeuropa/bcl-badge@workspace:src/components/bcl-badge":
   version: 0.0.0-use.local
   resolution: "@openeuropa/bcl-badge@workspace:src/components/bcl-badge"