Merge branch...

Merge branch '387-providing-link-text-that-describes-the-purpose-of-a-link-for-anchor-elements' into 'master'

Resolve "Providing link text that describes the purpose of a link for anchor elements"

Closes #387

See merge request arsnova/frag.jetzt!404

src/assets/i18n/data-protection/data-protection-de.html

@@ -71,11 +71,14 @@
     dieser Daten.
 
     Bei Unklarheiten oder Anregungen wende dich an folgende E-Mail-Adresse oder an die im Impressum angegebenen
-    Kontaktdaten: <a href = "mailto:klaus.quibeldey-cirkel@transmit.de">klaus.quibeldey-cirkel&shy;@transmit.de</a>
+    Kontaktdaten: <br><a class="info" href="mailto:klaus.quibeldey-cirkel@transmit.de">klaus.quibeldey-cirkel&shy;@transmit.de
+      <span>Öffnet dein Mailprogramm</span></a>
+
   </p>
 
 <h3>Verzeichnis von Ver&shy;arbeitungs&shy;tätig&shy;kei&shy;ten</h3>
-  <p>Eine Übersicht über die in »frag.jetzt« verarbeiteten personenbezogenen Daten findest du im Projektarchiv unter <a href="https://git.thm.de/arsnova/frag.jetzt">https://git.thm.de/&shy;arsnova/&shy;frag.jetzt</a>.
+  <p>Eine Übersicht über die in »frag.jetzt« verarbeiteten personenbezogenen Daten findest du im <a class="info" href="https://git.thm.de/arsnova/frag.jetzt" target="_blank">Projektarchiv
+    von frag.jetzt<span>Öffnet neues Fenster</span></a>.
   </p>
 
 <h3>Änderungen der Daten&shy;schutz&shy;er&shy;klärung</h3>

src/assets/i18n/data-protection/data-protection-en.html

@@ -48,11 +48,13 @@
 </p>
 
 <h3>Right to object and right to information </h3>
-<p>You have the right at any time to free information about your stored personal data, their origin and recipient, the purpose of data processing and a right to correction, blocking or deletion of this data. In case of ambiguities or suggestions, please contact the following e-mail address or the contact details given in the imprint: <a href = "mailto:klaus.quibeldey-cirkel@transmit.de">klaus.quibeldey-cirkel&shy;@transmit.de</a>
+<p>You have the right at any time to free information about your stored personal data, their origin and recipient, the purpose of data processing and a right to correction, blocking or deletion of this data. In case of ambiguities or suggestions, please contact the following e-mail address or the contact details given in the imprint: <a
+  class="info" href="mailto:klaus.quibeldey-cirkel@transmit.de">klaus.quibeldey-cirkel&shy;@transmit.de <span>Opens mail agent</span></a>
+
 </p>
 
 <h3>Directory of processing activities </h3>
-<p>You can find an overview of the personal data processed in »frag.jetzt« in the repository at <a href="https://git.thm.de/arsnova/frag.jetzt">git.thm.de/&shy;arsnova/&shy;frag.jetzt</a>.
+<p>You can find an overview of the personal data processed in »frag.jetzt« in the repository in the <a class="info" href="https://git.thm.de/arsnova/frag.jetzt">frag.jetzt repository<span>Opens external link</span></a>.
 </p>
 
 <h3>Changes to the Data Protection & Privacy Policy</h3>

src/assets/i18n/demo/demo-de.html

@@ -7,8 +7,8 @@
 
   <p>Wem daran liegt, dass seine Vorlesung reflektiert und
     hinterfragt wird, braucht ein Tool zum anonymen stillen Fragenstellen.
-    Ein solches <a href="https://github.com/thm-projects/frag.jetzt" target="_blank"> Open-Source-Tool</a> steht mit
-    »frag.jetzt« kostenlos zur freien Verfügung. Gibt es Bedenken? Ist das Tool barrierefrei, daten&shy;schutz&shy;kon&shy;form,
+    Ein solches <a class="info" href="https://github.com/thm-projects/frag.jetzt" target="_blank">
+      Open-Source-Tool<span>Öffnet neue Seite</span></a>steht mit »frag.jetzt« kostenlos zur freien Verfügung. Gibt es Bedenken? Ist das Tool barrierefrei, daten&shy;schutz&shy;kon&shy;form,
     sofort ohne Einarbeitung und ohne technisches Verständnis mit jedem Endgerät nutzbar? Dreimal ja.</p>
 
   <p>Wenn ich »frag.jetzt« anonym und somit ohne soziale Kontrolle verwenden lasse, lade ich dann nicht auch zum
@@ -68,7 +68,7 @@
   <p>
     Die Nutzung des Smartphones während der Vorlesung bringt natürlich ein hohes Ablenkungsrisiko mit sich.
     Wir haben aus unserer langjährigen Erfahrung mit Audience-Response-Systemen im Hörsaal gelernt
