Merge pull request #444 from openeuropa/OEL-3421

OEL-3421: Prerelease bcl.

.drone.yml

@@ -23,6 +23,12 @@ services:
     environment:
       - MYSQL_ALLOW_EMPTY_PASSWORD=yes
       - MYSQL_DATABASE=drupal
+  selenium:
+    image: git.fpfis.tech.ec.europa.eu/fpfis/dependency_proxy/containers/selenium/standalone-chrome:4.1.3-20220405
+    environment:
+      - DISPLAY=:99
+      - NODE_MAX_INSTANCES=5
+      - NODE_MAX_SESSION=5
 
 pipeline:
   npm-build:

docker-compose.yml

@@ -23,6 +23,16 @@ services:
       MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
     # ports:
     #   - 3306:3306
+  selenium:
+    image: selenium/standalone-chrome:4.1.3
+    environment:
+      - DISPLAY=:99
+      - VNC_NO_PASSWORD=1
+    ports:
+      - '5900:5900'
+    expose:
+      - '4444'
+    shm_size: 2g
   node:
     image: node:18.12.0
     user: "node"

oe_bootstrap_theme.libraries.yml

@@ -1,6 +1,7 @@
 bcl:
   js:
     assets/js/oe-bcl-default.bundle.min.js: {}
+    resources/js/accessible_toggle.js: {}
   css:
     theme:
       assets/css/oe-bcl-default.min.css: {}

package.json

@@ -15,8 +15,8 @@
     "production": "npm-run-all build:*"
   },
   "devDependencies": {
-    "@openeuropa/bcl-builder": "1.6.0",
-    "@openeuropa/bcl-theme-default": "1.6.0",
+    "@openeuropa/bcl-builder": "0.1.202411051450",
+    "@openeuropa/bcl-theme-default": "0.1.202411051450",
     "bootstrap-ie11": "5.0.2",
     "chokidar-cli": "^3.0.0",
     "copyfiles": "2.4.1",

phpunit.xml.dist

@@ -6,6 +6,8 @@
     <env name="SIMPLETEST_IGNORE_DIRECTORIES" value="vendor,node_modules,${drupal.root}"/>
     <env name="SIMPLETEST_BASE_URL" value="${drupal.base_url}"/>
     <env name="SIMPLETEST_DB" value="mysql://${drupal.database.user}:${drupal.database.password}@${drupal.database.host}:${drupal.database.port}/${drupal.database.name}"/>
+    <!-- @todo When dropping support for 10.2.x, rename "chromeOptions" to "goog:chromeOptions". -->
+    <env name="MINK_DRIVER_ARGS_WEBDRIVER" value='["${selenium.browser}", {"browserName":"chrome","chromeOptions":{"w3c": false, "args":["--no-sandbox", "--start-maximized", "--disable-gpu", "--window-size=1280,800", "--disable-dev-shm-usage", "--DNS-prefetch-disable", "--disable-translate", "--ignore-certificate-errors", "--test-type", "--disable-extensions", "--incognito", "--disable-infobars"]}}, "${selenium.host}:${selenium.port}/wd/hub"]'/>
   </php>
   <testsuites>
     <testsuite name="OpenEuropa Bootstrap Theme">

resources/js/accessible_toggle.js

@@ -0,0 +1,25 @@
+/**
+ * @file
+ * Attaches behaviors for accessible Bootstrap components.
+ */
+(function (bootstrap, Drupal) {
+
+  /**
+   * Attaches the accessible toggle behavior to Bootstrap components.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Initializes AccessibleToggle for specified Bootstrap components.
+   */
+  Drupal.behaviors.accessibleToggle = {
+    attach: function (context, settings) {
+      bootstrap.AccessibleToggle.init([
+        { selector: '[data-bs-toggle="modal"]', type: 'modal' },
+        { selector: '[data-bs-toggle="offcanvas"]', type: 'offcanvas' }
+        // Additional components like collapse can be added here in the future.
+      ]);
+    }
+  };
+
+})(bootstrap, Drupal);

runner.yml.dist

@@ -30,6 +30,11 @@ drupal:
         - "vendor"
         - "${drupal.root}"
 
+selenium:
+  host: "http://selenium"
+  port: "4444"
+  browser: "chrome"
+
 commands:
   drupal:site-setup:
     - { task: "run", command: "drupal:symlink-project" }

tests/src/FunctionalJavascript/AccessibleToggleTest.php

@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Tests\oe_bootstrap_theme\FunctionalJavascript;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the AccessibleToggle behavior for modal and offcanvas.
+ */
+class AccessibleToggleTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'oe_bootstrap_theme';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'oe_bootstrap_theme_helper',
+    'system',
+    'ui_patterns',
+    'ui_patterns_library',
+    'ui_patterns_settings',
+  ];
+
+  /**
+   * Tests the ARIA attributes for modal and offcanvas triggers.
+   */
+  public function testAccessibleToggleAttributes(): void {
+    $this->drupalLogin($this->drupalCreateUser([], NULL, TRUE));
+    $this->drupalGet('/admin/appearance/ui/patterns');
+
+    $modalTrigger = $this->getSession()->getPage()->find('css', '[data-bs-toggle="modal"]');
+    $offcanvasTrigger = $this->getSession()->getPage()->find('css', '[data-bs-toggle="offcanvas"]');
+
+    $this->assertAccessibleAttributes($modalTrigger, expanded: FALSE);
+    $this->assertAccessibleAttributes($offcanvasTrigger, expanded: FALSE);
+
+    $modalTrigger->click();
+    $this->assertAccessibleAttributes($modalTrigger, expanded: TRUE);
+    $this->assertAccessibleAttributes($offcanvasTrigger, expanded: FALSE);
+
+    $this->getSession()->getPage()->find('css', '.modal .btn-close')->click();
+    $this->assertAccessibleAttributes($modalTrigger, expanded: FALSE);
+    $this->assertAccessibleAttributes($offcanvasTrigger, expanded: FALSE);
+
+    $offcanvasTrigger->click();
+    $this->assertAccessibleAttributes($modalTrigger, expanded: FALSE);
+    $this->assertAccessibleAttributes($offcanvasTrigger, expanded: TRUE);
+
+    // Close offcanvas and check attribute updates.
+    $this->getSession()->getPage()->find('css', '.offcanvas-backdrop')->click();
+    $this->assertAccessibleAttributes($modalTrigger, expanded: FALSE);
+    $this->assertAccessibleAttributes($offcanvasTrigger, expanded: FALSE);
+  }
+
+  /**
+   * Asserts the initial ARIA attributes for the triggers.
+   *
+   * @param \Behat\Mink\Element\NodeElement|null $trigger
+   *   The trigger element.
+   * @param bool $expanded
+   *   The expected state of aria-expanded attribute.
+   */
+  protected function assertAccessibleAttributes(?NodeElement $trigger, bool $expanded): void {
+    $this->assertNotNull($trigger);
+    $this->assertEquals('true', $trigger->getAttribute('aria-haspopup'));
+    $this->assertEquals($expanded ? 'true' : 'false', $trigger->getAttribute('aria-expanded'));
+  }
+
+}