From 395cb7927cc98caf16adec2768c2e48116f3a6d1 Mon Sep 17 00:00:00 2001 From: kurilova Date: Thu, 27 Mar 2025 15:08:59 +0000 Subject: [PATCH 1/3] Fix a11y issues on Risk Profiles page --- modules/ui/src/app/app.component.ts | 13 +++++++++++++ .../components/list-item/list-item.component.scss | 3 +++ .../list-layout/list-layout.component.scss | 4 ++++ .../side-button-menu.component.scss | 11 +++++++++++ .../profile-form/profile-form.component.html | 10 ++++++++-- .../profile-form/profile-form.component.ts | 3 --- 6 files changed, 39 insertions(+), 5 deletions(-) diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index 857959aba..19c64d948 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -22,6 +22,8 @@ import { inject, ViewChild, ChangeDetectorRef, + Renderer2, + HostListener, } from '@angular/core'; import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; import { DomSanitizer } from '@angular/platform-browser'; @@ -119,6 +121,7 @@ export class AppComponent implements AfterViewInit { private testRunService = inject(TestRunService); private cdr = inject(ChangeDetectorRef); appStore = inject(AppStore); + private renderer = inject(Renderer2); public readonly CalloutType = CalloutType; public readonly StatusOfTestrun = StatusOfTestrun; @@ -133,6 +136,16 @@ export class AppComponent implements AfterViewInit { deviceTipTarget!: HTMLElement; isClosedTip = false; + @HostListener('mousedown') + onMousedown() { + this.renderer.addClass(document.body as HTMLElement, 'using-mouse'); + } + + @HostListener('keydown') + onKeydown() { + this.renderer.removeClass(document.body as HTMLElement, 'using-mouse'); + } + navigateToRuntime = () => { this.route.navigate([Routes.Testing]); this.appStore.setIsOpenStartTestrun(); diff --git a/modules/ui/src/app/components/list-item/list-item.component.scss b/modules/ui/src/app/components/list-item/list-item.component.scss index ae8fcb418..71f40550d 100644 --- a/modules/ui/src/app/components/list-item/list-item.component.scss +++ b/modules/ui/src/app/components/list-item/list-item.component.scss @@ -42,4 +42,7 @@ .list-item-menu-item { padding: 16px 24px; + &.cdk-mouse-focused::before { + content: none; + } } diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.scss b/modules/ui/src/app/components/list-layout/list-layout.component.scss index 9e0fe1bc2..7f3b8549d 100644 --- a/modules/ui/src/app/components/list-layout/list-layout.component.scss +++ b/modules/ui/src/app/components/list-layout/list-layout.component.scss @@ -106,6 +106,10 @@ } } +::ng-deep .using-mouse .search-field input:focus { + outline: none; +} + .entity-list { display: grid; grid-template-columns: 1fr; diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.scss b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.scss index 2e73d07b1..9fafcf71a 100644 --- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.scss +++ b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.scss @@ -46,6 +46,17 @@ grid-template-columns: min-content auto; } +::ng-deep .using-mouse .side-add-menu-button { + &.cdk-mouse-focused, + &.cdk-program-focused { + background: inherit !important; + } + &.cdk-mouse-focused::before, + &.cdk-program-focused::before { + content: none; + } +} + .side-add-menu-button-description { color: colors.$on-surface-variant; font-family: variables.$font-text; diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html index 650326800..20c1f6096 100644 --- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html +++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html @@ -15,12 +15,18 @@ -->
-

Profile name *

+ - + Required for saving a profile Date: Thu, 27 Mar 2025 16:12:16 +0000 Subject: [PATCH 2/3] Fix selector --- .../ui/src/app/pages/risk-assessment/risk-assessment.store.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts index 0e1a35bd1..b2df19759 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts @@ -121,7 +121,7 @@ export class RiskAssessmentStore extends ComponentStore { return trigger$.pipe( tap(() => { this.focusManagerService.focusFirstElementInContainer( - window.document.querySelector('.profiles-drawer-content .selected') + window.document.querySelector('.entity-list .selected') ); }) ); From 4f4f1cb0d1c149bd39e01dee510b7b6fe32b2df3 Mon Sep 17 00:00:00 2001 From: kurilova Date: Thu, 27 Mar 2025 16:15:39 +0000 Subject: [PATCH 3/3] Fix selector --- .../ui/src/app/pages/risk-assessment/risk-assessment.store.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts index b2df19759..46d9a0f43 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts @@ -111,7 +111,7 @@ export class RiskAssessmentStore extends ComponentStore { delay(10), tap(() => { this.focusManagerService.focusFirstElementInContainer( - window.document.querySelector('.risk-assessment-content-empty') + window.document.querySelector('.content-empty') ); }) );