-    (siehe unser <a href="https://arsnova.thm.de/blog/" target="_blank">ARSnova-Projekt</a>),
+    (siehe unser <a class="info" href="https://arsnova.thm.de/blog/" target="_blank">ARSnova-Projekt<span>Öffnet neue Seite</span></a>),
     wie man das Ablenkungsrisiko didaktisch angehen kann:
   </p>
 
@@ -153,7 +153,7 @@
 <p tabindex="0">Mit einem Klick auf das Zahnrad-Icon öffnest du die Verwaltungs&shy;optionen:</p>
 <ol tabindex="0">
   <li>Sitzung: Hier kannst du den Namen der Sitzung ändern und eine Beschreibung hinzufügen.
-    Für die Textformatierung steht dir <a href="https://de.wikipedia.org/wiki/Markdown" target="_blank">Markdown</a> zur
+      Für die Textformatierung steht dir <a class="info" href="https://de.wikipedia.org/wiki/Markdown" target="_blank">Markdown<span>Öffnet neue Seite</span></a> zur Verfügung.
     Verfügung.
     Hier ist auch der Ort, um die Sitzung mit allen Fragen und Bewertungen zu löschen.
   </li>
@@ -255,7 +255,7 @@
 <p tabindex="0">
   Verwende den Sitzungs-Code 11 22 33 44 für Fragen an die Entwickler.
   Können wir deine Fragen mit Ja oder Nein beantworten, so erhältst du zeitnah eine Antwort in der App.
-  Offene Fragen beantworten wir im <a href="https://arsnova.thm.de/blog/frag-jetzt/" target="_blank">ARSnova-Blog</a>.
+    Offene Fragen beantworten wir im <a class="info" href="https://arsnova.thm.de/blog/frag-jetzt/" target="_blank">ARSnova-Blog<span>Öffnet neue Seite</span></a>.
 </p>
 
 <h2 tabindex="0">»Gender«-gerechte Sprache</h2>
@@ -263,13 +263,13 @@
 <p tabindex="0">
   Screen Reader für Sehbehinderte und Blinde,
   wie <a
-  href="https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=de"
-  target="_blank">ChromeVox</a>
-  (»frag.jetzt« wurde hierfür optimiert)
-  oder <a href="https://www.nvaccess.org/" target="_blank">NVDA</a>,
+    class="info"
+    href="https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=de" target="_blank">ChromeVox<span>Öffnet neue Seite</span>
+    (»frag.jetzt« wurde hierfür optimiert)</a>
+    oder <a class="info" href="https://www.nvaccess.org/" target="_blank">NVDA<span>Öffnet neue Seite</span></a>,
   sprechen »gegenderte« Nomen unverständlich aus.
-  Wir verwenden deshalb das <a href="https://de.wikipedia.org/wiki/Generisches_Maskulinum" target="_blank"
-                               rel="noreferrer">Generische
-  Maskulinum</a> für Texte und Labels in der App.
+    Wir verwenden deshalb das  Wir verwenden deshalb das <a class="info" href="https://de.wikipedia.org/wiki/Generisches_Maskulinum"
+                                                            rel="noreferrer" target="_blank">Generische
+      Maskulinum <span>Öffnet neue Seite</span></a> für Texte und Labels in der App.
 </p>
 

src/assets/i18n/demo/demo-en.html

@@ -8,8 +8,8 @@
     the course of the lecture are forgotten.
 
   <p>Those who want their lecture to be reflected upon and questioned need a
-    tool for anonymously asking questions. Such an <a href="https://github.com/thm-projects/frag.jetzt" target="_blank">Open
-      Source</a> tool is available free of charge with »frag.jetzt«. Are
+    tool for anonymously asking questions. Such an <a class= info href="https://github.com/thm-projects/frag.jetzt" target="_blank">Open
+      Source<span>Opens new window</span></a> tool is available free of charge with »frag.jetzt«. Are
     there any concerns? Is the tool accessible, compliant with the data protection regulations, immediately usable with
     any end device without any training or technical understanding? Three times yes.</p>
 
@@ -76,7 +76,7 @@
   <p>
     The use of the smartphone during the lecture naturally entails a high risk of distraction.
     We have learned from our many years of experience with audience response systems in lecture halls,
-    see our <a href="https://arsnova.thm.de/blog/en/homepage/" target="_blank">ARSnova Project</a>,
+    see our <a class="info" href="https://arsnova.thm.de/blog/en/homepage/" target="_blank">ARSnova Project <span>Opens new window</span></a>,
     how to didactically approach the risk of distraction:
   </p>
 
@@ -162,7 +162,7 @@
 <p tabindex="0">Click on the gearwheel icon to open the management options:</p>
 <ol tabindex="0">
   <li>Session: Here you can change the name of the session and add a description.
