@salesforcedevs/dx-components 1.3.31 → 1.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.31",
+    "version": "1.3.32",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -38,5 +38,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "ba2b0b5eae88123861d953a9c1ebc80a5b3bbe22"
+    "gitHead": "550125540ec042bed34b7643f50548ffcc774093"
 }

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -6,7 +6,7 @@
         target={option.link.target}
         key={option.id}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >
@@ -35,7 +35,7 @@
         if:false={option.link}
         class={className}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >

package/src/modules/dx/sidebar/sidebar.css

@@ -12,6 +12,10 @@ dx-empty-state {
     padding-bottom: var(--dx-g-spacing-md);
 }
 
+.sidebar-content-tree {
+    padding: var(--dx-g-spacing-xs);
+}
+
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onfocus={onItemsFocused}
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -257,4 +257,10 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private onItemsFocused(): void {
+        this.template
+            .querySelector("dx-sidebar-search")
+            ?.requestOpenDropdown(false);
+    }
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -78,6 +78,11 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
+    @api
+    requestOpenDropdown(value: boolean) {
+        this.dropdownRequestedOpen = value;
+    }
+
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} target={target} onclick={onLinkClick}>
+    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -18,7 +18,7 @@
         src="/assets/svg/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
-    <template if:true={showChildren}>
+    <template if:true={showChildren} tabindex="0">
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item
                 key={child.key}