OZG-1414 OZG-3154 Set aria-label at Button tag

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.html

@@ -23,7 +23,7 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button">
+<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button" [attr.aria-label]="buttonLabel">
 	<goofy-client-user-icon [userProfileStateResource]="currentUserResource"></goofy-client-user-icon>
 </button>
 

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.spec.ts

@@ -26,9 +26,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { createEmptyStateResource, createStateResource } from '@goofy-client/tech-shared';
 import { getElementFromDomRoot, getElementFromFixture } from '@goofy-client/test-utils';
 import { UserIconComponent } from '@goofy-client/user-profile';
+import { getUserName, UserProfileResource } from '@goofy-client/user-profile-shared';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { createUserProfileResource } from 'libs/user-profile-shared/test/user-profile';
 import { MockComponent } from 'ng-mocks';
 import { UserProfileInHeaderComponent } from './user-profile-in-header.component';
 
@@ -39,6 +42,8 @@ describe('UserProfileInHeaderComponent', () => {
 	const logoutButton: string = getDataTestIdOf('logout-button');
 	const userIconButton: string = getDataTestIdOf('user-icon-button');
 
+	const userProfile: UserProfileResource = createUserProfileResource();
+
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			declarations: [
@@ -54,6 +59,7 @@ describe('UserProfileInHeaderComponent', () => {
 
 		fixture = TestBed.createComponent(UserProfileInHeaderComponent);
 		component = fixture.componentInstance;
+		component.currentUserResource = createStateResource(userProfile);
 		fixture.detectChanges();
 	});
 
@@ -71,4 +77,22 @@ describe('UserProfileInHeaderComponent', () => {
 			expect(component.logoutEmitter.emit).toHaveBeenCalled();
 		})
 	})
+
+	describe('button', () => {
+		it('should have user name inside aria label', () => {
+			const button: HTMLButtonElement = getElementFromFixture(fixture, userIconButton);
+			const label: string = 'Benutzerkonto von ' + getUserName(component.currentUserResource.resource)
+
+			expect(button).toHaveAttribute('aria-label', expect.stringContaining(label));
+		})
+
+		it('should not have user name inside aria label if no user loaded', () => {
+			const button: HTMLButtonElement = getElementFromFixture(fixture, userIconButton);
+			component.currentUserResource = createEmptyStateResource();
+
+			fixture.detectChanges();
+
+			expect(button).toHaveAttribute('aria-label', expect.stringContaining('Benutzerkonto'));
+		})
+	})
 });

goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.ts

@@ -24,7 +24,7 @@
 
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { StateResource } from '@goofy-client/tech-shared';
-import { UserProfileResource } from '@goofy-client/user-profile-shared';
+import { getUserName, UserProfileResource } from '@goofy-client/user-profile-shared';
 
 @Component({
 	selector: 'goofy-client-user-profile-in-header',
@@ -36,4 +36,13 @@ export class UserProfileInHeaderComponent {
 	@Input() public currentUserResource: StateResource<UserProfileResource>;
 
 	@Output() public logoutEmitter: EventEmitter<void> = new EventEmitter<void>()
+
+	get buttonLabel(): string {
+		const label: string = this.currentUserResource
+			? 'Benutzerkonto von ' + getUserName(this.currentUserResource.resource)
+			: 'Benutzerkonto';
+
+		return label;
+	}
+
 }

goofy-client/libs/navigation/src/test-setup.ts

@@ -22,12 +22,13 @@
 /// unter der Lizenz sind dem Lizenztext zu entnehmen.
 ///
 
+import '@testing-library/jest-dom';
 import 'jest-preset-angular/setup-jest';
 
 import { getTestBed } from '@angular/core/testing';
 import {
 	BrowserDynamicTestingModule,
-	platformBrowserDynamicTesting,
+	platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
 getTestBed().resetTestEnvironment();

goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html

@@ -26,7 +26,7 @@
 <goofy-client-spinner [stateResource]="userProfileStateResource" diameter="30" padding="3">
 	<div [matTooltipDisabled]="disableTooltip" data-test-class="user-profile-icon"
 		[class.initials]="!!userProfileStateResource.resource || userProfileStateResource.error"
-		class="user-profile" [matTooltip]="tooltip" [attr.aria-label]="tooltip">
+		class="user-profile" [matTooltip]="tooltip">
 
 			<ng-container *ngIf="userProfileStateResource.resource; else noUser">
 				<span data-test-class="user-profile-assigned">{{ initials }}</span>