-    You can use <a href="https://en.wikipedia.org/wiki/Markdown" target="_blank">Markdown</a> for text formatting.
+      You can use <a class="info" href="https://en.wikipedia.org/wiki/Markdown" target="_blank">Markdown <span>Opens new window</span></a> for text formatting.
     This is also the place to delete the session with all questions and ratings.
   </li>
   <li><p>Questions:</p>
@@ -268,7 +268,7 @@
 <p tabindex="0">
   Use session key 11 22 33 44 for questions to the developers.
   If we can answer yes or no to your questions, you will receive a prompt answer in the app.
-  Other qestions will be answered in the <a href="https://arsnova.thm.de/blog/frag-jetzt/" target="_blank">ARSnova
-  blog</a>.
+  Other qestions will be answered in the <a class="info" href="https://arsnova.thm.de/blog/frag-jetzt/" target="_blank">ARSnova
+  blog <span>Opens new window</span></a>.
 
 </p>

src/assets/i18n/imprint/imprint-de.html

@@ -5,7 +5,7 @@
       »frag.jetzt« wird vom Land Hessen im Rahmen des <abbr title="Hessisches Ministerium für Wissenschaft und Kunst">
       HMWK
     </abbr>-Verbundprojekts
-      <a href="https://www.digll-hessen.de/de" target="_blank">»Digital gestütztes Lehren und Lernen in Hessen«</a>
+      <a href="https://www.digll-hessen.de/de" class="info" target="_blank">»Digital gestütztes Lehren und Lernen in Hessen« <span>Öffnet neues Fenster</span></a>
       (digLL) gefördert.<br>
       <br>
     </p>
@@ -22,7 +22,7 @@
 
     <p>
       <a href="https://arsnova.thm.de/blog/wp-content/uploads/2019/09/Projektantrag-DigLL@THM-frag_jetzt.pdf"
-         target="_blank">Projektskizze zu »frag.jetzt«</a>
+         target="_blank" class="info">Projektskizze zu »frag.jetzt« <span>Öffnet neues Fenster</span></a>
     </p>
 
     <ars-row [height]="50"></ars-row>
@@ -39,7 +39,7 @@
       Konformitätsstatus
     </h2>
     <p>
-      Die <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a>
+      Die <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" class="info">Web Content Accessibility Guidelines (WCAG) <span>Öffnet neues Fenster</span></a>
       definieren Anforderungen an Designer und Entwickler, um den Zugang für Menschen mit Behinderungen zu verbessern.
       Es definiert drei Stufen der Konformität: Level A, Level AA und Level AAA. »frag.jetzt« ist teilweise konform mit
       WCAG 2.1 Level AA. Teilkonform bedeutet, dass einige Teile des Inhalts nicht vollständig dem Standard für
@@ -55,15 +55,15 @@
         <br>
       Telefon: +49 641 309-2450 <br><br>
         Mail:
-        <a class="email u-email"
+        <a class="email u-email info"
            href="mailto:test@test.deklaus.quibeldey-cirkel@transmit.de.klaus.quibeldey-cirkel@transmit.de.">
-          klaus.quibeldey-cirkel@transmit.de.
+          klaus.quibeldey-cirkel@transmit.de. <span>Öffnet neues Fenster</span>
         </a>
     </p>
     <ars-row [height]="50"></ars-row>
     <h2>Betreiber von »frag.jetzt«</h2>
     <p>
-      Der Betrieb der <a href="https://github.com/thm-projects/frag.jetzt" target="_blank">Open-Source-Webanwendung</a>
+      Der Betrieb der <a href="https://github.com/thm-projects/frag.jetzt" target="_blank" class="info">Open-Source-Webanwendung <span>Öffnet neues Fenster</span></a>
       »frag.jetzt« ist eine kostenlose Dienstleistung
       (»Soft&shy;ware as a Service«) der TransMIT-Gesellschaft für
       Technologietransfer mbH, Projektbereich für mobile An&shy;wen&shy;dun&shy;gen.<br>
@@ -79,11 +79,11 @@
       Wiesenstraße 14<br>
       D-35390 Gießen<br>
       <br>
-      Telefon: <a href="tel:+49 641 309-2450">+49 641 309-2450</a><br>
-      Mail: <a href="mailto:klaus.quibeldey-cirkel@transmit.de">klaus.quibeldey-cirkel@transmit.de</a>.<br>
+      Telefon: <a href="tel:+49 641 309-2450" class="info">+49 641 309-2450 <span>Öffnet neues Fenster</span></a><br>
+      Mail: <a href="mailto:klaus.quibeldey-cirkel@transmit.de" class="info">klaus.quibeldey-cirkel@transmit.de <span>Öffnet neues Fenster</span></a>.<br>
       <br>
       Sitz der Gesellschaft: Gießen<br>
