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

Merge remote-tracking branch 'frag/master'

parents 958e3e19 8276783c
...@@ -49,33 +49,33 @@ ngbuild: ...@@ -49,33 +49,33 @@ ngbuild:
paths: paths:
- "$BUILD_DIR" - "$BUILD_DIR"
#review: review:
# stage: review stage: review
# script: script:
# - rsync -av --delete "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG - rsync -av --delete "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG
# environment: environment:
# name: review/$CI_BUILD_REF_NAME name: review/$CI_BUILD_REF_NAME
# url: http://$CI_BUILD_REF_SLUG.$SERVER_URL url: http://$CI_BUILD_REF_SLUG.$REVIEW_SERVER_URL
# on_stop: stop_review on_stop: stop_review
# only: only:
# - branches - branches
# except: except:
# - master - master
# tags: tags:
# - nginx - nginx
#stop_review: stop_review:
# stage: review stage: review
# script: script:
# - rm -rf "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG - rm -rf "$BUILD_DIR" /srv/nginx/pages/$CI_BUILD_REF_SLUG
# variables: variables:
# GIT_STRATEGY: none GIT_STRATEGY: none
# when: manual when: manual
# environment: environment:
# name: review/$CI_BUILD_REF_NAME name: review/$CI_BUILD_REF_NAME
# action: stop action: stop
# tags: tags:
# - nginx - nginx
deploy: 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.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<diagram program="umlet" version="14.2">
<zoom_level>10</zoom_level>
<element>
<id>UMLPackage</id>
<coordinates>
<x>0</x>
<y>0</y>
<w>1020</w>
<h>600</h>
</coordinates>
<panel_attributes>ARSnova
--
bg=white
layer=-1</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>300</x>
<y>70</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>User</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>240</x>
<y>150</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>Creator</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>380</x>
<y>150</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>Participant</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>350</x>
<y>90</y>
<w>80</w>
<h>80</h>
</coordinates>
<panel_attributes>lt=&lt;&lt;-</panel_attributes>
<additional_attributes>10.0;10.0;10.0;40.0;60.0;40.0;60.0;60.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>280</x>
<y>90</y>
<w>80</w>
<h>80</h>
</coordinates>
<panel_attributes>lt=&lt;&lt;-</panel_attributes>
<additional_attributes>60.0;10.0;60.0;40.0;10.0;40.0;10.0;60.0</additional_attributes>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>240</x>
<y>260</y>
<w>220</w>
<h>50</h>
</coordinates>
<panel_attributes>Room
valign=center</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>300</x>
<y>400</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>Comment</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>340</x>
<y>300</y>
<w>100</w>
<h>120</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
contains &gt;</panel_attributes>
<additional_attributes>10.0;10.0;10.0;100.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>150</x>
<y>300</y>
<w>120</w>
<h>120</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
&lt; contains</panel_attributes>
<additional_attributes>100.0;10.0;100.0;50.0;10.0;50.0;10.0;100.0</additional_attributes>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>110</x>
<y>400</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>Feedback</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>490</x>
<y>400</y>
<w>100</w>
<h>110</h>
</coordinates>
<panel_attributes>Content
valign=center</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>440</x>
<y>300</y>
<w>120</w>
<h>120</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
contains &gt;</panel_attributes>
<additional_attributes>10.0;10.0;10.0;50.0;100.0;50.0;100.0;100.0</additional_attributes>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>670</x>
<y>400</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>Statistics</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>670</x>
<y>440</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>Round</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>430</x>
<y>560</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>TextContent
</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>UMLClass</id>
<coordinates>
<x>550</x>
<y>560</y>
<w>100</w>
<h>30</h>
</coordinates>
<panel_attributes>ChoiceContent</panel_attributes>
<additional_attributes/>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>470</x>
<y>500</y>
<w>80</w>
<h>80</h>
</coordinates>
<panel_attributes>lt=&lt;&lt;-</panel_attributes>
<additional_attributes>60.0;10.0;60.0;40.0;10.0;40.0;10.0;60.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>540</x>
<y>500</y>
<w>80</w>
<h>80</h>
</coordinates>
<panel_attributes>lt=&lt;&lt;-</panel_attributes>
<additional_attributes>10.0;10.0;10.0;40.0;60.0;40.0;60.0;60.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>580</x>
<y>390</y>
<w>110</w>
<h>50</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=1
has &gt;</panel_attributes>
<additional_attributes>10.0;20.0;90.0;20.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>580</x>
<y>430</y>
<w>110</w>
<h>50</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
has &gt;</panel_attributes>
<additional_attributes>10.0;20.0;90.0;20.0</additional_attributes>
</element>
<element>
<type>CustomElementImpl</type>
<coordinates>
<x>470</x>
<y>610</y>
<w>551</w>
<h>331</h>
</coordinates>
<panel_attributes>ARSnova
arsnova frontend
THM, FB MNI, WiSe 2017/2018
https://git.thm.de/swtp-block-ws17/arsnova-angular-frontend
v0.1
keiner
keiner
Domänendiagramm
UMLet v14.2
v2.0
01.03.2018
Lukas Mauß, David Donges, Thomas Groß, Lukas Kimpel
01.03.2018
Lukas Kimpel
lukas.kimpel@mni.thm.de</panel_attributes>
<additional_attributes/>
<custom_code>height=330;
int y=textHeight();
String[] texts = {
"Projekt:",
"Projektbezeichnung:",
"Projektort und -zeitraum:",
"Projekt-Repository:",
"Release:",
"Staging Server:",
"Produktionsserver:",
"UML-Diagrammart:",
"UML-Tool:",
"Modellversion:",
"Erstelldatum:",
"Ersteller/in:",
"Letzte Änderung:",
"Letzter Bearbeiter",
"E-Mail:"
};
drawRectangle(0,0,width,height);
for(int i = 0; i&lt;texts.length;i++) {
drawLine(0,y+5,width,y+5);
drawLine(170,y-20,170,y+5);
y += printLeft(texts[i],y);
y += 5;
}
y=textHeight();
for(String line : textlines) {
y += printRight(line,y) + 5;
}
</custom_code>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>270</x>
<y>170</y>
<w>100</w>
<h>110</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
creates &gt;</panel_attributes>
<additional_attributes>10.0;10.0;10.0;70.0;80.0;70.0;80.0;90.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>290</x>
<y>170</y>
<w>300</w>
<h>250</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
creates &gt;</panel_attributes>
<additional_attributes>10.0;10.0;10.0;50.0;280.0;50.0;280.0;230.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>470</x>
<y>140</y>
<w>450</w>
<h>320</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
creates &gt;</panel_attributes>
<additional_attributes>10.0;20.0;430.0;20.0;430.0;300.0</additional_attributes>
</element>
<element>
<id>Relation</id>
<coordinates>
<x>0</x>
<y>20</y>
<w>490</w>
<h>460</h>
</coordinates>
<panel_attributes>lt=-
m1=1
m2=*
creates &gt;</panel_attributes>