diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss index 65f68a0a4..b3c8e9885 100644 --- a/modules/ui/src/app/components/device-item/device-item.component.scss +++ b/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; diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html index 120dda797..4bf0e13a5 100644 --- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html +++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html @@ -37,6 +37,9 @@

{{ data.title }}

[title]="data.title + ' modal window'" (selectionChange)="onStepChange($event)"> +

+ {{ data.title }} dialogue step 1 +

@@ -170,6 +173,9 @@

{{ data.title }}

[editable]="true" [formGroupName]="step.step" [stepControl]="getStep(step.step)"> +

+ {{ data.title }} dialogue step {{ step.step + 1 }} +

{{ step.title }} @@ -188,8 +194,18 @@

+

+ {{ data.title }} dialogue last step +

+

+ {{ data.title }} dialogue step 4 +

-
+

Summary

Summary

!deviceHasNoChanges(data.initialDevice, device) && data.isCreate " - role="status" - aria-live="assertive" class="device-qualification-form-instructions"> Select Save to create your new device. You will then be able to carry on your device testing journey: -
    +
    • Run Testrun against your device until you achieve a compliant result diff --git a/modules/ui/src/app/pages/devices/devices.component.spec.ts b/modules/ui/src/app/pages/devices/devices.component.spec.ts index 6de9a01c9..433b312b8 100644 --- a/modules/ui/src/app/pages/devices/devices.component.spec.ts +++ b/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', diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts index ca36125bf..01102407b 100644 --- a/modules/ui/src/app/pages/devices/devices.component.ts +++ b/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', diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index f3db79ba0..56796dfd6 100644 --- a/modules/ui/src/styles.scss +++ b/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; +}