DIG-8380 Improve accessibility of error messages

CHANGELOG.md

@@ -5,12 +5,13 @@
 
 ---
 ### v1.0.16
-> Updated: 26.05.2026
+> Updated: 02.06.2026
 1. Responsive table layout for assessment listing page
 2. Filament JS updates
 3. Accessibility improvement in summary page for screen readers
 4. Heading improvement in assessment listing page
 5. Display tabular data instead of charts at small viewport widths
+6. Improve accessibility of error messages
 
 ### v1.0.15
 > Updated: 18.05.2026

lang/en/alerts.php

@@ -24,5 +24,9 @@
     'success' => [
         'title' => 'Assessment submitted',
         'assessment-submitted' => 'Assessment submitted successfully.',
+        'generic' => 'Success',
+    ],
+    'warnings' => [
+        'title' => 'Warning',
     ],
 ];

resources/views/livewire/alerts.blade.php

@@ -1,99 +1,83 @@
-<div wire:key="alerts">
-    {{-- Session-driven message --}}
+<div>
     @if (session()->has('message'))
-        <div class="nhsuk-inset-text" role="message" tabindex="-1">
-            <span class="nhsuk-u-visually-hidden">Message: </span>
-            <p>{!! session('message') !!}</p>
-        </div>
-    @endif
 
-    {{-- Validation errors or session error --}}
-    @if ($errors->any() || session()->has('error'))
-        <div class="nhsuk-error-summary" role="alert" tabindex="-1">
-            <h2 class="nhsuk-error-summary__title">
-                {{ session('error-title') ?? $heading ?? __('alerts.errors.title') }} <span class="nhsuk-u-visually-hidden">:</span>
-            </h2>
-            <div class="nhsuk-error-summary__body">
-                @if ($errors->any())
-                    <ul>
-                        @foreach ($errors->all() as $error)
-                            <li>{!! $error !!}</li>
-                        @endforeach
-                    </ul>
-                @else
-                    <p>{!! session('error') !!}</p>
-                @endif
+        <div class="nhsuk-notification-banner" role="region" aria-labelledby="nhsuk-notification-banner-title"
+             data-module="nhsuk-notification-banner">
+            <div class="nhsuk-notification-banner__header">
+                <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">
+                    {{ session('message-heading', __('alerts.messages.title')) }}
+                </h2>
+            </div>
+            <div class="nhsuk-notification-banner__content">
+                {!! session('message') !!}
             </div>
         </div>
+
     @endif
 
-    {{-- Session-driven warning --}}
-    @if (session()->has('warning'))
-        <div class="nhsuk-warning-callout" role="warning" tabindex="-1">
-            <h3 class="nhsuk-warning-callout__label">
-                Warning <span class="nhsuk-u-visually-hidden">:</span>
-            </h3>
-            <p>{!! session('warning') !!}</p>
+    @if (session()->has('success'))
+
+        <div class="nhsuk-notification-banner nhsuk-notification-banner--success" role="alert"
+             aria-labelledby="nhsuk-notification-banner-success-title" data-module="nhsuk-notification-banner">
+            <div class="nhsuk-notification-banner__header">
+                <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-success-title">
+                    {{ session('success-heading', __('alerts.success.generic')) }}
+                </h2>
+            </div>
+            <div class="nhsuk-notification-banner__content">
+                {!! session('success') !!}
+            </div>
         </div>
+
     @endif
 
-    {{-- Session-driven success --}}
-    @if (session()->has('success'))
-        <div class="nhsuk-card">
-            <div class="nhsuk-card__content">
-                <h3 class="nhsuk-card__heading">
-                    {!! session('success-heading') !!}
-                </h3>
-                <p class="nhsuk-card__description">{!! session('success') !!}</p>
+    @if ($errors && count($errors))
+
+        <div class="nhsuk-error-summary" id="error-summary"
+             aria-labelledby="error-summary-title" role="alert" tabindex="-1">
+            <h2 class="nhsuk-error-summary__title" id="error-summary-title">
+                {{ session('error-heading', __('alerts.errors.title')) }}
+                <span class="nhsuk-u-visually-hidden">:</span>
+            </h2>
+            <div class="nhsuk-error-summary__body">
+                <ul class="nhsuk-list nhsuk-error-summary__list">
+                    @php $errorsDecoded = $errors->messages(); @endphp
+                    @foreach ($errorsDecoded as $id => $error)
+                        <li>
+                            <a href="#{{ $id }}-error-error">
+                                {!! $error[0] !!}
+                            </a>
+                        </li>
+                    @endforeach
+                </ul>
             </div>
         </div>
+
     @endif
 
-    {{-- Event-driven alerts via dispatch/emit --}}
-    @if (!empty($type) && !empty($message))
-        <div x-data="{ show: true }"
-             x-init="setTimeout(() => { show = false; $wire.clearAlert() }, 5000)"
-             x-show="show"
-             wire:ignore.self>
-            @switch($type)
-                @case('message')
-                    <div class="nhsuk-inset-text" role="message" tabindex="-1">
-                        <span class="nhsuk-u-visually-hidden">Message: </span>
-                        <p>{!! $message !!}</p>
-                    </div>
-                    @break
+    @if (session()->has('error'))
 
-                @case('error')
-                    <div class="nhsuk-error-summary" role="alert" tabindex="-1">
-                        <h2 class="nhsuk-error-summary__title">
-                            {{ $heading ?? __('alerts.errors.title') }} <span class="nhsuk-u-visually-hidden">:</span>
-                        </h2>
-                        <div class="nhsuk-error-summary__body">
-                            <p>{!! $message !!}</p>
-                        </div>
-                    </div>
-                    @break
+        <div class="nhsuk-error-summary" id="error" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
+            <h2 class="nhsuk-error-summary__title" id="error-summary-title">
+                {{ session('error-heading', __('alerts.errors.title')) }}
+                <span class="nhsuk-u-visually-hidden">:</span>
+            </h2>
+            <div class="nhsuk-error-summary__body">
+                <p>{!! session('error') !!}</p>
+            </div>
+        </div>
 
-                @case('warning')
-                    <div class="nhsuk-warning-callout" role="warning" tabindex="-1">
-                        <h3 class="nhsuk-warning-callout__label">
-                            Warning <span class="nhsuk-u-visually-hidden">:</span>
-                        </h3>
-                        <p>{!! $message !!}</p>
-                    </div>
-                    @break
+    @endif
+
+    @if (session()->has('warning'))
 
-                @case('success')
-                    <div class="nhsuk-card">
-                        <div class="nhsuk-card__content">
-                            <h3 class="nhsuk-card__heading">
-                                {!! $heading ?? 'Success' !!}
-                            </h3>
-                            <p class="nhsuk-card__description">{!! $message !!}</p>
-                        </div>
-                    </div>
-                    @break
-            @endswitch
+        <div class="nhsuk-warning-callout" id="warning" role="alert" tabindex="-1">
+            <h3 class="nhsuk-warning-callout__label">
+                {{ session('warning-heading', __('alerts.warnings.title')) }}
+                <span class="nhsuk-u-visually-hidden">:</span>
+            </h3>
+            <p>{!! session('warning') !!}</p>
         </div>
+
     @endif
-</div>
+</div>

resources/views/livewire/questions.blade.php

@@ -1,5 +1,7 @@
 <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full">
+        @include('livewire.alerts')
+
         @if (!empty($questions))
             <form wire:submit.prevent="storeNext()">
                 @foreach ($questions as $question)