fix(tabs): display focus ring on tabs when slds-has-focus (#5347)

* fix(tabs): display focus ring on tabs when slds-has-focus

* docs: add release notes

Author: Amarnath510

RELEASENOTES.general.md

@@ -1,6 +1,13 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
+## 2.24.4 - Jun 13, 2024
+
+## Updated
+
+- Updated focus ring color for links to blue-40.
+
+
 ## 2.24.3 - Jun 6, 2024
 
 ## Updated

RELEASENOTES.md

@@ -1,6 +1,16 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
+## Release 2.24.4 - Jun 13, 2024
+
+## Updated
+- Updated focus ring color for links to blue-40.
+
+## Components
+### [Tabs](https://www.lightningdesignsystem.com/components/tabs)
+## Fixed
+- Added new focus style for tabs when `.slds-has-focus` class is getting added.
+
 ## Release 2.24.3 - Jun 6, 2024
 
 ## Updated

ui/components/tabs/RELEASENOTES.md

@@ -4,6 +4,12 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.24.4
+
+## Fixed
+
+- Added new focus style for tabs when `.slds-has-focus` class is getting added.
+
 ## 2.23.0
 
 ## Added

ui/components/tabs/base/_index.scss

@@ -113,14 +113,16 @@
    */
   &:focus,
   &.slds-has-focus {
-    outline: 0;
-
     &:after {
       height: calc(var(--slds-c-tabs-list-sizing-border, var(--sds-c-tabs-list-sizing-border, #{$border-width-thick})) + 1px);
       background-color: var(--slds-c-tabs-item-color-border-active, var(--sds-c-tabs-item-color-border-active, $brand-primary));
     }
   }
 
+  &:focus {
+    outline: 0;
+  }
+
   // Remove box-shadow when slds-button is used in conjunction with class
   .slds-tabs_default__link:focus,
   .slds-tabs--default__link:focus {

ui/dependencies/_core.scss

@@ -97,7 +97,7 @@
     }
 
     &:focus-visible {
-      outline-color: var(--slds-g-color-palette-blue-50, #{$palette-blue-50});
+      outline-color: var(--slds-g-color-palette-blue-40, #{$palette-blue-40});
     }
   }