Commit c3643095 authored by Tom Käsler's avatar Tom Käsler

Merge remote-tracking branch 'frag/master'

parents 958e3e19 8276783c
......@@ -49,33 +49,33 @@ ngbuild:
paths:
- "$BUILD_DIR"
#review:
# stage: review
# script:
# - rsync -av --delete "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG
# environment:
# name: review/$CI_BUILD_REF_NAME
# url: http://$CI_BUILD_REF_SLUG.$SERVER_URL
# on_stop: stop_review
# only:
# - branches
# except:
# - master
# tags:
# - nginx
review:
stage: review
script:
- rsync -av --delete "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG
environment:
name: review/$CI_BUILD_REF_NAME
url: http://$CI_BUILD_REF_SLUG.$REVIEW_SERVER_URL
on_stop: stop_review
only:
- branches
except:
- master
tags:
- nginx
#stop_review:
# stage: review
# script:
# - rm -rf "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG
# variables:
# GIT_STRATEGY: none
# when: manual
# environment:
# name: review/$CI_BUILD_REF_NAME
# action: stop
# tags:
# - nginx
stop_review:
stage: review
script:
- rm -rf "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG
variables:
GIT_STRATEGY: none
when: manual
environment:
name: review/$CI_BUILD_REF_NAME
action: stop
tags:
- nginx
deploy:
......
[TOC]
# Making HTML elements a11y
### Example (meeting_room) for Buttons
```html
<button mat-button *ngIf="user && deviceType === 'desktop'" [matMenuTriggerFor]="userMenu" aria-labelledby="meeting_room"></button>
<!--Hidden Div's for a11y-Descriptions-->
<div class="visually-hidden">
<div id="meeting_room">{{'header.a11y-meeting_room' | translate}}</div>
</div>
```
### style.sccs
```scss
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
left: -10000px;
}
```
### Dynamic ARIA labels
Dynamic Aria labels like used in generic components are also possible!
For usage only the `attr.` tag prefix must be added like in following code example:
```html
<button
mat-button
attr.aria-labelledby="{{ ariaPrefix + 'cancel' }}"
...
...
<div id="{{ ariaPrefix + 'cancel'}}">{{ buttonsLabelSection + '.cancel-description' | translate }}</div>
```
@see: [Accessible components: #2 dynamic ARIA labels](https://blog.prototypr.io/accessible-components-2-dynamic-aria-labels-6bf281f26d17)
### Live Announcer
#### To Add Live Announcer you need to import:
``import { LiveAnnouncer } from '@angular/cdk/a11y';``
##### And add to the constructor:
```typescript
constructor(
...
private liveAnnouncer: LiveAnnouncer) {
...
}
```
#### You also need to add to the `ngOnInit()` - Function:
```typescript
ngOnInit() {
...
this.announce();
}
```
#### And this is the function to start the announcement:
```typescript
public announce() {
this.liveAnnouncer.announce('Willkommenstext', 'assertive');
}
```
#### Problems with JAWS and Microsoft Speech
JAWS and Microsoft Speech cannot play the "title" attributes. Only NVDA plays the "title" attribute.
Attribute "aria-label" does not work with multi-language titles, voice output reads registered string directly 1 to 1.
`aria-labelledby` works finde with Microsoft Speech, JAWS and NVDA. If "title" attribute is additionally set, NVDA plays the text twice.
### Keyboard Shortcut
To enter Keyboard Shortcuts you first need to import `Renderer2`, `InDestroy` and the `EventService` form `angular/core`:
```typescript
import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { EventService } from '../../../services/util/event.service';
```
After that you also need to add it to the constructor
```typescript
constructor(
...
private eventService: EventService,
private _r: Renderer2){
...
}
}
```
When this is done you need to add a listener to the ``ngOnInit()`` function.
Example:
```typescript
ngOnInit() {
...
// But first you need to add a variable:
listenerFn: () => void;
// listenerFn is for closing the listener in the ngOnDestroy() function when leaving the page
// Example of start-page
this.listenerFn = this._r.listen(document, 'keyup', (event) => {
if (event.keyCode === 49 && this.eventService.focusOnInput === false) {
document.getElementById('session_id-input').focus();
} else if (event.keyCode === 51 && this.eventService.focusOnInput === false) {
document.getElementById('new_session-button').focus();
} else if (event.keyCode === 52 && this.eventService.focusOnInput === false) {
document.getElementById('language-menu').focus();
} else if ((event.keyCode === 57 || event.keyCode === 27) && this.eventService.focusOnInput === false) {
this.announce();
} else if (event.keyCode === 27 && this.eventService.focusOnInput === true) {
document.getElementById('session_enter-button').focus();
}
});
}
// HTML Code:
<button id="session_enter-button" ...>
...
</button>
// 'focusOnInput' is a boolean variable which should be triggered when an input element is focused and unfocused
// Example of room-join.component.html
<input id="session_id-input" matInput #roomId (focus)="eventService.makeFocusOnInputTrue()"
(blur)="eventService.makeFocusOnInputFalse()"
.../>
// ngOnDestroy function for closing the listener when leaving the page
ngOnDestroy() {
this.listenerFn();
}
```
## HTML5 Accessibility: aria-hidden and role=”presentation”
A page about `aria-hidden` and `role="presentation"` attribute usage tests:
Source: [HTML5 Accessibility: aria-hidden and role=”presentation”](http://john.foliot.ca/aria-hidden/)
This diff is collapsed.
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<diagram program="umlet" version="14.2">
<zoom_level>13</zoom_level>
<element>
<id>UMLActor</id>
<coordinates>
<x>0</x>
<y>208</y>
<w>104</w>
<h>156</h>
</coordinates>
<panel_attributes>Participant
</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>65</x>
<y>221</y>
<w>442</w>
<h>104</h>
</coordinates>
<panel_attributes/>
<additional_attributes>10.0;10.0;320.0;60.0</additional_attributes>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>884</x>
<y>208</y>
<w>182</w>
<h>52</h>
</coordinates>
<panel_attributes>join created
room</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>676</x>
<y>481</y>
<w>156</w>
<h>65</h>
</coordinates>
<panel_attributes>create content
for room</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>520</x>
<y>65</y>
<w>156</w>
<h>52</h>
</coordinates>
<panel_attributes>give a
comment</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>481</x>
<y>169</y>
<w>156</w>
<h>65</h>
</coordinates>
<panel_attributes>show content
in room</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>377</x>
<y>715</y>
<w>156</w>
<h>52</h>
</coordinates>
<panel_attributes>see feedback</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>975</x>
<y>611</y>
<w>208</w>
<h>65</h>
</coordinates>
<panel_attributes>see answer statistics</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>806</x>
<y>507</y>
<w>195</w>
<h>156</h>
</coordinates>
<panel_attributes>lt=.&gt;
&lt;&lt;extends&gt;&gt;</panel_attributes>
<additional_attributes>130.0;100.0;10.0;17.0</additional_attributes>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>1001</x>
<y>468</y>
<w>169</w>
<h>78</h>
</coordinates>
<panel_attributes>start new
voting round</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>819</x>
<y>481</y>
<w>208</w>
<h>52</h>
</coordinates>
<panel_attributes>lt=.&gt;
&lt;&lt;extends&gt;&gt;</panel_attributes>
<additional_attributes>140.0;20.0;10.0;20.0</additional_attributes>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>156</x>
<y>13</y>
<w>156</w>
<h>39</h>
</coordinates>
<panel_attributes>ARSnova</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLActor</id>
<coordinates>
<x>0</x>
<y>546</y>
<w>78</w>
<h>156</h>
</coordinates>
<panel_attributes>Creator
</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>156</x>
<y>13</y>
<w>1144</w>
<h>949</h>
</coordinates>
<panel_attributes>
</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>481</x>
<y>273</y>
<w>156</w>
<h>52</h>
</coordinates>
<panel_attributes>give feedback
</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>416</x>
<y>598</y>
<w>156</w>
<h>52</h>
</coordinates>
<panel_attributes>create room
</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>26</x>
<y>559</y>
<w>416</w>
<h>91</h>
</coordinates>
<panel_attributes/>
<additional_attributes>300.0;50.0;10.0;10.0</additional_attributes>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>663</x>
<y>637</y>
<w>156</w>
<h>52</h>
</coordinates>
<panel_attributes>login</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>546</x>
<y>624</y>
<w>143</w>
<h>65</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>90.0;30.0;10.0;10.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>663</x>
<y>78</y>
<w>247</w>
<h>169</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>10.0;10.0;170.0;110.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>624</x>
<y>195</y>
<w>286</w>
<h>65</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>10.0;10.0;200.0;30.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>624</x>
<y>234</y>
<w>286</w>
<h>91</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>10.0;50.0;200.0;10.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>52</x>
<y>507</y>
<w>650</w>
<h>78</h>
</coordinates>
<panel_attributes/>
<additional_attributes>10.0;40.0;480.0;10.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>520</x>
<y>533</y>
<w>260</w>
<h>91</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>10.0;50.0;180.0;10.0</additional_attributes>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>429</x>
<y>832</y>
<w>156</w>
<h>78</h>
</coordinates>
<panel_attributes>see participant's
comments</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>39</x>
<y>598</y>
<w>416</w>
<h>286</h>
</coordinates>
<panel_attributes/>
<additional_attributes>10.0;10.0;300.0;200.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>39</x>
<y>585</y>
<w>364</w>
<h>182</h>
</coordinates>
<panel_attributes/>
<additional_attributes>10.0;10.0;260.0;120.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>520</x>
<y>637</y>
<w>117</w>
<h>130</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>10.0;10.0;10.0;80.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>65</x>
<y>195</y>
<w>455</w>
<h>52</h>
</coordinates>
<panel_attributes/>
<additional_attributes>10.0;20.0;330.0;20.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>65</x>
<y>78</y>
<w>481</w>
<h>156</h>
</coordinates>
<panel_attributes/>
<additional_attributes>10.0;100.0;350.0;10.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>533</x>
<y>624</y>
<w>130</w>
<h>273</h>
</coordinates>
<panel_attributes>lt=&lt;.
&lt;&lt;include&gt;&gt;</panel_attributes>
<additional_attributes>10.0;10.0;40.0;190.0</additional_attributes>
</element>
<element>
<id>UMLUseCase</id>
<coordinates>
<x>338</x>
<y>26</y>
<w>182</w>
<h>52</h>
</coordinates>
<panel_attributes>give answer
to a content</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>403</x>
<y>65</y>
<w>156</w>
<h>156</h>
</coordinates>
<panel_attributes>lt=.&gt;
&lt;&lt;extends&gt;&gt;</panel_attributes>
<additional_attributes>60.0;100.0;10.0;10.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>65</x>
<y>65</y>
<w>351</w>
<h>156</h>
</coordinates>
<panel_attributes/>
<additional_attributes>250.0;10.0;10.0;100.0</additional_attributes>
</element>
</diagram>
......@@ -3,6 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './components/shared/page-not-found/page-not-found.component';
import { HomePageComponent } from './components/home/home-page/home-page.component';