@salesforcedevs/dx-components 1.40.5-final-alpha2 → 1.40.5-final-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.5-final-alpha2",
+  "version": "1.40.5-final-alpha3",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

package/src/modules/dx/treeItem/treeItem.css

@@ -19,6 +19,13 @@
     position: relative;
 }
 
+/* The tile's keyboard focus layers fill this row, picker included. isolate
+   keeps the fill above the row's background and below its content. Only while
+   focus is inside: a row that is always isolated traps its picker's menu. */
+.tree-item-row:focus-within {
+    isolation: isolate;
+}
+
 .tree-item-row dx-tree-tile {
     flex: 1;
     min-width: 0;
@@ -30,19 +37,6 @@
     overflow: visible;
 }
 
-/* Keyboard focus on the link. The tile sets data-focus-visible only then,
-   so a click does not ring. The next Tab clears it and focuses the picker. */
-.tree-item-row:has(dx-tree-tile[data-focus-visible])::after {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    inset: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    border-radius: var(--dx-g-spacing-2xs);
-    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-    pointer-events: none;
-}
-
 .tree-item-row-selected {
     background: var(--dx-g-cloud-blue-vibrant-95);
     box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);

package/src/modules/dx/treeTile/treeTile.css

@@ -70,15 +70,6 @@
     padding-right: var(--dx-g-spacing-xs);
 }
 
-/* Undo the shared focus inset. The row draws the ring around link and picker. */
-.sidebar-item.tile-with-version-picker:focus-visible {
-    margin: 0;
-    padding-right: var(--dx-g-spacing-xs);
-    padding-left: var(--dx-g-global-header-padding-horizontal);
-    border-radius: 0;
-    outline: none;
-}
-
 .tile-with-children .tile-label {
     order: 2;
 }
@@ -226,3 +217,51 @@ a:visited.tile-root,
 a:link.tile-root {
     color: var(--dx-g-blue-vibrant-20);
 }
+
+/* Keyboard focus matches dx-dropdown-option: a light fill, a 2px blue inset
+   ring, and a white inner band. The layers fill dx-tree-item's row (it sets
+   position: relative), so a version picker beside the link sits inside the
+   focus box. Undo the shared tree item focus box (commonTreeItem) first. */
+:host .sidebar-item:focus-visible {
+    margin: 0;
+    padding: 6px var(--dx-g-spacing-lg) 6px
+        var(--dx-g-global-header-padding-horizontal);
+    outline: none;
+    border-radius: 0;
+}
+
+:host .sidebar-item:focus-visible .indentation {
+    padding-top: 0;
+    padding-bottom: 0;
+    outline: none;
+}
+
+:host .sidebar-item:focus-visible::before,
+:host .sidebar-item:focus-visible::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+:host .sidebar-item:focus-visible::before {
+    z-index: -1;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+:host .sidebar-item:focus-visible::after {
+    z-index: 1;
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
+        inset 0 0 0 4px white;
+}
+
+/* A selected item keeps its left bar, inside the ring, when it also has keyboard focus. */
+:host
+    .sidebar-item:is(
+        .sidebar-item-selected,
+        .sidebar-item-selected-text
+    ):focus-visible::after {
+    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
+        inset 0 0 0 4px white,
+        inset calc(2 * var(--dx-g-spacing-xs)) 0 0 0 var(--dx-g-blue-vibrant-40);
+}

package/src/modules/dx/treeTile/treeTile.html

@@ -1,12 +1,5 @@
 <template>
-    <a
-        href={href}
-        class={tileClass}
-        target={target}
-        aria-label={linkAriaLabel}
-        onfocus={onLinkFocus}
-        onblur={onLinkBlur}
-    >
+    <a href={href} class={tileClass} target={target} aria-label={linkAriaLabel}>
         <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
             <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon

package/src/modules/dx/treeTile/treeTile.ts

@@ -119,18 +119,4 @@ export default class TreeTile extends LightningElement {
         event.stopPropagation();
         this.dispatchEvent(new CustomEvent("iconclick"));
     }
-
-    /* :focus-visible does not cross this shadow root, so the row reads it here. */
-    private onLinkFocus(event: FocusEvent) {
-        const link = event.currentTarget as HTMLElement;
-        if (this.hasVersionPicker && link.matches(":focus-visible")) {
-            this.setAttribute("data-focus-visible", "");
-            return;
-        }
-        this.removeAttribute("data-focus-visible");
-    }
-
-    private onLinkBlur() {
-        this.removeAttribute("data-focus-visible");
-    }
 }