Merge pull request #166 in TEA/mina-sidor-fa-web from bugfix/TV-647-ikoner-utan-text-far-inte-vara-betydelsebarande to develop

Squashed commit of the following:

commit 72fe0460be679ccbd89987a9a6b167c78cf1f950
Merge: 844a9447 3d941fdd
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Oct 6 10:21:33 2021 +0200

    Merge branch 'develop' into bugfix/TV-647-ikoner-utan-text-far-inte-vara-betydelsebarande

commit 844a9447e3729e5d75df68eba893ff12a5dcd32e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Oct 6 10:21:26 2021 +0200

    Amends

commit c601e1a02fa9b7976ee071e93b0c6623dd89588e
Merge: 9f979e12 5cee9695
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Oct 5 15:01:37 2021 +0200

    Merge branch 'develop' into bugfix/TV-647-ikoner-utan-text-far-inte-vara-betydelsebarande

commit 9f979e12243328cdf5fbb19ee178115dcffbda12
Merge: a16b6c27 07ec3c4a
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Oct 5 11:10:36 2021 +0200

    Merge branch 'develop' into bugfix/TV-647-ikoner-utan-text-far-inte-vara-betydelsebarande

commit a16b6c27d86f6c1442bc725485e5ebc1c532a6f5
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Oct 5 11:03:36 2021 +0200

    - Changed additional text to be more detailed and only accessible for screen-readers
    - Created a mixin for screen-reader only (sr-only)
    - reverted back accessibillity for selected organization for screen readers

commit 253c64998d7b3ab8415af35a3d27423c69980d75
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Oct 4 16:44:04 2021 +0200

    Changed title to aria-labelledby

commit 9ef22ec8f861a90c49d30ad1b1ab6e76082168a9
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Oct 4 16:24:10 2021 +0200

    Amends after PR

commit a5dc1afc4c2bed922ddb5dcb29ee2dc5a0e43318
Merge: 7577640e d139f750
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Mon Oct 4 13:07:38 2021 +0200

    Merge branch 'develop' into bugfix/TV-647-ikoner-utan-text-far-inte-vara-betydelsebarande

commit 7577640e80b4fc17be54d9fe9235abc3f1b792d4
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Oct 1 14:08:44 2021 +0200

    Accessibility adaptation

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.html

@@ -48,12 +48,15 @@
           <p>Här kan du se personalkontots behörigheter.</p>
         </div>
         <div class="employee-card__block">
-          <h3>Tjänst</h3>
+          <h3 id="employee-card__tjanst-heading">Tjänst</h3>
-          <ul class="employee-card__list" *ngIf="employee.tjanster.length">
+          <ul class="employee-card__list" aria-labelledby="employee-card__tjanst-heading" *ngIf="employee.tjanster.length">
             <li *ngFor="let tjanst of employee.tjanster">
               <digi-icon-check-circle
                 class="employee-card__authorization-icon employee-card__authorization-icon--authorized"
               ></digi-icon-check-circle>
+              <span class="msfa__a11y-sr-only">
+                {{ 'systemanvändaren har behörighet för tjänsten ' }}
+              </span>
               {{ tjanst.name }}
             </li>
           </ul>
@@ -103,16 +106,16 @@
           </ng-template>
         </div>
         <div class="employee-card__block">
-          <h3>Roller</h3>
+          <h3 id="employee-card__roller-heading">Roller</h3>
           <p>
             Här ser du systemanvändarens tilldelade roller. Rollen "Administrera behörigheter" gäller för hela
             organisationen medan de andra rollerna är begränsade till de utförande verksamheter och adresser som du
             tilldelat systemanvändaren. <msfa-roles-dialog></msfa-roles-dialog>
           </p>
-          <ul class="employee-card__list">
+          <ul class="employee-card__list" aria-labelledby="employee-card__roller-heading">
             <li *ngFor="let role of allRoles">
               <digi-icon-check-circle
-                *ngIf="employee.roles.includes(role.type); else unauthorized"
+                *ngIf="hasAccess(employee, role); else unauthorized"
                 class="employee-card__authorization-icon employee-card__authorization-icon--authorized"
               ></digi-icon-check-circle>
               <ng-template #unauthorized>
@@ -120,7 +123,10 @@
                   class="employee-card__authorization-icon employee-card__authorization-icon--unauthorized"
                 ></digi-icon-x-button>
               </ng-template>
-              {{role.name}}
+              <span class="msfa__a11y-sr-only">
+                {{ hasAccess(employee, role) ? 'systemanvändaren har behörighet för rollen ' : 'systemanvändaren saknar behörighet för rollen ' }}
+              </span>
+              {{ role.name }}
             </li>
           </ul>
         </div>

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-card/employee-card.component.ts

@@ -51,4 +51,8 @@ export class EmployeeCardComponent implements OnDestroy {
       this.accordionsExpanded.push(currentId);
     }
   }
+
+  hasAccess(employee: Employee, role: Role): boolean{
+    return employee.roles.includes(role.type);
+  }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/navigation/navigation.component.html

@@ -10,7 +10,7 @@
   </div>
   <ul class="navigation__list msfa__hide-on-print" *ngIf="user">
     <li class="navigation__item" *ngIf="myAccountVisible">
-      <a routerLink="/mitt-konto" class="navigation__link">
+      <a routerLink="/mitt-konto" aria-label="Mitt konto" class="navigation__link">
         <msfa-icon [icon]="iconType.USER" size="l"></msfa-icon>
         <span class="navigation__text">{{ user.fullName }}</span>
       </a>