Thank you
Did you know you can use utility classes to apply margin bottom?
e.g. mb-4 = margin-bottom: 15px;
So in this particular case you can also override the template.
In fact I believe there is already a theme suggestion override in the theme. So in this case you could create container__comment_comment_node_article_form__subject_wrapper.html.twig in your theme.
I agree the layout should be spaced, out. How that is done is the question? What I am not in favour off is creating lots of specific styling tweaks that someone will likely need to override in their own theme implementation.
If we can come up of way that handles this more generically that I would be more inclined to go with that solution.
Really this comes down to what the issue is. Unfortunately that has not been clearly defined here and there is no description of what the actual issue is.
Also where do you get 15px from? Is this just an arbitrary value that works for you?
Screen shot of search input with default theme (search api)
Before applying changes, we need ro clearly define what the change is.
There is literally no description here!
Please see comments https://www.drupal.org/project/bootstrap_sass_starter_kit/issues/3495605 🐛 On User Register page Fields have spacing issue. Active
Thanks for this.
I think the challenge here is knowing how to style the footer.
A little background
I believe the styling from the footer is taken from Bootswatch themes where no such thing really exists see screenshot.
Even if we look at getbootstrap site, the footer is not defined as a component afaict. However we do have site specific styles there that does seem to utilise the in built grid system (See screenshot). This is usually implemented using container, row and col classes. No need to re invent the wheel here. Better to use the predefined breakpoints etc.
Personally I do not really use a footer on my sites, however I am not averse to implementing some improvements to allow a user to implement a different type of footer and how it behaves. For some ideas for the sort of variations there are some more examples here:
https://mdbootstrap.com/docs/standard/navigation/footer/examples-and-cus...
Any variations should be designed to be responsive etc.
Ok looking at the footer I can see we currently have support for 5 footer regions.
This is output like so:
{% block footer %}
<div class="{{ container }}">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
<div class="site-footer__top clearfix">
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_third }}
{{ page.footer_fourth }}
</div>
{% endif %}
{% if page.footer_fifth %}
<div class="site-footer__bottom">
{{ page.footer_fifth }}
</div>
{% endif %}
</div>
{% endblock %}
This shows that footer_fifth appears to be handled slightly differently, i.e. it has a different container class site-footer__top
vs site-footer__bottom
So I am thinking it might be possible to add a variation for the footer from the default, (current). This might be useful should anyone want to implement a different variation in the future. So perhaps the option to change how a footer behaves.
In other words may be an option form the style admin page to change how a footer behaves.
Certainly if there is no footer or perhaps a simple footer, this is probably not relevant.
For others who want to display a single or even multiple menu items I agree these should first stack (one column mobile) and then respond to larger viewports (unlike get bootstrap that shows 2 columns on mobile!). IIRC this should also respond depending on how many menus or columns are shown. Certainly the example you have shown should be fairly easy to implement as all columns are equal width at least on larger viewports.
Thinking about this I am not really sure why we need 5 footers as it is also possible and arrange 4 or 5 blocks in one or more regions. Maybe it would be better to simplify this and instead have types of footer?
Do you see any issue with removing footers page.footer_second, page.footer_third and page.footer_fourth ?
Anyway, now I have started to look at the footer I can see that it may be possible to:
1. simplify the existing implementation.
2. Add support for variations. This could be done either at a config level (select type of footer from admin) or even from a region level (choose the footer type or region you want to use by placing a block).
Firstly, thanks for raising this issue and your commits and screenshots.
Please see attached further Screenshot's of existing user registration forms here using pre-compiled theme "bootstrap _sass_starter_kit"
Here are a few of my observations:
- Looking here https://git.drupalcode.org/project/bootstrap_sass_starter_kit/-/blob/1.0... -
.user-register-form
does not exist in component/form.scss ? - Does this change modify every form element (as per your screen shot) or simply add margin-top to the user-register-form class wrapper?
- form.scss needs to be renamed to _form.scss to be consistent, and to show this file has been reviewed
- Your description here does not really describe the issue. While I can see that there may be a spacing issue here, is this specific to user registration form, for all forms on the user registration journey, or for all forms? My feeling is the issue described is too specific and in-fact this is a wider issue regarding layout of forms
- To help with this issue have you utilised the style guide admin module? I have installed and enabled on my site to get a look at how bootstrap styles form elements. Please see attached screenshot. From what I can see it uses a wrapper and the wrapper is spaced in em's. Perhaps we should look to do something similar here?
- I am a bit confused by the gitlab.yml file. I am not sure how this relates to this issue? Perhaps that change should be a separate issue?
I wanted to also add alias for user entities. Turns out I was able to do this without using a separate module. Steps to enable:
1. Make sure user bundle /entity type is enabled from path settings tab.
2. Once enabled you can also set the patten on existing user entities
3. You can add pattern on path pattern using token for user entity type. e.g /users/[current-user:account-name]/code>
4. You now have option to bulk generate user entity paths.
From what I can tell path aliases are shown instead of users/[userid] inclusing edit paths e.g. users/[current-user:account-name]/edit
Thanks,
I can't see the test link but based on the screen shot that is a massive improvement IMO.
What is the actual difference between node view and what you are outputting. Presumably it is also possible to set the trim length on the teaser view as well?
Any update on this issue?
It has been 3 months already!
What version of Drupal are you using?
With this patch, (applied manually) the error is:
The website encountered an unexpected error. Try again later.
Error: Call to a member function getSetting() on null in Drupal\comment\Controller\CommentController->commentPermalink() (line 129 of core/modules/comment/src/Controller/CommentController.php).
call_user_func_array() (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 638)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 53)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 741)
Drupal\Core\DrupalKernel->handle() (Line: 19)
Thanks
You are right. Rules are still triggered!
In my case I had to pass the url flag when running drush to trigger the rule.
Thanks.
From what I can tell, rules are not triggered if using drush to import content etc.
I am using drush 12 as supported and recommended here:
https://www.drush.org/13.x/install/#drupal-compatibility
Drush Commandline Tool 12.5.3.0
Tested locally on 10.3.5
Patch seems to work for me. i.e. no more
[debug] Could not instantiate Drupal\stage_file_proxy\Drush\Commands\StageFileProxyCommands: You have requested a non-existent service "stage_file_proxy.fetch_manager". Did you mean this: "stage_file_proxy.download_manager"? [2053.12 sec, 10.19 MB]
2dareis2do → created an issue.
2dareis2do → created an issue.
Actually --continue-on-fallurre does seem to do something. I am getting the following output if I do not specify it.
[notice] Processed 4 items (0 created, 0 updated, 4 failed, 0 ignored) - done with 'my_import_feed'
In MigrateToolsCommands.php line 1092:
The code for this is like so:
if ($error_message) {
if ($options['continue-on-failure']) {
$this->logger()->error($error_message);
}
else {
// Nudge Drush to use a non-zero exit code.
throw new \Exception($error_message);
}
}
If I understand this correctly this is useful to prevent drush outputting a non zero value
By convention, an exit code of zero indicates that the command completed successfully, and non-zero means that an error was encountered.
Often you just want to update a single row for a migration and its dependencies. When specifying a limit, this ignored by dependencies. In fact, I cannot think of a single case where I want to limit the main migration but not one of its dependencies.
e.g. if I use one or more migration_lookup in my main migration, i should be able to specify an id and it will just import that one. However, even if i limit it by one, the dependencies will run in their entirety. This can be very tine consuming, and in my case unnecessary.
In my experience there are some issues when running dependencies using migrate tools UI or via drush/cron. From what I can tell the options are ignored for dependencies. e.g. if I specify to limit say 1 row, this appears to be ignored when running the dependencies as part of the main migration.
I think it might be better to run a migration dependencies separately i.e. select the option to ignore dependencies and run each one separately. This should make sure a dependency runs even if there is an error with a row in the parent migration.
I have tested migrate_queue_importer. One interesting thing about migrate_queue_importer is it seems to use hook cron to elevate the priority of the module as hook_cron tends to be:
1. executed before the queue jobs are run.
2. executed sequentially, i.e. one hook implementation followed by another.
One issue is that it still treats migrations as a batch. e.g. say I have a rss feed that has 100 items on it which may in turn have one or more dependencies with a similar amount of items, the chances of a job completing in say 30 seconds are slim which is the default value for withsuspendMaximumWait
.
Now if a migration was executed and imported row by row, using the queue might be more beneficial. It is more likely a single row could be imported within this 30 second period or similar, rather than abstracting the import using migrate tools UI or drush (much of the functionality from migrate tools has been replicated in drush) where it processes the queue as a single job. In fact this is different to migrate Ui that does use the batch api to process items one by one, This allows a job to continue from if it was interrupted.
Of course migrate also has its own state (db) and ways of knowing how to handle an import depending on if it has been imported successfully or not etc.
I think it might be beneficial to have a way of importing a migration row by row, while at the same time allowing users to override the suspendMaximumWait
to suit, so that a migration import and any dependencies works more optimally with the queue API and is likely to time out or fail.
if running multiple migrations, when one migration reports any failure, the entire process stops with that migration and subsequent migrations are not run. That's not necessarily desirable, especially when developing a set of migrations where you'd like it to run the whole thing and gather all the errors from all the migrations rather than have to identify and fix them one at a time. So, I propose a --continue-on-failure option to the migrate-import command, which will run all selected migrations whether or not one in the middle fails.
https://www.drupal.org/project/migrate_tools/issues/3092369 →
I am a bit confused by this feature request, The example shown seems to apply for groups. i.e. if one item in the group fails, then the next one is not skipped.
How does this apply to migrate queue importer that does not support groups AFAICT?
This looks like a breaking change to me. i.e. new patch version requires major update for dependency.
https://git.drupalcode.org/project/social_post/-/commit/2ca4489fcfb3d5a3...
Why not create a new major release? I cannot update due to dependency of social_api 3.x currently 3.1
Thanks for posting this.
I have tested this. i.e. add remote image file media type with Remote file plugin. This seems to create a "remote file field" in my case called "field_media_remote_file".
I am not sure why this is created this way as opposed to just adding this remote file type field as field type?
When adding a remote file this way the UI seems to work reasonably well, although there is no preview of the remote images. if using many images we need a way to distinguish one from another, at least visually.
Just wanted to share how out looks with big pipe enabled in Drupal 10.2.7 (it's quite rare to see all types on a single page - see attached)
<div class="messages-list__wrapper">
<div role="contentinfo" aria-labelledby="message-error-title" class="messages-list__item messages messages--error">
<div role="alert">
<div class="messages__header">
<h2 id="message-error-title" class="messages__title">
Error message
</h2>
</div>
<div class="messages__content">
One or more problems were detected with your Drupal installation. Check the <a href="/admin/reports/status">status report</a> for more information.
</div>
</div>
</div>
<div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status">
<div class="messages__header">
<h2 id="message-status-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
Antibot (system_themes_admin_form): disabled
</div>
</div>
<div role="contentinfo" aria-labelledby="message-warning-title" class="messages-list__item messages messages--warning">
<div class="messages__header">
<h2 id="message-warning-title" class="messages__title">
Warning message
</h2>
</div>
<div class="messages__content">
No update information available. <a href="/admin/reports/status/run-cron?destination=/admin/appearance&token=QJoWTyS5Bcf8KP_gvhmjUwm-s1rlrvSqL3XHgVsxEKQ">Run cron</a> or <a href="/admin/reports/updates/check?destination=/admin/appearance&token=CBZRlulFTH8gW_6DOzzFPvANhv3hgZZGZgPlEhP9noY">check manually</a>.
</div>
</div>
</div>
AFAICT messages are also grouped by type even with big pipe disabled.
Notice how there are multiple uses of role="contentinfo"
on a single page which is obviously wrong.
In 10.3 I believe behaviour has changed slightly depending on whether big pipe is enable or not.
Turns out even Olivero does seem to need this fix/patch for theme suggestions. Please see related issue for more info.
There is quite a lot happening here with how notifications are styled depending on:
1. the role or status of the alert/message (status, error, warning, info?)
2. if BigPipe is enabled (alerts are grouped together only if Bigpipe enabled?!)
3. If there are single or multiple alerts (depends is container is tagged contentinfo
or status
role
4. if views is enabled, they can be output to multiple regions?! (notification sits in main notification region and block on page load while additional notifications are output in the content region)
I actually came across alerts a while ago when looking at theming migrate tools UI and the limitation of the current traffic light system (red, green, amber). If any one is interested there is also figma design there as well.
https://www.drupal.org/project/drupal/issues/3437924 ✨ Add support for additional coloured notices Needs work
The good news is i seem to be able to apply https://www.drupal.org/project/drupal/issues/3456176#comment-15738200 🐛 10.3 upgrade now missing status-message theme sugestions Active in versions of Drupal prior to 10.3 without any noticeable side affects. This means I can avoid having to do a major release for any theme patches to address issue or changes introduced with 10.3 release.
Certainly upgrading to 10.3 without applying these changes can lead to un-styled alerts and message notifications.
With Big Pipe enabled if there is a single message (claro) outputs role=contentinfo
With Big Pipe enabled
If message is single than one output is role=contentinfo
If output is more than one, output is role=status
I think error messages may be treated slightly differently.
Ok so it turns out message are displayed differently depending if big pipe is enabled.
If Big pipe is enabled messages are output in a group
If Big Pipe is disabled, messages are output separately.
2dareis2do → created an issue.
Updated example of Olivero.
So it appears that notifications are grouped together for Olivero theme. This is different from Claro that has separate notifications.
Many thanks.
Created an issue for Views Infinite Scroll.
Perhaps there is an issue there?
2dareis2do → created an issue.
Tried switching from view infinite scroll to paginated view. Here we can see messages are only output once.
What is interesting here is all messages appear to be combined now.
Please see attached screen shots.
Also Views still seems to output the message in that context.
Possibly the repeating notices may be a specific issue with views infinite scroll implementation. Not sure.
With the current implementation, the close button adds the hidden class to data-drupal-selector="messages"
tagged element. Because the container has padding, this leaves white space after closing the message.
Ok so looking at Olivero, the close button seems to be being added using js.
e.g. in status messages there is no close button:
<div data-drupal-messages class="messages-list twig">
<div class="messages__wrapper layout-container olivero">
{% for type, messages in message_list %}
{%
set classes = [
'messages-list__item',
'messages',
'messages--' ~ type,
]
%}
<div{{ attributes
.addClass(classes)
.setAttribute('data-drupal-selector', 'messages')
.setAttribute('role', 'contentinfo')
.setAttribute('aria-label', status_headings[type])
}}>
<div class="messages__container twig" 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>
<div class="messages__icon">
{% if type == 'error' %}
{% include "@olivero/../images/error.svg" %}
{% elseif type == 'warning' %}
{% include "@olivero/../images/warning.svg" %}
{% elseif type == 'status' %}
{% include "@olivero/../images/status.svg" %}
{% elseif type == 'info' %}
{% include "@olivero/../images/info.svg" %}
{% endif %}
</div>
</div>
{% endif %}
<div class="messages__content twig">
{% if messages|length > 1 %}
<ul class="messages__list">
{% for message in messages %}
<li class="messages__item">{{ message }}</li>
{% endfor %}
</ul>
{% else %}
{{ messages|first }}
{% endif %}
</div>
</div>
</div>
{# Remove type specific classes. #}
{% set attributes = attributes.removeClass(classes) %}
{% endfor %}
</div>
</div>
Ot looks like this is injected with js here.
e.g. in web/core/themes/olivero/js/messages.js we have
/**
* Adds a close button to the message.
*
* @param {object} message
* The message object.
*/
const closeMessage = (message) => {
const messageContainer = message.querySelector(
'[data-drupal-selector="messages-container"]',
);
if (!messageContainer.querySelector('.messages__button')) {
const closeBtnWrapper = document.createElement('div');
closeBtnWrapper.setAttribute('class', 'messages__button');
const closeBtn = document.createElement('button');
closeBtn.setAttribute('type', 'button');
closeBtn.setAttribute('class', 'messages__close');
const closeBtnText = document.createElement('span');
closeBtnText.setAttribute('class', 'visually-hidden');
closeBtnText.innerText = Drupal.t('Close message');
messageContainer.appendChild(closeBtnWrapper);
closeBtnWrapper.appendChild(closeBtn);
closeBtn.appendChild(closeBtnText);
closeBtn.addEventListener('click', () => {
message.classList.add('hidden');
});
}
};
My preference would be to include this in the twig template. Here is an example from bootstrap theme:
{#
/**
* @file
* Default theme implementation for status messages.
*
* Displays status, error, and warning messages, grouped by type.
*
* An invisible heading identifies the messages for assistive technology.
* Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
* for info.
*
* Add an ARIA label to the contentinfo area so that assistive technology
* user agents will better describe this landmark.
*
* Available variables:
* - message_list: List of messages to be displayed, grouped by type.
* - status_headings: List of all status types.
* - display: (optional) May have a value of 'status' or 'error' when only
* displaying messages of that specific type.
* - attributes: HTML attributes for the element, including:
* - class: HTML classes.
*
* @see template_preprocess_status_messages()
*
* @ingroup themeable
*/
#}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div data-drupal-messages>
{% for type, messages in message_list %}
{%
set classes = [
'alert',
'alert-dismissible',
'fade',
'show',
'col-12',
'd-flex align-items-center',
type == 'status' ? 'alert-success',
type == 'warning' ? 'alert-warning',
type == 'error' ? 'alert-danger',
type == 'info' ? 'alert-primary',
]
%}
{%
set role = {
'status': 'status',
'error': 'alert',
'warning': 'alert',
'info': 'status',
}
%}
<div aria-label="{{ status_headings[type] }}" {{ attributes|without('role', 'aria-label').addClass(classes).setAttribute('role', role[type]).setAttribute('data-drupal-selector', 'messages') }}>
{% if type == 'error' %}
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
{% elseif type == 'warning' %}
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
{% elseif type == 'status' %}
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
{% elseif type == 'info' %}
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
{% endif %}
<div>
<h2 id="{{ title_ids[type] }}" class="alert-heading">
{{ status_headings[type] }}
</h2>
<hr>
{% for message in messages %}
{% if loop.last %}
{{ message }}
{% else %}
{{ message }}
<hr>
{% endif %}
{% endfor %}
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
Having it in the twig template gives it better visibility and makes it easier to override. Not sure why it has been done this way?
$variables['#cache']['max-age'] = 0;
also seems to be required in order to see theme suggestions?
Ok so it does appear Olivero does need the following:
/**
* Implements THEME_preprocess_HOOK() for system messages block.
* 10.3 upgrade now missing status-message theme suggestions
* and outputs multiple messages on page load.
* see https://www.drupal.org/project/drupal/issues/3456176
*/
function olivero_preprocess_block__system_messages_block(&$variables) {
$variables['content'] = StatusMessages::renderMessages();
// $variables['#cache']['max-age'] = 0;
}
See the delta here:
With:
<div class="region region--highlighted grid-full layout--pass--content-medium">
<div data-drupal-messages="" class="messages-list twig">
<div class="messages__wrapper layout-container olivero">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container twig" data-drupal-selector="messages-container"><div class="messages__header"><h2 class="visually-hidden">Status message</h2><div class="messages__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32"> <path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path></svg></div></div><div class="messages__content twig"> Antibot (views_exposed_form): disabled</div><div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div></div></div></div></div>
without
<div class="region region--highlighted grid-full layout--pass--content-medium">
<div class="messages-list" data-drupal-messages="">
<div class="messages__wrapper js">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="status" aria-labelledby="status-489600485541960-title" data-drupal-message-id="status-489600485541960" data-drupal-message-type="status" data-once="messages">
<div class="messages__container 1" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon"><svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M26.75 12.625C26.75 12.9792 26.625 13.3125 26.375 13.5625L15.0625 24.875C14.8125 25.125 14.4583 25.2708 14.1042 25.2708C13.7708 25.2708 13.4167 25.125 13.1667 24.875L5.625 17.3333C5.375 17.0833 5.25 16.75 5.25 16.3958C5.25 16.0417 5.375 15.6875 5.625 15.4375L7.52083 13.5625C7.77083 13.3125 8.10417 13.1667 8.45833 13.1667C8.8125 13.1667 9.14583 13.3125 9.39583 13.5625L14.1042 18.2708L22.6042 9.79167C22.8542 9.54167 23.1875 9.39583 23.5417 9.39583C23.8958 9.39583 24.2292 9.54167 24.4792 9.79167L26.375 11.6667C26.625 11.9167 26.75 12.2708 26.75 12.625ZM32 16C32 7.16667 24.8333 0 16 0C7.16667 0 0 7.16667 0 16C0 24.8333 7.16667 32 16 32C24.8333 32 32 24.8333 32 16Z"></path></svg></div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button>
</div>
</div>
</div></div></div></div>
Without the THEME_preprocess_HOOK, the markup is coming from the js file. If the hook theme suggestion is used, it will come from the twig file.
This is not visually obvious as the js fallback seems quite similar to Olivero.
One small thing.
In web/core/themes/olivero/templates/misc/status-messages.html.twig
we have
{{ attach_library('olivero/messages') }}
And in web/core/themes/olivero/olivero.libraries.yml
we have
messages:
version: VERSION
js:
js/messages.js: {}
dependencies:
- olivero/global-styling
If I comment this out, so it works similarly to claro.
Here I would expect the message.theme.js to not be loaded, however, they are still loaded.
Looking in web/core/themes/olivero/olivero.info.yml
I can see we also have the following:
libraries-extend:
# core/drupal.message:
# - olivero/drupal.message
If i comment this out messages.js and messages.theme.js and no longer included
Ok, If we compare olivero (not working) with claro (working) I can see the following delta in THEME/js/messages.js
Olivero has the following markup around the following element in web/core/themes/olivero/js/message.theme.js
messageWrapper.innerHTML = `
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header${!svg ? ' no-icon' : ''}">
<h2 class="visually-hidden">${messagesTypes[type]}</h2>
${svg}
</div>
<div class="messages__content">
${text}
</div>
</div>
`;
where as Claro has the following in web/core/themes/claro/js/messages.js
messageWrapper.innerHTML = `
<div class="messages__header">
<h2 id="${id}-title" class="messages__title">
${messagesTypes[type]}
</h2>
</div>
<div class="messages__content">
${text}
</div>
`;
Note how claro does not include the wrapper or container element
Testing on another site Olivero outputs messages like so:
First message in
<div class="region region--highlighted grid-full layout--pass--content-medium"> <!-- START RENDERER -->
<!-- CACHE-HIT: Yes -->
<!-- CACHE TAGS:
* block_view
* config:block.block.olivero_messages_2
-->
<!-- CACHE CONTEXTS:
* languages:language_interface
* theme
* user.permissions
-->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
▪️ block--highlighted--id--olivero-messages-2.html.twig
▪️ block--highlighted--plugin-id--system-messages-block.html.twig
▪️ block--highlighted.html.twig
▪️ block--olivero-messages-2.html.twig
✅ block--system-messages-block.html.twig
▪️ block--system.html.twig
▪️ block.html.twig
-->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/block--system-messages-block.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- END OUTPUT from 'core/modules/system/templates/block--system-messages-block.html.twig' -->
<!-- END RENDERER --></div>
Further down the page we have the same output multiple times:
e.g.
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div>
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
This is wrong on a few levels:
1. There should only be on contentinfo
role tagged element per page.
2. All notices tagged with role status messages over 1 should be nested in contentinfo tagged element
3. As mentioned elsewhere the output on initial page load is different to message displayed on ajax load. As already mentioned, there should only be one contentinfo tagged element per page - see https://www.w3.org/TR/wai-aria-1.2/#contentinfo
4. In this case, status message should be shown once until more items have loaded. This is triggered by scroll event (view infinite scroll). Here it is displayed something like 25 times.
Ok I have tried adding the following as per #3456176: 10.3 upgrade now missing status-message theme suggestions
/**
* Implements THEME_preprocess_HOOK() for system messages block.
* 10.3 upgrade now missing status-message theme suggestions
* and outputs multiple messages on page load.
* see https://www.drupal.org/project/drupal/issues/3456176
*/
// function olivero_preprocess_block__system_messages_block(&$variables) {
// $variables['content'] = StatusMessages::renderMessages();
// $variables['#cache']['max-age'] = 0;
// }
This seems to have no affect on the number of messages shown.
Testing on another site Olivero outputs messages like so:
First message in
<div class="region region--highlighted grid-full layout--pass--content-medium"> <!-- START RENDERER -->
<!-- CACHE-HIT: Yes -->
<!-- CACHE TAGS:
* block_view
* config:block.block.olivero_messages_2
-->
<!-- CACHE CONTEXTS:
* languages:language_interface
* theme
* user.permissions
-->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
▪️ block--highlighted--id--olivero-messages-2.html.twig
▪️ block--highlighted--plugin-id--system-messages-block.html.twig
▪️ block--highlighted.html.twig
▪️ block--olivero-messages-2.html.twig
✅ block--system-messages-block.html.twig
▪️ block--system.html.twig
▪️ block.html.twig
-->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/block--system-messages-block.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- END OUTPUT from 'core/modules/system/templates/block--system-messages-block.html.twig' -->
<!-- END RENDERER --></div>
Further down the page we have the same output multiple times:
e.g.
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div>
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'status_messages' -->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
<div data-drupal-messages="" class="messages-list">
<div class="messages__wrapper layout-container">
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
<div class="messages__container" data-drupal-selector="messages-container">
<div class="messages__header">
<h2 class="visually-hidden">Status message</h2>
<div class="messages__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
<path d="M26.8,12.6c0,0.4-0.1,0.7-0.4,0.9L15.1,24.9c-0.2,0.2-0.6,0.4-1,0.4c-0.3,0-0.7-0.1-0.9-0.4l-7.5-7.5c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.4,0.1-0.7,0.4-1l1.9-1.9c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l4.7,4.7l8.5-8.5c0.2-0.2,0.6-0.4,0.9-0.4c0.4,0,0.7,0.1,0.9,0.4l1.9,1.9C26.6,11.9,26.8,12.3,26.8,12.6z M32,16c0-8.8-7.2-16-16-16C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16C24.8,32,32,24.8,32,16z"></path>
</svg>
</div>
</div>
<div class="messages__content">
Antibot (views_exposed_form): disabled
</div>
<div class="messages__button"><button type="button" class="messages__close"><span class="visually-hidden">Close message</span></button></div></div>
</div>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/misc/status-messages.html.twig' -->
This is wrong on a few levels:
1. There should only be on contentinfo
role tagged element per page.
2. All notices tagged with role status messages over 1 should be nested in contentinfo tagged element
3. As mentioned elsewhere the output on initial page load is different to message displayed on ajax load. As already mentioned, there should only be one contentinfo tagged element per page - see https://www.w3.org/TR/wai-aria-1.2/#contentinfo
4. In this case, status message should be shown once until more items have loaded. This is triggered by scroll event (view infinite scroll). Here it is displayed something like 25 times.
It would be useful to see some markup around this.
For me backend (claro) hidden markup is like so:
<div class="region region-highlighted">
<div data-drupal-messages-fallback="" class="hidden messages-list"></div><div data-drupal-messages="" class="messages-list">
<div class="messages-list__wrapper">
<div role="contentinfo" aria-labelledby="message-status-title" class="messages-list__item messages messages--status">
<div class="messages__header">
<h2 id="message-status-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
Antibot (system_modules): disabled
</div>
</div>
</div>
</div>
</div>
What's interesting in this example is that they are using role="alert" to signify an error (not role="error". This seems consistent with how css frameworks like bootstrap work.
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('<p>Please enter your first name.</p>');
}
if ($('#last').val() === '') {
$('#errors').append('<p>Please enter your last name.</p>');
}
if ($('#email').val() === '') {
$('#errors').append('<p>Please enter your email address.</p>');
}
return false;
});
});
</script>
<form name="signup" id="signup" method="post" action="">
<p id="errors" role="alert" aria-atomic="true"></p>
<p>
<label for="first">First Name (required)</label><br>
<input type="text" name="first" id="first">
</p>
<p>
<label for="last">Last Name (required)</label><br>
<input type="text" name="last" id="last">
</p>
<p>
<label for="email">Email (required)</label><br>
<input type="text" name="email" id="email">
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form>
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19
I am not sure what the value of prepending every message with error, notice, warning, info etc is.
Markup in claro is like so:
js generated markup should be the same.
I tend to agree with comment that prepending the status of the alert to every alert seems like adding image of to every alt tag.
One challenge here is css frameworks like bootstrap use a single role for all types of notifications. i.e. role=
here is an example for warning.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
To colour can also be changed. Here are some examples.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Certainly in Drupal, I would like to see the alerts expanded beyond the standard status, warning and error. This would be useful for theming.
Looking at Claro, I think the implementation is about right:
Markup is like so:
Looking at output from claro, I think that they have it about right. i.e. one message per notice.
Markup is output in a single region.
<div class="messages__wrapper">
<div class="messages messages--status messages-list__item" role="status" aria-labelledby="status-104584368505794-title" data-drupal-message-id="status-104584368505794" data-drupal-message-type="status">
<div class="messages__header">
<h2 id="status-104584368505794-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
Antibot (system_clear_cache): disabled
</div>
</div><div class="messages messages--status messages-list__item" role="status" aria-labelledby="status-263254492006824-title" data-drupal-message-id="status-263254492006824" data-drupal-message-type="status">
<div class="messages__header">
<h2 id="status-263254492006824-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
Caches cleared.
</div>
</div><div class="messages messages--status messages-list__item" role="status" aria-labelledby="status-288152668342968-title" data-drupal-message-id="status-288152668342968" data-drupal-message-type="status">
<div class="messages__header">
<h2 id="status-288152668342968-title" class="messages__title">
Status message
</h2>
</div>
<div class="messages__content">
Antibot (system_performance_settings): disabled
</div>
</div>
</div>
In theory I see no issue in giving messages__wrapper
the role contentinfo
The role="contentinfo" is wrong. This role is for a landmark region, equivalent to HTML , with the extra proviso that there can only be one contentinfo landmark per document, and it must be a top-level landmark. I'm not sure how we ended up with role="contentinfo", but perhaps the idea was to make the messages easy to find using landmark regions. I like that idea, and we can use
instead, and it will count as a landmark region, as long as it has an ARIA label.Agreed that there should not be more than one contentinfo per page.
Within any document or application, the author SHOULD mark no more than one element with the contentinfo role.
https://www.w3.org/TR/wai-aria-1.2/#contentinfo
How about just using complementary role. Status, Error or Notice is often (not always) related to the page you are on.
https://www.w3.org/TR/wai-aria-1.2/#complementary
also
The complementary role indicates that contained content is relevant to the main content. If the complementary content is completely separable from the main content, it may be appropriate to use a more general role.
One way round this is to simply create a tagged release.
With regard to advertising on Drupal.org I did find this page
https://www.drupal.org/advertising →
Sponsorship or advertising will only be included on project pages, in project issue queue listings, or individual issues when it is appropriate and relevant to the contributor community, such as sponsorship of DrupalCI.
and
The ad is labeled with terms such as “Advertising”, “Advertisement”, “Partner Offer”, “Supporting Partner” or “Sponsorship” to distinguish it from content
I can't see that any rules have been broken here.
2dareis2do → created an issue.
The patch in https://www.drupal.org/project/drupal/issues/3456176 🐛 10.3 upgrade now missing status-message theme sugestions Active seems to address 2 issues:
- Fix for theme suggestions and missing system_messages_block i.e.
$variables['content'] = StatusMessages::renderMessages();
- FIx for multiple messages being output by setting
$variables['#cache']['max-age'] = 0;
This seems more related to the second issue.
I don't think they are the same but may be related.
Certainly Olivero implementation could explain screen reader issue.
Missing status message theme suggestions may be related but from what I can tell issue here persists with and without Bigpipe enabled. Also theme suggestions do appear to be working in Olivero, with and without Bigpipe enabled.
I have raised issue for Olivero here:
https://www.drupal.org/project/drupal/issues/3469942#comment-15741587 🐛 Message Notifications appear broken when using Olivero with Drupal10.3 Active
It's a shame that there appears is no easy way in core to see how message notifications should be implemented.
2dareis2do → created an issue.
Problem with Olivero seems to happen even with Bigpipe disabled.
Tested in Stark and seems to work fine with and without Bigpipe enabled. Message notifications are un-styled in Stark though.
Perhaps the issue in Olivero is a different one as I think the implementation around message notifications is different there. e.g. it has its own messages.js and message-theme.js which also seem to have dependency on navigation-utils.js
Thanks @acbramley
It is useful to see the output side by side but I will consider uploading markup as attachments in the future as per your recommendation.
The problem I see with this approach (patch) is that there is also an issue with core Oliveiro theme afaict. Please see attached screenshots.
In Oliveiro Initial status message is shown in correct place on page load in this case is also has the following markup:
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="status" aria-labelledby="status-590833649505219-title" data-drupal-message-id="status-590833649505219" data-drupal-message-type="status" data-once="messages">
Notice that both aria-labelledby
and data-drupal-message-id
have the following token attached 590833649505219
The markup for the second message that is injected does not have this token markup also looks a little different:
<div class="messages-list__item messages messages--status" data-drupal-selector="messages" role="contentinfo" aria-label="Status message" data-once="messages">
We can see also role is contentinfo rather that status so I a little confused about that.
In Olivero the message notification keeps on injecting and the following error is found in the console log
So to summarise in Oliveiro:
- Status message loads in correct place (block and region) only after cache clear on initial page load
- Subsequent status messages are injected in the content region?
- Multiple status messages loading continuously
- Ajax loading spinner does not go away.
- Error in the console - see below
ResizeObserver loop completed with undelivered notifications.
Tested in Safari, Chrome and Firefox.
Perhaps I should open up another issue(s) for some of these?
Apologies for all the noise but to clarify I think I am conflating a few issues here.
@glynster solution does resolve the theme hook suggestion issue for me after upgrading to 10.3 with Bigpipe enabled.
The other things i noticed when looking into this issue is that the initial notification (on page load is shown in the Status messages block. For me this is out put in my notification region. Subsequent ajax loaded notifications do not appear in the same region. For me they are getting injected in the view (views-view.html.twig) for example. This could be an issue here or with views load more that I am using here. Not sure. Same in 10.2.x My expectation is notifications should be output in the same block or region as specified in your site.
I have added (another) screenshot that shows the output being added twice to message on initial page load notification. After that it only seems to get loaded once. Setting cache max age to 0 using THEME_preprocess_HOOK seems to address that issue.
There is also a core patch here that looks like it does something similar.
attached picture shows 10.2.7 with and without big pipe enabled works without outputting markup multiple times and is also styled.
Screenshot with big pipe disabled.
Before applying patch my mark up is like this (looking good):
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/custom/sl2/templates/misc/status-messages.html.twig' -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
</symbol>
<symbol id="info-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
</symbol>
</svg>
<div data-drupal-messages="">
<div aria-label="Status message" class="alert alert-dismissible fade show col-12 d-flex align-items-center alert-success" role="status" data-drupal-selector="messages">
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"></use></svg>
<div>
<h2 id="message-status-title--IRzqPL_UGPQ" class="alert-heading">
Status message
</h2>
<hr>
Antibot (views_exposed_form): enabled
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div aria-label="Status message" class="alert alert-dismissible fade show col-12 d-flex align-items-center alert-success" role="status" data-drupal-selector="messages">
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"></use></svg>
<div>
<h2 id="message-status-title--IRzqPL_UGPQ" class="alert-heading">
Status message
</h2>
<hr>
Antibot (views_exposed_form): enabled
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"></use></svg>
<div>
<h2 id="message-status-title--IRzqPL_UGPQ" class="alert-heading">
Status message
</h2>
<hr>
Antibot (views_exposed_form): enabled
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div aria-label="Status message" class="alert alert-dismissible fade show col-12 d-flex align-items-center alert-success" role="status" data-drupal-selector="messages">
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"></use></svg>
<div>
<h2 id="message-status-title--IRzqPL_UGPQ" class="alert-heading">
Status message
</h2>
<hr>
Antibot (views_exposed_form): enabled
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div data-drupal-messages="">
<div aria-label="Status message" class="alert alert-dismissible fade show col-12 d-flex align-items-center alert-success" role="status" data-drupal-selector="messages">
<svg class="bi flex-shrink-0 me-4" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"></use></svg>
<div>
<h2 id="message-status-title--IRzqPL_UGPQ" class="alert-heading">
Status message
</h2>
<hr>
Antibot (views_exposed_form): enabled
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<!-- END CUSTOM TEMPLATE OUTPUT from 'themes/custom/sl2/templates/misc/status-messages.html.twig' -->
After patch markup is like so (not looking good)
<!-- END OUTPUT from 'core/modules/system/templates/block--system-messages-block.html.twig' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/block--system-messages-block.html.twig' -->
<div class="" data-drupal-messages=""><div class="messages__wrapper"><div class="messages messages--status" role="status" data-drupal-message-id="status-893981933143464" data-drupal-message-type="status" aria-label="Status message">Antibot (views_exposed_form): enabled</div></div></div>
<div class="messages__wrapper"><div class="messages messages--status" role="status" data-drupal-message-id="status-893981933143464" data-drupal-message-type="status" aria-label="Status message">Antibot (views_exposed_form): enabled</div></div>
<div class="messages messages--status" role="status" data-drupal-message-id="status-893981933143464" data-drupal-message-type="status" aria-label="Status message">Antibot (views_exposed_form): enabled</div>
<div class="messages__wrapper"><div class="messages messages--status" role="status" data-drupal-message-id="status-893981933143464" data-drupal-message-type="status" aria-label="Status message">Antibot (views_exposed_form): enabled</div></div>
<div class="" data-drupal-messages=""><div class="messages__wrapper"><div class="messages messages--status" role="status" data-drupal-message-id="status-893981933143464" data-drupal-message-type="status" aria-label="Status message">Antibot (views_exposed_form): enabled</div></div></div>
Maybe part of the issue I am experiencing may be related to m use of $this->logger->notice using MigrateException to handle exceptions. Will try switching from regular notice to see how this affects the migration.
I am thinking this makes more sense especially where entry exists in migrate map table.
This may also improve the reliability of the migration as well.
I am also seeing limit ignored when selecting option to ignore dependency
2dareis2do → created an issue.
Thinking about this it seems a failed row with no destination id is omitted from the message table.
My guess is that migrate update will not attempt to import failed rows. Perhaps this makes sense to keep like this.
However a failed import will be logged in migrate_map table.
My guess is there is nothing to prevent this failing again on subsequent imports? (need to check how this works)
As migration message table has no record of rows with no destination id, It is not possible to manage this from the existing view, unless we add failed migrations (possible but possibly with ramifications when updating - need to check how this actually works).
So one option could be add another view that lists migration map status for all rows in the migration. This could simply add another status that could be modified from the UI to flag a row to ignore subsequent imports.
May also need to update code to skip any migrations with this status.
Some of this code is in core, while other is in contrib (migrate tools). This complicates slightly how this change could be made. My feeling is that it might make sense to add an additional status in core as that is where the other status constants are defined.
Ok I can see that the status of the migration in migrate map table seems to come from the core migrate module e.g.
interface MigrateIdMapInterface extends \Iterator, PluginInspectionInterface {
/**
* Indicates that the import of the row was successful.
*/
const STATUS_IMPORTED = 0;
/**
* Indicates that the row needs to be updated.
*/
const STATUS_NEEDS_UPDATE = 1;
/**
* Indicates that the import of the row was ignored.
*/
const STATUS_IGNORED = 2;
/**
* Indicates that the import of the row failed.
*/
const STATUS_FAILED = 3;
I am thinking it might be good to add another status e.g. STATUS_IGNORE
Also in the migrate_map* table we have level column. Possible options here are
/**
* Migration error.
*/
const MESSAGE_ERROR = 1;
/**
* Migration warning.
*/
const MESSAGE_WARNING = 2;
/**
* Migration notice.
*/
const MESSAGE_NOTICE = 3;
/**
* Migration info.
*/
const MESSAGE_INFORMATIONAL = 4;
On the migrate message table we have the following 'levels' that seem to pertain to message
/**
* Migration error.
*/
const MESSAGE_ERROR = 1;
/**
* Migration warning.
*/
const MESSAGE_WARNING = 2;
/**
* Migration notice.
*/
const MESSAGE_NOTICE = 3;
/**
* Migration info.
*/
const MESSAGE_INFORMATIONAL = 4;
I would expect a failed migration to be imported with MESSAGE_ERROR = 1 flag.
2dareis2do → created an issue.
Modified patch to:
- Use text area to enter ids
- Allow the existing option as the default (use of , and :)
- Add option to disable the default and use one entry per line
See attached screenshot for example of how this looks.
Ok if I remove the pattern html5 check I can see the flickr id will get split into an array of arrays e.g.
0 =
array(2)
0 =
"tag"
1 =
"flickr.com"
1 =
array(2)
0 =
"2004"
1 =
"/photo/53729127947"
So what seems to happen it will explode a string by ,
, and then each string in this case will get split by :
The code for this is in the main MigrateTools class e.g.
<?php
declare(strict_types = 1);
namespace Drupal\migrate_tools;
/**
* Utility functionality for use in migrate_tools.
*/
class MigrateTools {
/**
* Default ID list delimiter.
*/
public const DEFAULT_ID_LIST_DELIMITER = ':';
/**
* Build the list of specific source IDs to import.
*
* @param array $options
* The migration executable options.
*
* The ID list.
*/
public static function buildIdList(array $options): array {
$options += [
'idlist' => NULL,
'idlist-delimiter' => self::DEFAULT_ID_LIST_DELIMITER,
];
$id_list = [];
if (is_scalar($options['idlist'])) {
$id_list = explode(',', (string) $options['idlist']);
array_walk($id_list, function (&$value) use ($options): void {
$value = str_getcsv($value, $options['idlist-delimiter']);
});
}
return $id_list;
}
}
2dareis2do → created an issue.