Issue #3212975 by marcoscano, mherchel, thejimbirch, Gauravmahlawat, geekygnr, andy-blum, lauriii, larowlan: Olivero: Normalize JavaScript selectors in messages.es6.js

core/tests/Drupal/FunctionalJavascriptTests/Core/JsMessageTest.php

@@ -118,7 +118,13 @@ class JsMessageTest extends WebDriverTestBase {
         $current_messages[] = $message_div->getText();
       }
     }
-    $this->assertEquals($expected_messages, $current_messages);
+    // Check that each message text contains the expected text.
+    if (count($expected_messages) !== count($current_messages)) {
+      $this->fail('The expected messages array contains a different number of values than the current messages array.');
+    }
+    for ($i = 0; $i < count($expected_messages); $i++) {
+      $this->assertStringContainsString($expected_messages[$i], $current_messages[$i]);
+    }
   }
 
 }

core/tests/Drupal/FunctionalJavascriptTests/Theme/OliveroMessagesTest.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\FunctionalJavascriptTests\Core\JsMessageTest;
+use Drupal\js_message_test\Controller\JSMessageTestController;
+
+/**
+ * Runs OliveroMessagesTest in Olivero.
+ *
+ * @group olivero
+ *
+ * @see \Drupal\FunctionalJavascriptTests\Core\JsMessageTest.
+ */
+class OliveroMessagesTest extends JsMessageTest {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'js_message_test',
+    'system',
+    'block',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    // Enable the theme.
+    \Drupal::service('theme_installer')->install(['olivero']);
+    $theme_config = \Drupal::configFactory()->getEditable('system.theme');
+    $theme_config->set('default', 'olivero');
+    $theme_config->save();
+  }
+
+  /**
+   * Tests data-drupal-selector="messages" exists.
+   */
+  public function testDataDrupalSelectors() {
+    $web_assert = $this->assertSession();
+    $this->drupalGet('js_message_test_link');
+
+    foreach (JSMessageTestController::getMessagesSelectors() as $messagesSelector) {
+      $web_assert->elementExists('css', $messagesSelector);
+      foreach (JSMessageTestController::getTypes() as $type) {
+        $this->click('[id="add-' . $messagesSelector . '-' . $type . '"]');
+        $selector = '[data-drupal-selector="messages"]';
+        $msg_element = $web_assert->waitForElementVisible('css', $selector);
+        $this->assertNotEmpty($msg_element, "Message element visible: $selector");
+      }
+    }
+  }
+
+}

core/themes/olivero/js/messages.es6.js

@@ -11,7 +11,9 @@
    *   The message object.
    */
   const closeMessage = (message) => {
-    const messageContainer = message.querySelector('.messages__container');
+    const messageContainer = message.querySelector(
+      '[data-drupal-selector="messages-container"]',
+    );
 
     const closeBtnWrapper = document.createElement('div');
     closeBtnWrapper.setAttribute('class', 'messages__button');
@@ -58,6 +60,7 @@
       'class',
       `messages-list__item messages messages--${type}`,
     );
+    messageWrapper.setAttribute('data-drupal-selector', 'messages');
     messageWrapper.setAttribute(
       'role',
       type === 'error' || type === 'warning' ? 'alert' : 'status',
@@ -91,7 +94,7 @@
     }
 
     messageWrapper.innerHTML = `
-    <div class="messages__container">
+    <div class="messages__container" data-drupal-selector="messages-container">
       <div class="messages__header${!svg ? ' no-icon' : ''}">
         <h2 class="visually-hidden">${messagesTypes[type]}</h2>
         ${svg}
@@ -117,7 +120,9 @@
    */
   Drupal.behaviors.messages = {
     attach(context) {
-      once('olivero-messages', '.messages', context).forEach(closeMessage);
+      once('messages', '[data-drupal-selector="messages"]', context).forEach(
+        closeMessage,
+      );
     },
   };
 })(Drupal, once);

core/themes/olivero/js/messages.js

@@ -7,7 +7,7 @@
 
 (function (Drupal, once) {
   var closeMessage = function closeMessage(message) {
-    var messageContainer = message.querySelector('.messages__container');
+    var messageContainer = message.querySelector('[data-drupal-selector="messages-container"]');
     var closeBtnWrapper = document.createElement('div');
     closeBtnWrapper.setAttribute('class', 'messages__button');
     var closeBtn = document.createElement('button');
@@ -31,6 +31,7 @@
     var messagesTypes = Drupal.Message.getMessageTypeLabels();
     var messageWrapper = document.createElement('div');
     messageWrapper.setAttribute('class', "messages-list__item messages messages--".concat(type));
+    messageWrapper.setAttribute('data-drupal-selector', 'messages');
     messageWrapper.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
     messageWrapper.setAttribute('aria-labelledby', "".concat(id, "-title"));
     messageWrapper.setAttribute('data-drupal-message-id', id);
@@ -55,14 +56,14 @@
       svg += '</svg></div>';
     }
 
-    messageWrapper.innerHTML = "\n    <div class=\"messages__container\">\n      <div class=\"messages__header".concat(!svg ? ' no-icon' : '', "\">\n        <h2 class=\"visually-hidden\">").concat(messagesTypes[type], "</h2>\n        ").concat(svg, "\n      </div>\n      <div class=\"messages__content\">\n        ").concat(text, "\n      </div>\n    </div>\n    ");
+    messageWrapper.innerHTML = "\n    <div class=\"messages__container\" data-drupal-selector=\"messages-container\">\n      <div class=\"messages__header".concat(!svg ? ' no-icon' : '', "\">\n        <h2 class=\"visually-hidden\">").concat(messagesTypes[type], "</h2>\n        ").concat(svg, "\n      </div>\n      <div class=\"messages__content\">\n        ").concat(text, "\n      </div>\n    </div>\n    ");
     closeMessage(messageWrapper);
     return messageWrapper;
   };
 
   Drupal.behaviors.messages = {
     attach: function attach(context) {
-      once('olivero-messages', '.messages', context).forEach(closeMessage);
+      once('messages', '[data-drupal-selector="messages"]', context).forEach(closeMessage);
     }
   };
 })(Drupal, once);

core/themes/olivero/templates/misc/status-messages.html.twig

@@ -31,8 +31,13 @@
     ]
     %}
 
-    <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
+    <div{{ attributes
-      <div class="messages__container"{% if type == 'error' %} role="alert"{% endif %}>
+      .addClass(classes)
+      .setAttribute('data-drupal-selector', 'messages')
+      .setAttribute('role', 'contentinfo')
+      .setAttribute('aria-label', status_headings[type])
+      }}>
+      <div class="messages__container" data-drupal-selector="messages-container"{% if type == 'error' %} role="alert"{% endif %}>
         {% if status_headings[type] %}
           <div class="messages__header">
            <h2 class="visually-hidden">{{ status_headings[type] }}</h2>