Merge pull request #616 from swiss/604_focus

Focus fix. Closes #604.
swiss · Dec 7, 2017 · b3f3947 · b3f3947
2 parents cb8d362 + 1803f5f
commit b3f3947
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 19 deletions.
diff --git a/src/assets/sass/components/focus.scss b/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;

diff --git a/src/locales/de/content.yml b/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.
 
@@ -64,6 +67,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
 

diff --git a/src/locales/en/content.yml b/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.
 
@@ -52,6 +55,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
 

diff --git a/src/locales/fr/content.yml b/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.
 

diff --git a/src/materials/03-content/05-teaser/01-focus.html b/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>
diff --git a/src/materials/03-content/05-teaser/02-focus-vertical.html b/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>