Merge pull request #619 from swiss/594_social_media_label

Social media label. Closes #594 .
swiss · Dec 7, 2017 · 3a80c90 · 3a80c90
2 parents cb850e0 + 72aeb1f
commit 3a80c90
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 16 deletions.
diff --git a/src/locales/de/content.yml b/src/locales/de/content.yml
@@ -278,13 +278,14 @@ functions:
 
       Derzeit werden Facebook, Twitter, Google+, Xing und LinkedIn unterstützt. Weitere Netzwerke können mit dem betreffenden [Open Graph](http://ogp.me/) meta tag hinzugefügt werden.
     release: |
-      **2.1.1:**
-
-      - added the `.social-sharing` class to the `#social-sharing` element
+      **3.3.0:**
+      - added a heading for screen readers
 
       **3.1.1:**
-
       - added `xing` and `linkedin` icons for social sharing
+
+      **2.1.1:**
+      - added the `.social-sharing` class to the `#social-sharing` element
   downloading-files:
     title: Datei download
     help: Links, mit denen eine Datei geladen werden kann, sind immer mit einem vorangestellten Dokument-Icon gekennzeichnet.

diff --git a/src/locales/de/navigation.yml b/src/locales/de/navigation.yml
@@ -285,8 +285,10 @@ footer:
     title: Social Media
     help: Die Social Media Kanäle (Facebook, Twitter, YouTube) der Website werden im Footer in einem eigenen Bereich positioniert.
     release: |
-      **2.1.0:**
+      **3.3.0:**
+      - added a heading for screen readers
 
+      **2.1.0:**
       - added the `.links-social` class to the `<nav/>` element containing the social links
   footbar:
     title: Fusszeile

diff --git a/src/locales/en/content.yml b/src/locales/en/content.yml
@@ -262,13 +262,14 @@ functions:
 
       At the moment, Facebook, Twitter, Google+, Xing and LinkedIn are supported. Just add the correct [Open Graph](http://ogp.me/) meta tags to get the preview images and descriptions.
     release: |
-      **2.1.1:**
-
-      - added the `.social-sharing` class to the `#social-sharing` element
+      **3.3.0:**
+      - added a heading for screen readers
 
       **3.1.1:**
-
       - added `xing` and `linkedin` icons for social sharing
+
+      **2.1.1:**
+      - added the `.social-sharing` class to the `#social-sharing` element
   downloading-files:
     title: Downloading files
     help: Links with which a file can be downloaded are always preceded by a document icon.

diff --git a/src/locales/en/navigation.yml b/src/locales/en/navigation.yml
@@ -272,8 +272,10 @@ footer:
     title: Social Media
     help: The website’s social media channels (e.g. Facebook, Twitter, YouTube, etc.) are listed in a separate section of the footer.
     release: |
-      **2.1.0:**
+      **3.3.0:**
+      - added a heading for screen readers
 
+      **2.1.0:**
       - added the `.links-social` class to the `<nav/>` element containing the social links
   footbar:
     title: Footbar

diff --git a/src/locales/fr/content.yml b/src/locales/fr/content.yml
@@ -271,13 +271,14 @@ functions:
 
       Actuellement, cette fonction est compatible avec Facebook, Twitter, Google+, Xing et LinkedIn. D’autres réseaux peuvent être ajoutés à l’aide de la balise meta concernée [Open Graph](http://ogp.me/).
     release: |
-      **2.1.1:**
-
-      - classe `.social-sharing` ajoutée à l’élément `#social-sharing`
+      **3.3.0:**
+      - ajout d'un titre pour les lecteurs d'écran
 
       **3.1.1:**
-
       - ajout des icones `xing` et `linkedin` pour le partage social
+
+      **2.1.1:**
+      - classe `.social-sharing` ajoutée à l’élément `#social-sharing`
   downloading-files:
     title: Téléchargement de fichier
     help: Les liens permettant de télécharger un fichier sont toujours signalés par une icône «document» qui les précède.

diff --git a/src/locales/fr/navigation.yml b/src/locales/fr/navigation.yml
@@ -281,8 +281,10 @@ footer:
     title: Médias sociaux
     help: Les canaux de médias sociaux (Facebook, Twitter, YouTube) du site Internet sont positionnés dans une zone séparée à l’intérieur du pied de page.
     release: |
-      **2.1.0:**
+      **3.3.0:**
+      - ajout d'un titre pour les lecteurs d'écran
 
+      **2.1.0:**
       - classe `.links-social` ajoutée à l’élément `<nav/>` contenant les liens sociaux
   footbar:
     title: Ligne de pied de page

diff --git a/src/materials/02-navigation/04-footer/02-social-media.html b/src/materials/02-navigation/04-footer/02-social-media.html
@@ -10,7 +10,8 @@
   <div class="container-fluid">
     <h3>Informiert bleiben</h3>
     <nav class="links-social">
-      <ul>
+      <h4 id="social_media" class="sr-only">Social media</h4>
+      <ul aria-labelledby="social_media">
         <li><a class="icon icon--before icon--twitter" href="#">Twitter</a></li>
         <li><a class="icon icon--before icon--facebook" href="#">Facebook</a></li>
         <li><a class="icon icon--before icon--rss" href="#">RSS</a></li>

diff --git a/src/materials/03-content/04-functions/02-social-sharing.html b/src/materials/03-content/04-functions/02-social-sharing.html
@@ -6,6 +6,7 @@
 ---
 
 <div class="social-sharing">
+  <h3 class="sr-only">Social media sharing</h3>
   <a href="#" aria-label="Facebook" class="social-sharing-facebook"></a>
   <a href="#" aria-label="Twitter" class="social-sharing-twitter"></a>
   <a href="#" aria-label="Google+" class="social-sharing-google"></a>