fix(list-item): Improve focus outline appearance (#9653)

**Related Issue:** #7538 ## Summary Make list item highlight display correctly over action items.
Esri · Jun 20, 2024 · b3d2cb2 · b3d2cb2
1 parent 8b34583
commit b3d2cb2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -79,9 +79,14 @@ td {
   @apply focus-base;
 }
 
+tr {
+  @apply relative;
+}
+
 tr:focus,
 td:focus {
-  @apply focus-inset;
+  z-index: var(--calcite-app-z-index-sticky);
+  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));
 }
 
 .content,
@@ -195,7 +200,7 @@ td:focus {
 
 .actions-start,
 .actions-end {
-  @apply p-0;
+  @apply p-0 relative;
   ::slotted(calcite-action),
   ::slotted(calcite-action-menu),
   ::slotted(calcite-handle),
@@ -206,6 +211,40 @@ td:focus {
   }
 }
 
+tr:focus {
+  .actions-start,
+  .actions-end {
+    inset-block: theme("spacing[0.5]");
+    .close,
+    ::slotted(calcite-action),
+    ::slotted(calcite-action-menu),
+    ::slotted(calcite-handle),
+    ::slotted(calcite-dropdown) {
+      block-size: calc(100% - theme("spacing[1]"));
+    }
+  }
+
+  &::after,
+  &::before {
+    @apply absolute;
+    content: "";
+    inline-size: theme("spacing[0]");
+    z-index: theme("zIndex.header");
+    background-color: theme("colors.brand");
+    inset-block: 0;
+  }
+  &::before {
+    inset-inline-start: 0;
+  }
+  &::after {
+    inset-inline-end: 0;
+  }
+}
+
+.container--border:focus::before {
+  display: none;
+}
+
 ::slotted(calcite-list:empty) {
   @apply border-t-0;
 }

diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -533,6 +533,7 @@ export class ListItem
         {closable ? (
           <calcite-action
             appearance="transparent"
+            class={CSS.close}
             icon={ICONS.close}
             key="close-action"
             label={messages.close}

diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
@@ -24,6 +24,7 @@ export const CSS = {
   selectionContainerSingle: "selection-container--single",
   openContainer: "open-container",
   dragContainer: "drag-container",
+  close: "close",
 };
 
 export const SLOTS = {