arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added accessibility report page

Browse Source
This commit is contained in:
Erik Tiekstra
2021-09-10 14:02:30 +02:00
parent d7318eb5ae
commit ceee7028b7
15 changed files with 161 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}

5
apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.html Normal file
View File

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

5
apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.scss Normal file
View File

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

29
apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.spec.ts Normal file
View File

@@ -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();
});
});

25
apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.component.ts Normal file
View File

@@ -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;
}
}

18
apps/mina-sidor-fa/src/app/pages/accessibility/accessibility.module.ts Normal file
View File

@@ -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 {}

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

@@ -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">
<markdown src="assets/VERSION.md"></markdown>
</div>
<nav class="footer__nav">
<ul class="footer__nav-list">
<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>

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

@@ -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;
}
}
}

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

@@ -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);
}
}

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

@@ -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 {}

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

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

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

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

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

@@ -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,
];

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

@@ -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);

4
apps/mina-sidor-fa/src/styles/styles.scss
View File

@@ -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');
}
}
}