Focus fix; fix profile status icon

modules/ui/src/app/app.store.spec.ts

@@ -71,7 +71,9 @@ describe('AppStore', () => {
     mockNotificationService = jasmine.createSpyObj('mockNotificationService', [
       'notify',
     ]);
-    mockFocusManagerService = jasmine.createSpyObj(['focusTitle']);
+    mockFocusManagerService = jasmine.createSpyObj([
+      'focusFirstElementInContainer',
+    ]);
 
     TestBed.configureTestingModule({
       providers: [
@@ -214,12 +216,14 @@ describe('AppStore', () => {
     });
 
     describe('setFocusOnPage', () => {
-      it('should call focusTitle', fakeAsync(() => {
+      it('should call focusFirstElementInContainer', fakeAsync(() => {
         appStore.setFocusOnPage();
 
         tick(101);
 
-        expect(mockFocusManagerService.focusTitle).toHaveBeenCalled();
+        expect(
+          mockFocusManagerService.focusFirstElementInContainer
+        ).toHaveBeenCalled();
       }));
     });
   });

modules/ui/src/app/app.store.ts

@@ -145,7 +145,7 @@ export class AppStore extends ComponentStore<AppComponentState> {
     return trigger$.pipe(
       delay(100),
       tap(() => {
-        this.focusManagerService.focusTitle();
+        this.focusManagerService.focusFirstElementInContainer();
       })
     );
   });

modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html

@@ -14,30 +14,27 @@
 limitations under the License.
 -->
 <div class="profile-item-container">
-  <span
-    class="profile-item-icon-container"
-    tabindex="0"
-    [attr.aria-label]="profile.status"
-    matTooltip="{{ profile.status }}">
-    <mat-icon
-      *ngIf="profile.status === ProfileStatus.VALID"
-      class="profile-item-icon"
-      fontSet="material-symbols-outlined">
-      check_circle
-    </mat-icon>
-
-    <mat-icon
-      *ngIf="profile.status === ProfileStatus.DRAFT"
-      svgIcon="draft"
-      class="profile-draft-icon"></mat-icon>
-  </span>
-
   <div
     class="profile-item-info"
     role="button"
     tabindex="0"
+    matTooltip="{{ profile.status }}"
     (click)="profileClicked.emit(profile)"
     (keydown.enter)="profileClicked.emit(profile)">
+    <span
+      class="profile-item-icon-container"
+      [attr.aria-label]="profile.status">
+      <mat-icon
+        *ngIf="profile.status === ProfileStatus.VALID"
+        class="profile-item-icon"
+        fontSet="material-symbols-outlined">
+        check_circle
+      </mat-icon>
+      <mat-icon
+        *ngIf="profile.status === ProfileStatus.DRAFT"
+        svgIcon="draft"
+        class="profile-draft-icon"></mat-icon>
+    </span>
     <p
       *ngIf="profile.risk"
       class="profile-item-risk"

modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.scss

@@ -17,6 +17,8 @@
 @import 'src/theming/variables';
 
 $profile-draft-icon-size: 22px;
+$profile-icon-container-size: 24px;
+$profile-item-container-gap: 16px;
 
 :host.selected {
   .profile-item-container {
@@ -26,15 +28,17 @@ $profile-draft-icon-size: 22px;
 
 .profile-item-container {
   display: grid;
-  grid-template-columns: 24px minmax(160px, 1fr) 24px;
-  gap: 16px;
+  grid-template-columns: minmax(160px, 1fr) $profile-icon-container-size;
+  gap: $profile-item-container-gap;
   box-sizing: border-box;
   padding: 12px 16px;
   border-bottom: 1px solid $lighter-grey;
   align-items: center;
+  height: 92px;
 }
 
 .profile-item-icon-container {
+  grid-area: icon;
   display: inline-block;
   width: $profile-draft-icon-size;
   height: $profile-draft-icon-size;
@@ -47,6 +51,15 @@ $profile-draft-icon-size: 22px;
 
 .profile-item-info {
   cursor: pointer;
+  display: grid;
+  grid-template-columns: $profile-icon-container-size 1fr;
+  grid-template-areas:
+    'icon .'
+    'icon .'
+    'icon .';
+  column-gap: $profile-item-container-gap;
+  align-items: center;
+
   p {
     margin: 0;
     font-family: $font-secondary, sans-serif;
@@ -55,6 +68,11 @@ $profile-draft-icon-size: 22px;
     text-overflow: ellipsis;
   }
 
+  ::ng-deep p.profile-item-risk {
+    margin-top: 6px;
+    justify-self: start;
+  }
+
   .profile-item-name {
     font-size: 16px;
     color: $grey-800;

modules/ui/src/app/services/focus-manager.service.spec.ts

@@ -52,30 +52,4 @@ describe('FocusManagerService', () => {
 
     expect(document.activeElement).toBe(testButton);
   });
-
-  describe('#focusTitle', () => {
-    it('should focus title if exists', () => {
-      const title = document.createElement('H2');
-      title.classList.add('title');
-      title.tabIndex = -1;
-      document.querySelector('#main')?.appendChild(title);
-      const element = fixture.nativeElement.querySelector(
-        '#main .title'
-      ) as HTMLHeadingElement;
-
-      service.focusTitle();
-
-      expect(document.activeElement).toBe(element);
-    });
-
-    it('should focus first interactive element on container if title does not exist', () => {
-      const testButton = fixture.nativeElement.querySelector(
-        '#main .test-button'
-      ) as HTMLButtonElement;
-
-      service.focusTitle();
-
-      expect(document.activeElement).toBe(testButton);
-    });
-  });
 });

modules/ui/src/app/services/focus-manager.service.ts

@@ -17,15 +17,6 @@ export class FocusManagerService {
     }
   }
 
-  focusTitle() {
-    const title = window.document.querySelector('.title') as HTMLHeadingElement;
-    if (title) {
-      title.focus();
-    } else {
-      this.focusFirstElementInContainer();
-    }
-  }
-
   private findFirstInteractiveElem(
     parentEl: Document | Element | null
   ): HTMLElement | undefined | null {