Merge pull request #15294 from craftcms/feature/pt-72-notification-he…

…ading-is-present-on-page-even-when-no

Hides SR-only notification heading when there are no active notifications

CHANGELOG-WIP.md

@@ -9,6 +9,7 @@
 
 ### Accessibility
 - Improved the accessibility of two-step verification setup. ([#15229](https://github.com/craftcms/cms/pull/15229))
+- The notification heading is no longer read to screen readers when no notifications are active. ([#15294](https://github.com/craftcms/cms/pull/15294)) 
 
 ### Administration
 - Icon fields now have an “Include Pro icons” setting, which determines whether Font Awesome Pro icon should be selectable. ([#15242](https://github.com/craftcms/cms/issues/15242))

src/templates/_layouts/components/notifications.twig

@@ -1,5 +1,5 @@
 <div id="notifications" role="status">
-  <h2 id="cp-notification-heading" class="visually-hidden">{{ 'Notifications'|t('app') }}</h2>
+  <h2 id="cp-notification-heading" class="visually-hidden hidden">{{ 'Notifications'|t('app') }}</h2>
 </div>
 
 {% for type in ['notice', 'success', 'error'] %}

src/web/assets/cp/src/js/CP.js

@@ -26,6 +26,7 @@ Craft.CP = Garnish.Base.extend(
     $crumbMenuList: null,
     $crumbMenuItems: null,
     $notificationContainer: null,
+    $notificationHeading: null,
     $main: null,
     $primaryForm: null,
     $headerContainer: null,
@@ -85,6 +86,7 @@ Craft.CP = Garnish.Base.extend(
       this.$crumbList = $('#crumb-list');
       this.$crumbItems = this.$crumbList.children('li');
       this.$notificationContainer = $('#notifications');
+      this.$notificationHeading = $('#cp-notification-heading');
       this.$main = $('#main');
       this.$primaryForm = $('#main-form');
       this.$headerContainer = $('#header-container');
@@ -357,6 +359,11 @@ Craft.CP = Garnish.Base.extend(
 
       // Load any element thumbs
       this.elementThumbLoader.load(this.$pageContainer);
+
+      // Add notification close listeners
+      this.on('notificationClose', () => {
+        this._updateNotificationHeadingDisplay();
+      });
     },
 
     get $contentHeader() {
@@ -380,6 +387,10 @@ Craft.CP = Garnish.Base.extend(
         .prependTo(this.$contentHeader);
     },
 
+    get notificationCount() {
+      return this.$notificationContainer.find('.notification').length;
+    },
+
     initSpecialForms: function () {
       // Look for forms that we should watch for changes on
       this.$confirmUnloadForms = $('form[data-confirm-unload]');
@@ -875,6 +886,17 @@ Craft.CP = Garnish.Base.extend(
       }
     },
 
+    /**
+     * Updates display property of "Notifications" heading based on whether there are active notifications
+     **/
+    updateNotificationHeadingDisplay() {
+      if (this.notificationCount > 0) {
+        this.$notificationHeading.removeClass('hidden');
+      } else {
+        this.$notificationHeading.addClass('hidden');
+      }
+    },
+
     _setFixedTopPos: function ($element, headerHeight) {
       if (!$element.length || !this.$contentContainer.length) {
         return;
@@ -919,6 +941,8 @@ Craft.CP = Garnish.Base.extend(
         notification,
       });
 
+      this._updateNotificationHeadingDisplay();
+
       return notification;
     },
 
@@ -1817,6 +1841,7 @@ Craft.CP.Notification = Garnish.Base.extend({
         duration: 'fast',
         complete: () => {
           this.destroy();
+          Craft.cp.trigger('notificationClose');
         },
       }
     );