From 6921e29f7e4a59b3374e45e3d9191f4cad1545cb Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Mon, 30 Nov 2020 18:39:21 -0500
Subject: [PATCH 1/7] Experiment Tabs.scss

---
 src/components/Tabs/Tabs.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index 5a1cae9d49e..e3bed64ffe2 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -327,12 +327,14 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
 
   .Tab {
     padding: spacing(tight) spacing(extra-tight);
-
-    &:focus .Title::before {
-      background: var(--p-border-hovered);
+    &.Tab-selected .Title::before {
+      background: var(--p-action-primary);
     }
 
     &:active .Title::before {
+      background: var(--p-action-primary-pressed);
+    }
+    &:focus .Title::before {
       background: var(--p-surface-primary-selected-pressed);
     }
   }

From 2c74506ed3dea2728efa90c2aabfe8e40a23aca7 Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Mon, 30 Nov 2020 18:47:17 -0500
Subject: [PATCH 2/7] Fix issue when hover overwrites selected state - on
 keyboard and mouse hover

---
 src/components/Tabs/Tabs.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index e3bed64ffe2..0e6468857e5 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -327,9 +327,6 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
 
   .Tab {
     padding: spacing(tight) spacing(extra-tight);
-    &.Tab-selected .Title::before {
-      background: var(--p-action-primary);
-    }
 
     &:active .Title::before {
       background: var(--p-action-primary-pressed);
@@ -345,6 +342,9 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
   }
 
   .Tab-selected {
+    &:focus .Title::before {
+      background: var(--p-action-primary);
+    }
     .Title {
       color: var(--p-text);
 

From 61f406a17641ff825600fbb61fdfb2fee118c884 Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Mon, 30 Nov 2020 21:22:20 -0500
Subject: [PATCH 3/7] Add unreleased.md

---
 UNRELEASED.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 01c5df063cf..8ee26f138e6 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -2,17 +2,15 @@
 
 Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to format new entries. 💜
 
-- Fixes keyboard interactions for the `Tab` component ([#3650](https://github.com/Shopify/polaris-react/pull/3650))
-- Adds `role="presentational"` to list items for `Tabs` ([#3647](https://github.com/Shopify/polaris-react/pull/3647))
-
 ### Breaking changes
 
 ### Enhancements
 
-- Allow `Thumbnail` `source` property to support `icons` ([#3328](https://github.com/Shopify/polaris-react/pull/3328))
+- Allowed `Thumbnail` `source` property to support `icons` ([#3328](https://github.com/Shopify/polaris-react/pull/3328))
 - **`Button`:** New `role` prop for `<button />` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
 - Added `preventFocusOnClose` to `Popover` ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Added color fallback values to `focus-ring` mixin ([#3626](https://github.com/Shopify/polaris-react/pull/3626))
+- Added `role="presentational"` to list items for `Tabs` ([#3647](https://github.com/Shopify/polaris-react/pull/3647))
 
 ### Bug fixes
 
@@ -20,7 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added escape keybind to `Tooltip` ([#3627](https://github.com/Shopify/polaris-react/pull/3627))
 - Removed extra bottom border on the `DataTable` and added curved edges to footers ([#3571](https://github.com/Shopify/polaris-react/pull/3571))
 - **`Button`:** `loading` no longer sets the invalid `role="alert"` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
-- Add semantic headers to `Filters` ([#3629](https://github.com/Shopify/polaris-react/pull/3629))
+- Added semantic headers to `Filters` ([#3629](https://github.com/Shopify/polaris-react/pull/3629))
 - Fixed `Filters` not announcing applied filters ([#3632](https://github.com/Shopify/polaris-react/pull/3632))
 - Removed `tabIndex=-1` from `Popover` when `preventAutoFocus` is true ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Fixed `Modal` header border color ([#3616](https://github.com/Shopify/polaris-react/pull/3616))
@@ -29,6 +27,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed `Banner` `secondaryAction` only rendering if `action` is set ([#2949](https://github.com/Shopify/polaris-react/pull/2949))
 - Added a `alwaysRenderCustomProperties` to `ThemeProvider` for elements that render outside of the DOM tree to their parent context ([#3652](https://github.com/Shopify/polaris-react/pull/3652))
 - Increased precision of hue, saturation, lightness, and alpha in HSBLA `color-transformers` (https://github.com/Shopify/polaris-react/pull/3640)
+- Fixed keyboard interactions for the `Tab` component ([#3650](https://github.com/Shopify/polaris-react/pull/3650))
+- Fixed keyboard interaction when selected Tab was focused and rendering the wrong `::before` colour ([#3669](https://github.com/Shopify/polaris-react/pull/3669))
 
 ### Documentation
 

From 04fe3e7435295d244e8c74834c3a2cff6e34d1ad Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Mon, 30 Nov 2020 22:24:16 -0500
Subject: [PATCH 4/7] Add transparent border for Windows High Contrast Mode

---
 src/components/Tabs/Tabs.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index 0e6468857e5..31dedf3f174 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -342,6 +342,8 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
   }
 
   .Tab-selected {
+    outline: 3px solid transparent;
+
     &:focus .Title::before {
       background: var(--p-action-primary);
     }

From 39f4ccbc9daff6f757533adf2df5a562e2d7a3c5 Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Tue, 1 Dec 2020 10:13:14 -0500
Subject: [PATCH 5/7] Change focus to grey

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

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index 31dedf3f174..6df7fffdacf 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -332,7 +332,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
       background: var(--p-action-primary-pressed);
     }
     &:focus .Title::before {
-      background: var(--p-surface-primary-selected-pressed);
+      background: var(--p-border-hovered);
     }
   }
 

From b8c1a8c4d0de476d9943196a8cf20d97e8cc9b6d Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Tue, 1 Dec 2020 10:55:38 -0500
Subject: [PATCH 6/7] Change transparent border to wrap in media query

---
 src/components/Tabs/Tabs.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index 6df7fffdacf..d2df0c49467 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -342,8 +342,6 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
   }
 
   .Tab-selected {
-    outline: 3px solid transparent;
-
     &:focus .Title::before {
       background: var(--p-action-primary);
     }
@@ -355,6 +353,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
       }
 
       @media (-ms-high-contrast: active) {
+        outline: 3px solid ms-high-contrast-color('text');
         // stylelint-disable-next-line max-nesting-depth
         &::before {
           display: none;

From ff98d6243af1a7d74bce38b4161a23ddd8e9e14f Mon Sep 17 00:00:00 2001
From: ginabak <gina@ginabak.com>
Date: Tue, 1 Dec 2020 11:20:16 -0500
Subject: [PATCH 7/7] Address Curtis comments -space and rem

---
 UNRELEASED.md                 | 2 +-
 src/components/Tabs/Tabs.scss | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 193a4e5a8a1..696e763f961 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -11,7 +11,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added `preventFocusOnClose` to `Popover` ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
 - Added color fallback values to `focus-ring` mixin ([#3626](https://github.com/Shopify/polaris-react/pull/3626))
 - Added `role="presentational"` to list items for `Tabs` ([#3647](https://github.com/Shopify/polaris-react/pull/3647))
-- Allowed consumers to set custom container element on `PortalsManager` ([#3644](https://github.com/Shopify/polaris-react/pull/3644)
+- Allowed consumers to set custom container element on `PortalsManager` ([#3644](https://github.com/Shopify/polaris-react/pull/3644))
 
 ### Bug fixes
 
diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index d2df0c49467..618d90225a7 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -331,6 +331,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
     &:active .Title::before {
       background: var(--p-action-primary-pressed);
     }
+
     &:focus .Title::before {
       background: var(--p-border-hovered);
     }
@@ -345,6 +346,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
     &:focus .Title::before {
       background: var(--p-action-primary);
     }
+
     .Title {
       color: var(--p-text);
 
@@ -353,7 +355,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
       }
 
       @media (-ms-high-contrast: active) {
-        outline: 3px solid ms-high-contrast-color('text');
+        outline: rem(3px) solid ms-high-contrast-color('text');
         // stylelint-disable-next-line max-nesting-depth
         &::before {
           display: none;