Improve accessibility for notifications (#115)

* Provide screen readers with information on unread notifications

* Add visual and ARIA clarifications for dismissing notifications

* Add title to notifications page

This allows screen readers and other accessibility tools to identify the
page to the user.

Author: danlivings-dxw

src/DfE.ExternalApplications.Web/Pages/Notifications/Index.cshtml

@@ -1,5 +1,8 @@
 @page
 @model DfE.ExternalApplications.Web.Pages.Notifications.IndexModel
+@{
+    ViewData["Title"] = "Notifications";
+}
 
 <h1 class="govuk-heading-l">Notifications</h1>
 
@@ -49,7 +52,7 @@
                 <td class="govuk-table__cell">${n.message || ''}</td>
                 <td class="govuk-table__cell">${mapTypeTag(n.type)}</td>
                 <td class="govuk-table__cell">${dateStr}</td>
-                <td class="govuk-table__cell"><a class="govuk-link" data-id="${n.id}" href="#">Dismiss</a></td>
+                <td class="govuk-table__cell"><a class="govuk-link" data-id="${n.id}" href="#">Dismiss <span class="govuk-visually-hidden">this notification</span></a></td>
             `;
             tr.querySelector('a').onclick = async (e) => {
                 e.preventDefault();
@@ -61,7 +64,8 @@
                         headers: { 'RequestVerificationToken': antiForgeryToken() }
                     });
                     if (response.ok) {
-                        tr.remove();
+                        tr.innerHTML = '<td class="govuk-table__cell" aria-live="assertive" role="alert" colspan="4">Notification dismissed.</td>';
+                        setTimeout(() => tr.remove(), 3000);
                     } else {
                         console.error('Failed to dismiss notification:', response.status, await response.text());
                         alert('Failed to dismiss notification. Please try again.');

src/DfE.ExternalApplications.Web/Pages/Shared/_Layout.cshtml

@@ -188,6 +188,7 @@
                             <li class="govuk-service-navigation__item">
                                 <a class="govuk-service-navigation__link app-badge-container" href="/Notifications" style="position: relative;">
                                     Notifications
+                                    <span id="notifications-unread-sr" class="govuk-visually-hidden"></span>
                                     <span id="notifications-unread-badge" class="app-notifications-badge" aria-hidden="true"></span>
                                 </a>
                             </li>

src/DfE.ExternalApplications.Web/wwwroot/js/notifications.js

@@ -2,6 +2,7 @@
 
 const container = () => document.getElementById('notification-container');
 const unreadBadge = () => document.getElementById('notifications-unread-badge');
+const unreadSr = () => document.getElementById('notifications-unread-sr');
 const antiForgeryToken = () => {
     const input = document.querySelector('input[name="__RequestVerificationToken"]');
     return input?.value;
@@ -115,9 +116,12 @@ async function refreshUnreadCount() {
         const unread = await fetch(`/notifications/unread`, { credentials: 'include' }).then(r => r.ok ? r.json() : []);
         const count = Array.isArray(unread) ? unread.length : 0;
         const badge = unreadBadge();
+        const notificationsUnreadSr = unreadSr(); 
         if (!badge) return;
         if (count > 0) {
             badge.textContent = count > 99 ? '99+' : String(count);
+            const accessibleCount = count > 99 ? 'over 99' : String(count);
+            notificationsUnreadSr.textContent = `(You have ${accessibleCount} unread ${count === 1 ? 'notification' : 'notifications'})`;
             // Ensure visual badge even if CSS fails to load (24x24 circle)
             badge.style.display = 'inline-block';
             badge.style.position = 'absolute';
@@ -135,6 +139,7 @@ async function refreshUnreadCount() {
             badge.style.zIndex = '2';
         } else {
             badge.textContent = '';
+            notificationsUnreadSr.textContent = '(You have no unread notifications)';
             badge.style.display = 'none';
         }
     } catch { }