Added accessibility report page

apps/mina-sidor-fa/src/app/app-routing.module.ts

@@ -86,6 +86,14 @@ activeFeatures.forEach(feature => {
         loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule),
       });
       break;
+    case Feature.ACCESSIBILITY_REPORT:
+      routes.push({
+        path: 'tillganglighet',
+        data: { title: 'Tillgänglighetsredogörelsen' },
+        loadChildren: () => import('./pages/accessibility/accessibility.module').then(m => m.AccessibilityModule),
+        canActivate: [AuthGuard],
+      });
+      break;
     default:
       break;
   }

apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.html

@@ -0,0 +1,5 @@
+<msfa-layout>
+  <digi-typography>
+    <section class="accessibility"></section>
+  </digi-typography>
+</msfa-layout>

apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.scss

@@ -0,0 +1,5 @@
+@import 'variables/colors';
+@import 'variables/gutters';
+
+.accessibility {
+}

apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.spec.ts

@@ -0,0 +1,29 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AccessibilityComponent } from './accessibility.component';
+
+describe('AccessibilityComponent', () => {
+  let component: AccessibilityComponent;
+  let fixture: ComponentFixture<AccessibilityComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+        declarations: [AccessibilityComponent],
+        imports: [RouterTestingModule],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccessibilityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Role } from '@msfa-models/role.model';
+import { UserService } from '@msfa-services/api/user.service';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'msfa-accessibility',
+  templateUrl: './accessibility.component.html',
+  styleUrls: ['./accessibility.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccessibilityComponent {
+  userFullName$: Observable<string> = this.userService.user$.pipe(
+    filter(user => !!user),
+    map(userName => userName.fullName)
+  );
+  userRoles$: Observable<Role[]> = this.userService.userRoles$;
+
+  constructor(private userService: UserService) {}
+
+  isAuthorizedUser(userRoles: Role[]): boolean {
+    return !!userRoles.length;
+  }
+}

apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.module.ts

@@ -0,0 +1,18 @@
+import { DigiNgCardModule } from '@af/digi-ng/_card/card';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { AccessibilityComponent } from './accessibility.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [AccessibilityComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: AccessibilityComponent }]),
+    LayoutModule,
+    DigiNgCardModule,
+  ],
+})
+export class AccessibilityModule {}

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

@@ -1,8 +1,19 @@
 <footer class="footer">
   <div class="footer__logo-wrapper">
     <digi-logo af-color="secondary"></digi-logo>
+    <dl class="footer__version" *ngIf="versionInfoVisible">
+      <dt>Aktuell version</dt>
+      <dd><markdown src="assets/VERSION.md"></markdown></dd>
+    </dl>
   </div>
-  <div class="footer__version" *ngIf="showVersion">
+  <nav class="footer__nav">
-    <markdown src="assets/VERSION.md"></markdown>
+    <ul class="footer__nav-list">
-  </div>
+      <li *ngIf="accessibilityReportVisible">
+        <a class="msfa__link msfa__link--light" routerLink="/tillganglighet">Tillgänglighetsredogörelsen</a>
+      </li>
+      <li *ngIf="releasesVisible">
+        <a class="msfa__link msfa__link--light" routerLink="/releases">Senaste releaser</a>
+      </li>
+    </ul>
+  </nav>
 </footer>

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss

@@ -1,20 +1,35 @@
+@import 'mixins/list';
 @import 'variables/gutters';
 
 .footer {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: flex-start;
   background-color: var(--digi--ui--color--background--profile);
   padding: $digi--layout--gutter--l $digi--layout--gutter;
   color: var(--digi--typography--color--text--light);
 
   &__logo-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--s;
     ::ng-deep .digi-logo {
       --digi-logo--padding: 0;
     }
   }
 
