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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.5-final-alpha",
+  "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");
+    }
 }

package/src/modules/dxUtils/topicVersion/topicVersion.ts

@@ -294,13 +294,13 @@ export function toCanonicalHref(
     }
 
     for (const version of versions) {
-        if (version.id === versions[0].id) {
-            continue;
-        }
-        const delta = getVersionPathDelta(
-            latestPath,
-            normalizePath(version.link?.href)
-        );
+        // The latest is also served under `/<latestId>/`, so that form is
+        // stripped too.
+        const versionedPath =
+            version.id === versions[0].id
+                ? insertVersionBeforeSlug(latestPath, version.id)
+                : normalizePath(version.link?.href);
+        const delta = getVersionPathDelta(latestPath, versionedPath);
         const stripped = delta && stripVersionPathDelta(hrefPath, delta);
         if (stripped) {
             return stripped;
@@ -315,10 +315,19 @@ function hrefMatchesVersion(
     version: TopicVersionOption,
     versions: TopicVersionOption[]
 ): boolean {
-    return hrefMatchesCurrentPage(applyVersionToHref(href, version, versions));
+    if (hrefMatchesCurrentPage(applyVersionToHref(href, version, versions))) {
+        return true;
+    }
+    // The server serves the latest under its canonical URL and also under
+    // `/<latestId>/`, so the versioned form must select the latest too.
+    return (
+        !!href &&
+        version.id === versions[0]?.id &&
+        hrefMatchesCurrentPage(insertVersionBeforeSlug(href, version.id))
+    );
 }
 
-function collectSubtreeCanonicalHrefs(
+export function collectSubtreeCanonicalHrefs(
     node: VersionedNode,
     includeSelf = true
 ): string[] {