MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

add Skip to main content accessibility button

This commit is contained in:
mchouliara 2024-09-27 17:55:23 +03:00
parent 1f06b5121f
commit 2ebff3328f
14 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/app.component.html
View File

@ -1,4 +1,5 @@
<div [class.accessibility-theme]="fontService.isLargeText()"> <div [class.accessibility-theme]="fontService.isLargeText()">
<button class="skip-to-main-content" (click)="skipToMain()" tabindex="1">{{'ALT-TEXT.SKIP-TO-MAIN-CONTENT' | translate}}</button>
<div class="wrapper" *ngIf="!showOnlyRouterOutlet"> <div class="wrapper" *ngIf="!showOnlyRouterOutlet">
<app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar> <app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
<mat-sidenav-container fullscreen class="main-container"> <mat-sidenav-container fullscreen class="main-container">
@ -6,7 +7,7 @@
<app-sidebar></app-sidebar> <app-sidebar></app-sidebar>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content class="sidenav-content"> <mat-sidenav-content class="sidenav-content">
<div id="main-page"> <div id="main-page" tabindex="0">
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet> <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div> </div>
</mat-sidenav-content> </mat-sidenav-content>

12
frontend/src/app/app.component.scss
View File

@ -35,3 +35,15 @@
::ng-deep .mat-chip { ::ng-deep .mat-chip {
height: auto !important; height: auto !important;
} }
.skip-to-main-content {
position: fixed;
left: 999px;
z-index: -1;
&:focus, &:active {
background-color: var(--primary-color);
z-index: 1001;
left: 0px;
color: var(--primary-text);
}
}

5
frontend/src/app/app.component.ts
View File

@ -41,6 +41,7 @@ export class AppComponent implements OnInit, AfterViewInit {
cssConfigLoaded = false; cssConfigLoaded = false;
@ViewChild('sidenav') sidenav: MatSidenav; @ViewChild('sidenav') sidenav: MatSidenav;
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
constructor( constructor(
private router: Router, private router: Router,
@ -263,5 +264,9 @@ export class AppComponent implements OnInit, AfterViewInit {
toggleNavbar(event) { toggleNavbar(event) {
document.getElementById('hamburger').classList.toggle("change"); document.getElementById('hamburger').classList.toggle("change");
} }
skipToMain() {
document.getElementById('main-page')?.focus();
}
} }

3
frontend/src/assets/i18n/baq.json
View File

@ -2606,6 +2606,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/de.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/en.json
View File

@ -2610,6 +2610,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/es.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/gr.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/hr.json
View File

@ -2608,6 +2608,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/pl.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/pt.json
View File

@ -2608,6 +2608,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/sk.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/sr.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }

3
frontend/src/assets/i18n/tr.json
View File

@ -2609,6 +2609,7 @@
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card", "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm", "GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed" "PROGRESS-BAR": "Percentage of the form that is completed",
"SKIP-TO-MAIN-CONTENT": "Skip to main content"
} }
} }