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

package/package.json

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

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

@@ -16,6 +16,7 @@
     display: flex;
     align-items: center;
     min-width: 0;
+    position: relative;
 }
 
 .tree-item-row dx-tree-tile {
@@ -29,6 +30,19 @@
     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,6 +70,15 @@
     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;
 }

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

@@ -1,5 +1,12 @@
 <template>
-    <a href={href} class={tileClass} target={target} aria-label={linkAriaLabel}>
+    <a
+        href={href}
+        class={tileClass}
+        target={target}
+        aria-label={linkAriaLabel}
+        onfocus={onLinkFocus}
+        onblur={onLinkBlur}
+    >
         <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,4 +119,18 @@ 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");
+    }
 }