Ensure screen readers are made aware of page level messages

- when added dynamically to the top of the page
- already added to the authentication pages via #8925

CHANGELOG.txt

@@ -175,6 +175,7 @@ Changelog
  * Fix: Address form field label alignment issues by always displaying labels above the widget (Thibaud Colas)
  * Fix: Make sure rich text URL editing tooltip is fully visible when displayed inside InlinePanel blocks (Thibaud Colas)
  * Fix: Allow input fields to scroll horizontally in Safari iOS (Thibaud Colas)
+ * Fix: Ensure screen readers are made aware of page level messages added dynamically to the top of the page (Paarth Agarwal)
 
 
 3.0.1 (16.06.2022)

docs/releases/4.0.md

@@ -233,6 +233,7 @@ The bulk of these enhancements have been from Paarth Agarwal, who has been doing
  * Address form field label alignment issues by always displaying labels above the widget (Thibaud Colas)
  * Make sure rich text URL editing tooltip is fully visible when displayed inside InlinePanel blocks (Thibaud Colas)
  * Allow input fields to scroll horizontally in Safari iOS (Thibaud Colas)
+ * Ensure screen readers are made aware of page level messages added dynamically to the top of the page (Paarth Agarwal)
 
 
 ## Upgrade considerations

wagtail/admin/templates/wagtailadmin/base.html

@@ -8,7 +8,7 @@
     <main class="content-wrapper w-overflow-x-hidden" id="main">
         <div class="content">
             {# Always show messages div so it can be appended to by JS #}
-            <div class="messages">
+            <div class="messages" role="status">
                 {% if messages %}
                     <ul>
                         {% for message in messages %}