@salesforcedevs/dx-components 1.40.0-docs-feedback → 1.40.0-docs-feedback-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.0-docs-feedback",
+  "version": "1.40.0-docs-feedback-1",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

package/src/modules/dx/tree/treeHandler.ts

@@ -65,7 +65,8 @@ export class TreeHandler {
             isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
             method: node.method,
-            showForwardArrow: node.showForwardArrow
+            showForwardArrow: node.showForwardArrow,
+            redirectToChild: node.redirectToChild
         };
 
         const mapItem = { node: convertedNode, parent };

package/src/modules/dx/treeItem/treeItem.ts

@@ -50,13 +50,7 @@ export default class TreeItem extends LightningElement {
     }
 
     private get isContentlessParent(): boolean {
-        const href = this._treeNode?.link?.href;
-        return (
-            this.isParent &&
-            !!href &&
-            !this.isExternalLink &&
-            href !== this._treeNode.name
-        );
+        return this.isParent && !!this._treeNode?.redirectToChild;
     }
 
     private get showChildren(): boolean {
@@ -151,8 +145,9 @@ export default class TreeItem extends LightningElement {
         this.preventDefaultLinkBehavior(event);
 
         /**
-         * For Docs content-type only redirect, content-less parents to their first content child.
-         * Let navigation handle selection and ancestor expansion to avoid flicker.
+         * A content-less parent is redirected to its first content child, so it
+         * navigates like a normal link. Navigation handles selection and
+         * ancestor expansion, avoiding flicker caused by manual toggling.
          */
         if (this.isContentlessParent) {
             this.sendGtm(event);

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

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={tileClass} target={target}>
+    <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

@@ -37,6 +37,21 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.level + 2;
     }
 
+    /**
+     * Accessible name for the link. If a parent redirects to its first child,
+     * include both the parent and child labels so the destination is clear to
+     * screen reader users (WCAG 2.4.4)
+     */
+    get linkAriaLabel(): string | null {
+        if (!this.treeNode.redirectToChild) {
+            return null;
+        }
+        const destinationLabel = this.treeNode.children?.[0]?.label;
+        return destinationLabel
+            ? `${this.treeNode.label}, opens ${destinationLabel}`
+            : null;
+    }
+
     private get iconSize() {
         return "xsmall";
     }