+  &__nav-list {
+    @include msfa__reset-list;
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--s;
+  }
+
   &__version {
     font-size: 0.75rem;
+
+    ::ng-deep p {
+      margin: 0;
+    }
   }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Feature } from '@msfa-enums/feature.enum';
 import { environment } from '@msfa-environment';
 
 @Component({
@@ -8,5 +9,15 @@ import { environment } from '@msfa-environment';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
-  showVersion = !environment.production;
+  activeFeatures: Feature[] = environment.activeFeatures;
+
+  get versionInfoVisible(): boolean {
+    return this.activeFeatures.includes(Feature.VERSION_INFO);
+  }
+  get releasesVisible(): boolean {
+    return this.activeFeatures.includes(Feature.RELEASES);
+  }
+  get accessibilityReportVisible(): boolean {
+    return this.activeFeatures.includes(Feature.ACCESSIBILITY_REPORT);
+  }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { MarkdownModule } from 'ngx-markdown';
 import { FooterComponent } from './footer.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [FooterComponent],
-  imports: [CommonModule, MarkdownModule.forChild()],
+  imports: [CommonModule, MarkdownModule.forChild(), RouterModule],
   exports: [FooterComponent],
 })
 export class FooterModule {}

apps/mina-sidor-fa/src/app/shared/constants/navigation.ts

@@ -8,4 +8,5 @@ export const NAVIGATION = {
   'mitt-konto': 'Mitt konto',
   'skapa-personalkonto': 'Skapa personalkonto',
   obehorig: 'Saknar behörigheter',
+  tillganglighet: 'Tillgänglighetsredogörelsen',
 };

apps/mina-sidor-fa/src/app/shared/enums/feature.enum.ts

@@ -6,4 +6,6 @@ export enum Feature {
   MY_ORGANIZATION,
   RELEASES,
   MOCK_LOGIN,
+  VERSION_INFO,
+  ACCESSIBILITY_REPORT,
 }

apps/mina-sidor-fa/src/environments/active-features.ts

@@ -1,6 +1,11 @@
 import { Feature } from '@msfa-enums/feature.enum';
 
-export const ACTIVE_FEATURES_PROD: Feature[] = [Feature.ADMINISTRATION, Feature.MY_ACCOUNT, Feature.MY_ORGANIZATION];
+export const ACTIVE_FEATURES_PROD: Feature[] = [
+  Feature.ADMINISTRATION,
+  Feature.MY_ACCOUNT,
+  Feature.MY_ORGANIZATION,
+  Feature.ACCESSIBILITY_REPORT,
+];
 
 export const ACTIVE_FEATURES_TEST: Feature[] = [
   Feature.ADMINISTRATION,
@@ -9,4 +14,6 @@ export const ACTIVE_FEATURES_TEST: Feature[] = [
   Feature.AVROP,
   Feature.MY_ORGANIZATION,
   Feature.RELEASES,
+  Feature.VERSION_INFO,
+  Feature.ACCESSIBILITY_REPORT,
 ];

apps/mina-sidor-fa/src/styles/mixins/_link.scss

@@ -1,4 +1,4 @@
-@mixin msfa__link($ignore-visited: false) {
+@mixin msfa__link($ignore-visited: false, $theme: 'dark') {
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -7,11 +7,23 @@
   font-weight: var(--digi--typography--font-weight--semibold);
   gap: var(--digi--layout--gutter--xs);
 
+  @if ($theme == 'light') {
+    color: var(--digi--typography--color--text--light);
+
+    &:visited {
+      color: var(--digi--typography--color--text--light);
+
+      &:hover {
+        color: var(--digi--typography--color--text--light);
+      }
+    }
+  }
+
   &:hover {
     text-decoration: underline;
   }
 
-  @if $ignore-visited {
+  @if ($ignore-visited) {
     &:visited {
       color: var(--digi--typography--color--link);
 

apps/mina-sidor-fa/src/styles/styles.scss

@@ -94,10 +94,10 @@ dl {
   }
 
   &__link {
-    @include msfa__link(false);
+    @include msfa__link(false, 'light');
 
     &--ignore-visited:visited {
-      @include msfa__link(true);
+      @include msfa__link(true, 'light');
     }
   }
 }