@openeuropa/bcl-theme-default 1.5.0 → 1.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,9 +22,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.5.0",
-    "@openeuropa/bcl-builder": "^1.5.0",
-    "@openeuropa/bcl-twig-templates": "^1.5.0",
+    "@openeuropa/bcl-bootstrap": "^1.7.0",
+    "@openeuropa/bcl-builder": "^1.7.0",
+    "@openeuropa/bcl-twig-templates": "^1.7.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "flag-icons": "6.9.2",
@@ -49,5 +49,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "7707e40523c6a3d4c719c80388f2df50fa6b7896"
+  "gitHead": "04c6da17515cbe8b0c1f3daaf32b3024e3582332"
 }

package/src/js/accessible-toggle/accessible-toggle.js

@@ -0,0 +1,58 @@
+import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+
+/**
+ * AccessibleToggle enhances Bootstrap Modal and Offcanvas components by:
+ * - Adding ARIA attributes for improved accessibility.
+ * - Updating `aria-expanded` on trigger elements based on visibility.
+ * Automatically initializes all modal and offcanvas triggers on the page.
+ */
+class AccessibleToggle {
+  constructor(triggerElement, type) {
+    this.triggerElement = triggerElement;
+    this.type = type;
+
+    const target = triggerElement.getAttribute("data-bs-target") || triggerElement.getAttribute("href");
+    this.targetElement = SelectorEngine.findOne(target);
+
+    if (this.type === "modal") {
+      this.instance = Modal.getOrCreateInstance(this.targetElement);
+    } else if (this.type === "offcanvas") {
+      this.instance = Offcanvas.getOrCreateInstance(this.targetElement);
+    }
+
+    this.addAriaAttributes();
+    this.addEventListeners();
+  }
+
+  addAriaAttributes() {
+    if (this.triggerElement) {
+      this.triggerElement.setAttribute("aria-haspopup", "true");
+      this.triggerElement.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  addEventListeners() {
+    const showEvent = this.type === "modal" ? "show.bs.modal" : "show.bs.offcanvas";
+    const hideEvent = this.type === "modal" ? "hide.bs.modal" : "hide.bs.offcanvas";
+
+    EventHandler.on(this.targetElement, showEvent, () => {
+      this.triggerElement.setAttribute("aria-expanded", "true");
+    });
+
+    EventHandler.on(this.targetElement, hideEvent, () => {
+      this.triggerElement.setAttribute("aria-expanded", "false");
+    });
+  }
+
+  static init(toggles) {
+    toggles.forEach(toggle => {
+      const triggerElements = SelectorEngine.find(toggle.selector);
+      triggerElements.forEach(triggerElement => new AccessibleToggle(triggerElement, toggle.type));
+    });
+  }
+}
+
+export default AccessibleToggle;

package/src/js/index.esm.js

@@ -12,6 +12,7 @@ import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -28,6 +29,7 @@ export {
   Dropdown,
   Gallery,
   Modal,
+  AccessibleToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

package/src/js/index.umd.js

@@ -12,6 +12,7 @@ import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -28,6 +29,7 @@ export default {
   Dropdown,
   Gallery,
   Modal,
+  AccessibleToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

package/src/scss/_blockquote.scss

@@ -0,0 +1,4 @@
+//Blockquote
+.blockquote-footer {
+  color: $text-muted;
+}

package/src/scss/_header.scss

@@ -270,6 +270,10 @@ $header-link-active-background: #003776 !default;
   .btn-close {
     opacity: 1;
   }
+  .modal-title {
+    @extend %heading;
+    @include font-size($h5-font-size);
+  }
   &.bcl-language-list-modal--ec,
   &.bcl-language-list-modal--eu {
     .modal-body {
@@ -288,7 +292,7 @@ $header-link-active-background: #003776 !default;
     .modal-dialog {
       background: $white;
     }
-    h5 {
+    .modal-title {
       color: $eu-cta-color;
     }
     svg {
@@ -303,7 +307,7 @@ $header-link-active-background: #003776 !default;
     .modal-content {
       background: $eu-background-color;
     }
-    h5 {
+    .modal-title {
       color: $white;
     }
     svg {

package/src/scss/_multiselect.scss

@@ -94,6 +94,11 @@ select.multi-select {
       margin-top: 0;
       align-self: center;
     }
+    .ss-values {
+      .ss-disabled {
+        color: #6c757d;
+      }
+    }
   }
 }
 

package/src/scss/oe-bcl-default.scss

@@ -59,6 +59,7 @@
 // Custom styles
 @import "@openeuropa/bcl-theme-default/src/scss/alert";
 @import "@openeuropa/bcl-theme-default/src/scss/button";
+@import "@openeuropa/bcl-theme-default/src/scss/blockquote";
 @import "@openeuropa/bcl-theme-default/src/scss/card";
 @import "@openeuropa/bcl-theme-default/src/scss/collapse";
 @import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";

package/templates/bcl-language-list/language-list-modal.html.twig

@@ -26,7 +26,7 @@
     <div class="d-flex justify-content-between align-items-center">
   {% endif %}
   <div class="d-flex align-items-center">
-    {% set _title_classes = 'mb-0' %}
+    {% set _title_classes = 'modal-title mb-0' %}
     {% if _icon_path is not empty %}
       {% set _title_classes = _title_classes ~ ' ms-2' %}
       {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
@@ -34,7 +34,7 @@
         path: _icon_path
       } only %}
     {% endif %}
-    <h5 class="{{ _title_classes }}">{{ _title }}</h5>
+    <div class="{{ _title_classes }}">{{ _title }}</div>
   </div>
   <button type="button" class="btn-close" data-bs-dismiss="modal"
     {% if _close_label is not empty %}