fix(link): add title attribute on external links

#605
swiss · Dec 7, 2017 · eb35b8f · eb35b8f
1 parent d295e75
commit eb35b8f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/src/locales/de/layout.yml b/src/locales/de/layout.yml
@@ -338,6 +338,9 @@ typography:
       Bei einem Link im Textfluss wird der verlinkte Text unterstrichen. Links in einem Navigations-Element (z.B. in der Globalnavigation) sind nicht blau, sondern grau. Aussehen und Verhalten dieser speziellen Links, wird in diesen Webrichtlinien an den entsprechenden Stellen separat beschrieben.
 
       Mit den `.icon`-Klassen kann vor oder nach dem Link ein Icon hinzugefügt werden (Klasse`.icon--external` für externe Links).
+    release: |
+      **3.3.0**
+      - add `title="External link"` on external link for screen reader use
   top-link:
     title: Link zum Seitenanfang
     help: |

diff --git a/src/locales/en/layout.yml b/src/locales/en/layout.yml
@@ -333,6 +333,9 @@ typography:
       If there is a link in the running text, the linked text is underlined. Links in a navigation element (e.g. in the global navigation) are gray, and not blue. There are separate descriptions of how these special links are presented and how they behave at the appropriate places in these Web Guidelines.
 
       You can  use the `.icon` classes to add some icons after or before the link. Use `.icon--external` if the link is external.
+    release: |
+      **3.3.0**
+      - add `title="External link"` on external link for screen reader use
   top-link:
     title: Top link
     help: The top link is the counterpart to the anchor link. It takes the user back to the beginning of the page from any position in the page currently in use.

diff --git a/src/locales/fr/layout.yml b/src/locales/fr/layout.yml
@@ -334,6 +334,9 @@ typography:
       dans le cas d’un lien situé dans le corps de texte, le texte muni du lien est souligné. Les liens situés dans un élément de navigation (p. ex. dans la navigation globale) ne sont pas bleu, mais gris. L’apparence et le comportement de ces liens spéciaux sont décrits séparément aux endroits appropriés dans les présentes lignes directrices pour le design web.
 
       Les classes `.icon` permettent d’ajouter une icône avant ou après le lien (classe `.icon--external` pour les liens externes).
+    release: |
+      **3.3.0**
+      - ajout de l'attribut `title="External link"` sur les liens externes
   top-link:
     title: Lien vers le haut de page
     help: |

diff --git a/src/materials/01-layout/04-typography/08-links.html b/src/materials/01-layout/04-typography/08-links.html
@@ -6,6 +6,6 @@
 
 <p>An <a href="#">internal link</a> in a paragraph.</p>
 
-<p>An <a href="#" class="icon icon--after icon--external">external link</a> in a paragraph.</p>
+<p>An <a href="#" class="icon icon--after icon--external" title="External link">external link</a> in a paragraph.</p>
 <a href="#" class="icon icon--before icon--cart">link with icon</a><br>
 <a href="#" class="icon icon--before icon--pdf">link with icon lorem <span class="text-dimmed">(PDF, 43 pages, 2Mb, English)</span></a><br>