fix(socialSharing): add a heading for screen reader

#594
swiss · Dec 7, 2017 · 72aeb1f · 72aeb1f
1 parent 2b884d7
commit 72aeb1f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/src/locales/de/content.yml b/src/locales/de/content.yml
@@ -263,13 +263,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/en/content.yml b/src/locales/en/content.yml
@@ -247,13 +247,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/fr/content.yml b/src/locales/fr/content.yml
@@ -262,13 +262,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/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>