a11y(raids): announce the conditional distance input via aria-live (#233)

When the user flips the location-mode radio from "Use areas" to "Set
distance", the distance input appears via an `@if` block. Non-sighted
users wouldn't be notified that a new field is now focusable.

Wrap the `@if` in `<div aria-live="polite" aria-atomic="true">` so
screen readers announce the field's appearance (and read its label)
when the user toggles modes. Added a spec asserting the live region
is present with the right attributes and that the distance input
lands inside it after the mode switch.

Author: hokiepokedad2

Applications/Pgan.PoracleWebNet.App/ClientApp/src/app/shared/components/raid-delivery-section/raid-delivery-section.component.html

@@ -20,13 +20,15 @@ <h4 class="section-heading">{{ 'ALARM.LOCATION_MODE' | translate }}</h4>
   </mat-radio-button>
 </mat-radio-group>
 
-@if (distanceMode().value === 'distance') {
-  <mat-form-field appearance="outline" class="full-width">
-    <mat-label>{{ 'ALARM.DISTANCE_LABEL' | translate }}</mat-label>
-    <input matInput type="number" [formControl]="distanceKm()" min="0" step="0.1" />
-    <span matSuffix>{{ 'ALARM.DISTANCE_SUFFIX' | translate }}</span>
-  </mat-form-field>
-}
+<div aria-live="polite" aria-atomic="true">
+  @if (distanceMode().value === 'distance') {
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>{{ 'ALARM.DISTANCE_LABEL' | translate }}</mat-label>
+      <input matInput type="number" [formControl]="distanceKm()" min="0" step="0.1" />
+      <span matSuffix>{{ 'ALARM.DISTANCE_SUFFIX' | translate }}</span>
+    </mat-form-field>
+  }
+</div>
 
 <app-delivery-preview [mode]="distanceMode().value === 'areas' ? 'areas' : 'distance'" [distanceKm]="distanceKm().value ?? 0">
 </app-delivery-preview>

Applications/Pgan.PoracleWebNet.App/ClientApp/src/app/shared/components/raid-delivery-section/raid-delivery-section.component.spec.ts

@@ -87,4 +87,15 @@ describe('RaidDeliverySectionComponent', () => {
     component.onDistanceModeChange();
     expect(distanceKm.value).toBe(3);
   });
+
+  it('should wrap the conditional distance input in a polite live region', () => {
+    fixture.detectChanges();
+    const liveRegion: HTMLElement | null = fixture.nativeElement.querySelector('[aria-live="polite"]');
+    expect(liveRegion).toBeTruthy();
+    expect(liveRegion?.getAttribute('aria-atomic')).toBe('true');
+
+    distanceMode.setValue('distance');
+    fixture.detectChanges();
+    expect(liveRegion?.querySelector('input[type="number"]')).toBeTruthy();
+  });
 });