Olivero: Messages can be malformed when JS creates messages and PHP messages already exist

Problem/Motivation

Split off from #3212975: Olivero: Normalize JavaScript selectors in messages.es6.js →

I'm noticing something a bit strange regarding the messages.

Everything works fine when messages are added in from PHP or from JS via Drupal.Message, but JS messages added in when PHP messages are already present are not properly placed. Screenshots are attached. All messages close as expected, and "nested" messages close when their parent is closed.

Steps to reproduce

1. Make sure Olivero is the default frontend theme.

2. Apply patch to latest 9.4.x. Note there are 2 patches (one for D9 and one for D10).

3. Add status/warning/error messages via PHP. In olivero.theme's preprocess_html function:

$messenger = Drupal::messenger();
$messenger->addStatus('PHP Status message');
$messenger->addWarning('PHP Warning message');
$messenger->addError('PHP Error message');

4. Confirm messages display & close properly.

5. Add the core drupal.message library to Olivero's olivero.info.yml libraries

libraries:
  - olivero/global-styling
  - core/drupal.message

6. Clear the cache.

7. Refresh page and add messages via javascript in the console:

const messenger = new Drupal.Message;
messenger.add('js status message', {type: 'status'});
messenger.add('js error message', {type: 'error'});

8. Confirm all messages are displayed & close properly.

Proposed resolution

Update the code to handle messages coming from both PHP and JavaScript at the same time.

Remaining tasks

3. Test patch
4. Commit

User interface changes

API changes

Data model changes

Release notes snippet