interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add global skip link 

Don't use routerLink as some pages react on route params changes
Prefer to programmatically focus the main content if we can
This commit is contained in:
Chocobozzz 2023-10-09 10:07:03 +02:00
parent bd4b321b0b
commit f47762c60b
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/app.component.html
View File

@ -1,5 +1,7 @@
<div *ngIf="customCSS" [innerHTML]="customCSS"></div> <div *ngIf="customCSS" [innerHTML]="customCSS"></div>
<a i18n class="visually-hidden-focusable skip-to-content" href="#content" (click)="$event.preventDefault(); mainContent.focus()">Skip to main content</a>
<my-hotkeys-cheatsheet (hotkeysModalStateChange)="onHotkeysModalStateChange($event)"></my-hotkeys-cheatsheet> <my-hotkeys-cheatsheet (hotkeysModalStateChange)="onHotkeysModalStateChange($event)"></my-hotkeys-cheatsheet>
<div <div
@ -30,7 +32,7 @@
<div class="sub-header-container"> <div class="sub-header-container">
<my-menu id="left-menu" role="navigation" aria-label="Main menu" i18n-ariaLabel [hidden]="!menu.isMenuDisplayed"></my-menu> <my-menu id="left-menu" role="navigation" aria-label="Main menu" i18n-ariaLabel [hidden]="!menu.isMenuDisplayed"></my-menu>
<main id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }"> <main #mainContent tabindex="-1" id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
<div class="main-row"> <div class="main-row">

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

@ -1,6 +1,18 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.skip-to-content {
position: absolute;
top: 0;
display: block;
z-index: z(modal);
width: 100%;
background: pvar(--mainBackgroundColor);
padding: 1rem;
text-align: center;
text-decoration: underline;
}
.peertube-container { .peertube-container {
padding-bottom: 20px; padding-bottom: 20px;