366151318: (fix) add communicate steps on create device

modules/ui/src/app/components/device-item/device-item.component.scss

@@ -118,20 +118,6 @@ $border-radius: 12px;
   border-color: mat.m2-get-color-from-palette($color-primary, 600);
 }
 
-.visually-hidden {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .item-status {
   margin-right: 16px;
   grid-area: status;

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html

@@ -37,6 +37,9 @@ <h2 class="device-qualification-form-header-title">{{ data.title }}</h2>
     [title]="data.title + ' modal window'"
     (selectionChange)="onStepChange($event)">
     <cdk-step [editable]="true" formGroupName="0" [stepControl]="getStep(0)">
+      <p class="visually-hidden" role="status" aria-live="assertive">
+        {{ data.title }} dialogue step 1
+      </p>
       <section
         class="device-qualification-form-page device-qualification-form-step-content">
         <mat-form-field appearance="outline" class="manufacturer-field">
@@ -170,6 +173,9 @@ <h2 class="device-qualification-form-header-title">{{ data.title }}</h2>
         [editable]="true"
         [formGroupName]="step.step"
         [stepControl]="getStep(step.step)">
+        <p class="visually-hidden" role="status" aria-live="assertive">
+          {{ data.title }} dialogue step {{ step.step + 1 }}
+        </p>
         <section class="device-qualification-form-page">
           <h3 class="device-qualification-form-step-title" *ngIf="step.title">
             {{ step.title }}
@@ -188,8 +194,18 @@ <h3 class="device-qualification-form-step-title" *ngIf="step.title">
     </ng-container>
 
     <cdk-step *ngIf="format.length" [editable]="false">
+      <p
+        class="visually-hidden"
+        role="status"
+        aria-live="assertive"
+        aria-describedby="step-heading-description summary-content">
+        {{ data.title }} dialogue last step
+      </p>
+      <p class="visually-hidden" id="step-heading-description">
+        {{ data.title }} dialogue step 4
+      </p>
       <div class="form-content-summary">
-        <section class="device-qualification-form-page">
+        <section class="device-qualification-form-page" id="summary-content">
           <h3 class="device-qualification-form-step-title">Summary</h3>
           <p class="device-qualification-form-step-description">
             <ng-container
@@ -234,14 +250,12 @@ <h3 class="device-qualification-form-step-title">Summary</h3>
                 !deviceHasNoChanges(data.initialDevice, device) &&
                 data.isCreate
               "
-              role="status"
-              aria-live="assertive"
               class="device-qualification-form-instructions">
               <span
                 >Select Save to create your new device. You will then be able to
                 carry on your device testing journey:</span
               >
-              <ul aria-live="off">
+              <ul>
                 <li>
                   Run Testrun against your device until you achieve a compliant
                   result

modules/ui/src/app/pages/devices/devices.component.spec.ts

@@ -161,7 +161,7 @@ describe('DevicesComponent', () => {
           index: 0,
           isCreate: true,
         },
-        autoFocus: true,
+        autoFocus: 'first-tabbable',
         hasBackdrop: true,
         disableClose: true,
         panelClass: 'device-form-dialog',
@@ -191,7 +191,7 @@ describe('DevicesComponent', () => {
             index: 0,
             isCreate: false,
           },
-          autoFocus: true,
+          autoFocus: 'first-tabbable',
           hasBackdrop: true,
           disableClose: true,
           panelClass: 'device-form-dialog',

modules/ui/src/app/pages/devices/devices.component.ts

@@ -159,7 +159,7 @@ export class DevicesComponent
         index,
         isCreate: !isEditDevice,
       },
-      autoFocus: true,
+      autoFocus: 'first-tabbable',
       hasBackdrop: true,
       disableClose: true,
       panelClass: 'device-form-dialog',

modules/ui/src/styles.scss

@@ -365,3 +365,17 @@ button:not(.mat-mdc-button-disabled) {
   cursor: pointer;
   pointer-events: auto;
 }
+
+.visually-hidden {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}