fix(focus): put tabs before content while keeping same appearance

#604

src/assets/sass/components/focus.scss

@@ -10,7 +10,7 @@
  ========================================================== */
 
 .focus {
-
+  display: flex;
   border: 1px solid $light-grey;
 
   @media only screen and (min-width: $screen-sm-min) {
@@ -182,6 +182,7 @@
 }
 
 .focus:not(.focus-vertical) {
+  flex-direction: column-reverse;
   .tab-content.tab-border {
     border: 1px solid $smoke;
   }
@@ -195,7 +196,7 @@
 
 .focus.focus-vertical {
   border: 1px solid $light-grey;
-  display: flex;
+  flex-direction: row-reverse;
 
   .tab-content {
     display: flex;

src/locales/de/content.yml

@@ -45,6 +45,9 @@ teaser:
       Das Titelformat H4 in den Teaser-Beispielen ist keine allgemeine Vorgabe. Das Format H1, H2, H3 etc. richtet sich nach der Gewichtung des Titels in der Struktur der `<section>` oder der Seite.
 
     release: |
+      **3.3.0**
+      - Improved accessibility by moving tabs before content without changing visual presentation
+
       **3.0.0**
       - Improved accessibility by pausing the slideshow when user interact with the component and also by adding a play/pause button.
   focus-vertical:
@@ -61,6 +64,9 @@ teaser:
       Das Titelformat H3 in den Teaser-Beispielen ist keine allgemeine Vorgabe. Das Format H1, H2, H3 etc. richtet sich nach der Gewichtung des Titels in der Struktur der `<section>` oder der Seite.
 
     release: |
+      **3.3.0**
+      - Improved accessibility by moving tabs before content without changing visual presentation
+
       **3.1.0**
       - Focus vertical introduced
   news:

src/locales/en/content.yml

@@ -40,6 +40,9 @@ teaser:
 
       Please be careful about the length of the text in the tabs, the height is fixed.
     release: |
+      **3.3.0**
+      - Improved accessibility by moving tabs before content without changing visual presentation
+
       **3.0.0**
       - Improved accessibility by pausing the slideshow when user interact with the component and also by adding a play/pause button.
   focus-vertical:
@@ -49,6 +52,9 @@ teaser:
 
       Please be careful about the length of the text in the tabs, the height is fixed.
     release: |
+      **3.3.0**
+      - Improved accessibility by moving tabs before content without changing visual presentation
+
       **3.1.0**
       - Focus vertical introduced
   news:

src/locales/fr/content.yml

@@ -45,6 +45,9 @@ teaser:
       Le format de titre H3 dans les exemples de teaser ne constitue pas une exigence générale. Le format (H1, H2, H3, etc.) dépend de l’importance du titre au sein de la structure de la page.
 
     release: |
+      **3.3.0**
+      - Amélioration de l’accessibilité en déplaçant les tabs avant le contenu sans changer la présentation visuelle
+
       **3.0.0**
       – Amélioration de l’accessibilité en mettant le diaporama en pause lorsque l’utilisateur interagit avec le composant et aussi en ajoutant un bouton de lecture/pause.
   focus-vertical:

src/materials/03-content/05-teaser/01-focus.html

@@ -8,6 +8,15 @@
 <div class="row">
   <div class="col-sm-10 col-sm-offset-1">
     <div class="focus">
+
+      <!-- focus tabs -->
+      <ul class="nav nav-tabs nav-tabs-focus nav-justified">
+        <li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
+        <li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
+        <li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
+        <li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
+      </ul>
+
       <div class="tab-content tab-border tab-focus">
         <button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
 
@@ -53,15 +62,6 @@ <h4>Lorem ipsum dolor sit.</h4>
           </div>
         </div>
       </div>
-
-      <!-- focus tabs -->
-      <ul class="nav nav-tabs nav-tabs-focus nav-justified">
-        <li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
-        <li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
-        <li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
-        <li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
-      </ul>
-
     </div>
   </div>
 </div>

src/materials/03-content/05-teaser/02-focus-vertical.html

@@ -8,6 +8,15 @@
 <div class="row">
   <div class="col-sm-10 col-sm-offset-1">
     <div class="focus focus-vertical">
+
+      <!-- focus tabs -->
+      <ul class="nav nav-tabs nav-tabs-focus nav-justified">
+        <li class="active"><a href="#vertical-home" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
+        <li><a href="#vertical-profile" data-toggle="tab">Duis autem vel eum iriure</a></li>
+        <li><a href="#vertical-messages" data-toggle="tab">Ut wisi enim ad minim veniam</a></li>
+        <li><a href="#vertical-settings" data-toggle="tab">Nam liber tempor cum soluta nobis eleifend</a></li>
+      </ul>
+
       <div class="tab-content tab-focus">
         <button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
 
@@ -54,14 +63,6 @@ <h4>Lorem ipsum dolor sit.</h4>
         </div>
       </div>
 
-      <!-- focus tabs -->
-      <ul class="nav nav-tabs nav-tabs-focus nav-justified">
-        <li class="active"><a href="#vertical-home" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
-        <li><a href="#vertical-profile" data-toggle="tab">Duis autem vel eum iriure</a></li>
-        <li><a href="#vertical-messages" data-toggle="tab">Ut wisi enim ad minim veniam</a></li>
-        <li><a href="#vertical-settings" data-toggle="tab">Nam liber tempor cum soluta nobis eleifend</a></li>
-      </ul>
-
     </div>
   </div>
 </div>