Unverified Commit 5698e6fb authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3212975 by marcoscano, mherchel, thejimbirch, Gauravmahlawat, geekygnr,... 

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

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

+7 −1
Original line number Diff line number Diff line
@@ -118,7 +118,13 @@ protected function assertCurrentMessages(array $expected_messages, $messagesSele 
        $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 → 100644
+62 −0
Original line number Diff line number Diff line 
<?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

+8 −3
Original line number Diff line number Diff line
@@ -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

+4 −3
Original line number Diff line number Diff line
@@ -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);
 
 No newline at end of file

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

+7 −2
Original line number Diff line number Diff line
@@ -31,8 +31,13 @@ 
    ]

    %}



    <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>

      <div class="messages__container"{% if type == 'error' %} role="alert"{% endif %}>

    <div{{ attributes

      .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>