Remove the unwanted OuiBreadcrumbs focus rectangle

Also: * Correctly color the OuiBreadcrumbs when focused * Display the last breadcrumb in a nested breadcrumb as a normal breadcrumb Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Sep 17, 2024 · 3fd1b46 · 3fd1b46
1 parent 9f034a9
commit 3fd1b46
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 16 deletions.
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -33,6 +33,16 @@
   }
 }
 
+.ouiBreadcrumb,
+.ouiBreadcrumb__collapsedLink {
+  &.ouiLink {
+    &[class*='ouiLink--']:focus {
+      // .ouiLink uses a rule with !important which shows an outline
+      animation: none !important; // sass-lint:disable-line no-important
+    }
+  }
+}
+
 .ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) .ouiBreadcrumbWrapper--last .ouiBreadcrumb {
   font-weight: $ouiFontWeightMedium;
 }
@@ -97,37 +107,43 @@
 
     transform: skewX(-20deg);
     border-radius: $ouiSizeXS;
-  }
 
-  &:not(.ouiBreadcrumbWrapper--last)::before {
     background-color: $ouiBreadcrumbInactiveBackground;
   }
 
-  &.ouiBreadcrumbWrapper--last::before {
-    background-color: $ouiBreadcrumbActiveBackground;
+  .ouiBreadcrumbs:not(.ouiBreadcrumbs__inPopover) & {
+    &.ouiBreadcrumbWrapper--last {
+      // This targets the last breadcrumb wrapper and sets a different text color for the breadcrumb inside it.
+      .ouiBreadcrumb,
+      .ouiBreadcrumb:hover {
+        color: inherit !important; // sass-lint:disable-line no-important
+      }
+
+      &::before {
+        background-color: $ouiBreadcrumbActiveBackground;
+      }
+    }
+  }
+
+  &:has(.ouiLink--subdued:focus)::before {
+    background-color: $ouiBreadcrumbFocusBackground;
   }
 
   &:not(.ouiBreadcrumbWrapper--first) {
     margin-bottom: $ouiSizeXS; /* 1 */
     padding-left: $ouiSizeL - $ouiSizeXS + calc($ouiBreadcrumbSpacing / 2);
   }
-
-  // This targets the last breadcrumb wrapper and sets a different text color for the breadcrumb inside it.
-  &.ouiBreadcrumbWrapper--last .ouiBreadcrumb {
-    // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
-    color: inherit !important; // sass-lint:disable-line no-important
-
-    &:hover {
-      color: inherit !important; // sass-lint:disable-line no-important
-    }
-  }
 }
 
 .ouiBreadcrumbWall {
   background-image: linear-gradient(to right, $ouiBreadcrumbInactiveBackground 0 $ouiSizeM, transparent $ouiSizeM);
   border-radius: $ouiSizeXS;
   overflow: hidden;
   margin-bottom: $ouiSizeXS; /* 1 */
+
+  &:has(.ouiLink--subdued:focus) {
+    background-image: linear-gradient(to right, $ouiBreadcrumbFocusBackground 0 $ouiSizeM, transparent $ouiSizeM);
+  }
 }
 
 .ouiBreadcrumbWall--single {

diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss
@@ -12,6 +12,7 @@
 $ouiBreadcrumbSpacing: $ouiSizeS !default;
 $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default;
 
+$ouiBreadcrumbFocusBackground: tintOrShade($ouiTextSubduedColor, $ouiFocusChangePercent, $ouiFocusChangePercent) !default;
 $ouiBreadcrumbActiveBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default;
 $ouiBreadcrumbInactiveBackground: tint($ouiColorLightShade, 14%) !default;
 $ouiBreadcrumbCollapsedLink: shadeOrTint($ouiColorPrimaryText, 61%, 20%) !default;

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -217,6 +217,8 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
     };
   }, [responsive, functionToCallOnWindowResize]);
 
+  const isInPopover = className === 'ouiBreadcrumbs__inPopover';
+
   const breadcrumbElements = breadcrumbs.map((breadcrumb, index) => {
     const {
       text,
@@ -249,7 +251,7 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
               ref={ref}
               className={breadcrumbClasses}
               title={innerText}
-              aria-current={isLastBreadcrumb ? 'page' : 'false'}
+              aria-current={isLastBreadcrumb && !isInPopover ? 'page' : 'false'}
               {...breadcrumbRest}>
               {text}
             </span>
@@ -260,7 +262,7 @@ export const OuiBreadcrumbs: FunctionComponent<OuiBreadcrumbsProps> = ({
           {(ref, innerText) => (
             <OuiLink
               ref={ref}
-              color={isLastBreadcrumb ? 'text' : 'subdued'}
+              color={isLastBreadcrumb && !isInPopover ? 'text' : 'subdued'}
               onClick={onClick}
               href={href}
               className={breadcrumbClasses}