-      Website: <a href="https://www.transmit.de">www.transmit.de</a><br>
+      Website: <a href="https://www.transmit.de" class="info">www.transmit.de <span>Öffnet neues Fenster</span></a><br>
       Rechtsform: GmbH<br>
       Amtsgericht: Gießen HRB 3036<br>
       USt-IdNr.: DE 188 685 037<br>

src/assets/i18n/imprint/imprint-en.html

@@ -7,8 +7,8 @@
       <abbr title="Hessisches Ministerium für Wissenschaft und Kunst">
         HMWK
       </abbr>
-      joint project <a href="https://www.digll-hessen.de/de" target="_blank">
-      »Digitally supported teaching and learning in the State of Hessen«</a>
+      joint project <a href="https://www.digll-hessen.de/de" target="_blank" class="info">
+      »Digitally supported teaching and learning in the State of Hessen« <span>Opens new window</span></a>
       (digLL).<br>
       <br>
     </p>
@@ -25,7 +25,7 @@
 
     <p>
       <a href="https://arsnova.thm.de/blog/wp-content/uploads/2019/09/Projektantrag-DigLL@THM-frag_jetzt.pdf"
-         target="_blank">Projektskizze zu »frag.jetzt«</a>
+         target="_blank" class="info">Projektskizze zu »frag.jetzt« <span>Opens new window</span></a>
     </p>
 
     <ars-row [height]="50"></ars-row>
@@ -41,7 +41,7 @@
       Conformance status
     </h2>
     <p>
-      The <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a>
+      The <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" class="info">Web Content Accessibility Guidelines (WCAG) <span>Opens new window</span></a>
       defines requirements for designers and developers to improve accessibility for people with disabilities. It
       defines three levels of conformance: Level A, Level AA, and Level AAA.frag.jetzt
       is partially conformant with WCAG 2.1 level AA. Partially conformant means that
@@ -62,16 +62,16 @@
       </li>
       <li>
         E-mail:
-        <a href="mailto:test@test.deklaus.quibeldey-cirkel@transmit.de.klaus.quibeldey-cirkel@transmit.de.">
-          klaus.quibeldey-cirkel@transmit.de.
+        <a href="mailto:test@test.deklaus.quibeldey-cirkel@transmit.de.klaus.quibeldey-cirkel@transmit.de." class="info">
+          klaus.quibeldey-cirkel@transmit.de. <span>Opens new window</span>
         </a>
       </li>
     </ul>
     <ars-row [height]="50"></ars-row>
     <h2>Contact</h2>
     <p>
-      The operation of the <a href="https://github.com/thm-projects/frag.jetzt" target="_blank">open-source web
-      application</a> »frag.jetzt« is a free service
+      The operation of the <a href="https://github.com/thm-projects/frag.jetzt" target="_blank" class="info">open-source web
+      application <span>Opens new window</span></a> »frag.jetzt« is a free service
       (»Software as a Service«) of the TransMIT GmbH, project division for mobile applications.<br>
       <br>
       Kerkrader Straße 3<br>
@@ -87,11 +87,11 @@
       D-35390 Gießen<br>
       Germany<br>
       <br>
-      Phone: <a href="tel:+49 641 309-2450">+49 641 309-2450</a><br>
-      Mail: <a href="mailto:klaus.quibeldey-cirkel@transmit.de">klaus.quibeldey-cirkel@transmit.de</a>.<br>
+      Phone: <a href="tel:+49 641 309-2450" class="info">+49 641 309-2450 <span>Opens new window</span></a><br>
+      Mail: <a href="mailto:klaus.quibeldey-cirkel@transmit.de" class="info">klaus.quibeldey-cirkel@transmit.de <span>Opens new window</span></a>.<br>
       <br>
       Company headquarters: Gießen<br>
-      Website: <a href="https://www.transmit.de">www.transmit.de</a><br>
+      Website: <a href="https://www.transmit.de" class="info">www.transmit.de <span>Opens new window</span></a><br>
       Legal form: GmbH<br>
       Local court: Gießen HRB 3036<br>
       German VAT no.: DE 188 685 037<br>

src/styles.scss

@@ -129,3 +129,29 @@ address {
 .mat-card, .mat-dialog-container {
   border-radius: 25px !important;
 }
+
+a.info {
+  position: relative;
+  z-index: 24;
+  text-decoration: underline;
+}
+
+a.info span {
+  position: absolute;
+  left: -9000px;
+  width: 0;
+  overflow: hidden;
+}
+
+
+a.info:hover span, a.info:focus span, a.info:active span {
+  display: block;
+  position: absolute;
+  top: 1.5em;
+  left: 2em;
+  width: 12em;
+  border: 1px solid var(--on-primary);
+  background-color: var(--primary);
+  color: #000;
+  text-align: center;
+}