From 8b73316f294f730310477c42b8dcbfa666bd40ce Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Tue, 2 Aug 2016 14:29:09 -0700
Subject: [PATCH 1/2] #218302: updated keyboard focus styles for pivot links
 and pivot tab links.

---
 src/components/Pivot/Pivot.scss | 35 +++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index 3a71fa811b5365..e94754ee05ee7e 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -13,6 +13,9 @@
   @include ms-u-normalize;
   font-size: $ms-font-size-m;
   font-weight: $ms-font-weight-regular;
+  position: relative;
+  color: $ms-color-themePrimary;
+  white-space: nowrap;
 }
 
 .ms-Pivot-links {
@@ -37,6 +40,10 @@
     cursor: pointer;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   // Underline, not yet visible
   &::before {
     background-color: transparent;
@@ -77,12 +84,14 @@
   }
 }
 
-
-
+.ms-Fabric.is-focusVisible .ms-Pivot-link {
+  &:focus {
+    outline: 1px solid $ms-color-neutralSecondaryAlt;
+  }
+}
 
 // @TODO: Determine if any of the styles below this are necessary anymore.
 
-
 // Overflow (ellipsis)
 .ms-Pivot-link.ms-Pivot-link--overflow {
   color: $ms-color-neutralSecondary;
@@ -133,16 +142,16 @@
   }
 }
 
-
 //== Modifier: Tabs
 //
 .ms-Pivot.ms-Pivot--tabs {
 
   .ms-Pivot-link {
+    @include focus-border();
     height: 40px;
     background-color: $ms-color-neutralLighter;
     line-height: 40px;
-    margin-right: -2px; // Remove space next to inline-block element
+    margin-right: 0px; // Remove space next to inline-block element
     padding: 0 10px;
 
     &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
@@ -175,6 +184,14 @@
   }
 }
 
+.ms-Fabric.is-focusVisible .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus {
+  &:before {
+    height: auto;
+    background: transparent;
+    transition: none;
+  }
+}
+
 // @TODO: Confirm that this component is not responsive.
 //
 // @media (min-width: $ms-screen-lg-min) {
@@ -199,11 +216,3 @@
     }
   }
 }
-
-// TODO: Remove override below.
-
-.ms-Pivot {
-  position: relative;
-  color: $ms-color-themePrimary;
-  white-space: nowrap;
-}

From 7069ee96fe738a79333b913d9f30f50a7bc3c1fc Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Tue, 2 Aug 2016 14:59:17 -0700
Subject: [PATCH 2/2] #218302: localized margin-right

---
 src/components/Pivot/Pivot.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss
index e94754ee05ee7e..e0b9cee26a74c8 100644
--- a/src/components/Pivot/Pivot.scss
+++ b/src/components/Pivot/Pivot.scss
@@ -148,10 +148,10 @@
 
   .ms-Pivot-link {
     @include focus-border();
+    @include margin-right(0px);
     height: 40px;
     background-color: $ms-color-neutralLighter;
     line-height: 40px;
-    margin-right: 0px; // Remove space next to inline-block element
     padding: 0 10px;
 
     &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),