Messages should have role=status instead of role=contentinfo

Rerolled for 10.1. Applies cleanly.

#46 it's not working

Tests might fail and they will require extra work

Back to NR for the new patches.

The last submitted patch, 48: 2942404-48.patch, failed testing. View results →

The last submitted patch, 49: 2942404-49.patch, failed testing. View results →

Solving failed test cases and rerolling for 11.x

Caused massive test failures.

Was previously tagged for issue summary, has that been completed.

Rerolling to 11.x from #49.

Prashant.c → made their first commit to this issue’s fork.

Submitting Patch for 11.x and raising the MR as well.

Thank you.

Large number of failures.

Also was previously tagged for issue summary update.

@Prashant.c there's no interdiff added what did you do different from #55

I opened MR 6112 as patches don't seem to be testing properly. Most of the 1800+ test failures in #55 and #58 do not seem to have anything to do with the code changes. Among other things there are "missing composer.lock" messages, and that file is not touched in either patch. The MR I created is failing ~3 tests, so those will need to be addressed, but that should be straightforward compared to the unexpectedly huge fail count that suddenly appeared (and not at all the fault of @Prashant.c or @Hardik_Patel_12)

@bnjmnm, I have observed similar challenges in several other issues. When using the patch method, it leads to significant unrelated failures for the composer and other components, similar to the problems described in issues #55 and #58. However, the Merge Request (MR) method is functioning properly.

Bug in core's spellcheck step is blocking tests. 🐛 Spell-checking job fails with "couldn't find remote ref refs/heads/11.x" when 11.x branch does not exist in fork Active

Submitting a re-roll of patch #58 to allow for a clean application to 10.3.x. Some syntax and line number changes.

the 65-11.x.patch is a reroll to cleanly apply patch #58 to 10.3.x

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.

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

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">&times;</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.

Updated example of Olivero.

So it appears that notifications are grouped together for Olivero theme. This is different from Claro that has separate notifications.

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.

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.

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&amp;token=QJoWTyS5Bcf8KP_gvhmjUwm-s1rlrvSqL3XHgVsxEKQ">Run cron</a> or <a href="/admin/reports/updates/check?destination=/admin/appearance&amp;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.

Rerolling patch #65 for Drupal 10.3.8. Line number updates and removal of edits to a template file where changes were addressed.