Fix: [Resources] After selection of Resources control focus does not land on first interactive control under Resources pane

packages/app/client/src/ui/shell/explorer/botExplorerBar/botExplorerBar.tsx

@@ -48,20 +48,31 @@ interface BotExplorerBarProps {
 }
 
 export default class BotExplorerBar extends React.Component<BotExplorerBarProps, Record<string, unknown>> {
-  private static get activeBotJsx(): JSX.Element {
+  private get activeBotJsx(): JSX.Element {
     return (
       <>
-        <EndpointExplorerContainer title="Endpoint" ariaLabel="Endpoints" />
+        <EndpointExplorerContainer title="Endpoint" ariaLabel="Endpoints" elementRef={this.setEndpointsPanelRef} />
         <ServicesExplorerContainer title="Services" ariaLabel="Services" />
       </>
     );
   }
 
   private openBotSettingsButtonRef: HTMLButtonElement;
+  private endpointsPanelRef: HTMLElement;
+
+  public componentDidMount(): void {
+    if (this.endpointsPanelRef) {
+      this.endpointsPanelRef.focus();
+    }
+  }
 
   public render() {
     const className = this.props.hidden ? styles.explorerOffScreen : '';
-    const explorerBody = this.props.activeBot ? BotExplorerBar.activeBotJsx : <BotNotOpenExplorerContainer />;
+    const explorerBody = this.props.activeBot ? (
+      this.activeBotJsx
+    ) : (
+      <BotNotOpenExplorerContainer elementRef={this.setEndpointsPanelRef} />
+    );
     return (
       <div className={`${styles.botExplorerBar} ${className}`}>
         <div className={explorerStyles.explorerBarHeader}>
@@ -91,4 +102,8 @@ export default class BotExplorerBar extends React.Component<BotExplorerBarProps,
   private setOpenBotSettingsRef = (ref: HTMLButtonElement): void => {
     this.openBotSettingsButtonRef = ref;
   };
+
+  private setEndpointsPanelRef = (elementRef: HTMLElement) => {
+    this.endpointsPanelRef = elementRef;
+  };
 }

packages/app/client/src/ui/shell/explorer/botNotOpenExplorer/botNotOpenExplorer.tsx

@@ -40,6 +40,7 @@ export interface BotNotOpenExplorerProps {
   hasChat?: boolean;
   openBotFile?: () => Promise<any>;
   showCreateNewBotDialog?: () => void;
+  elementRef?: (ref: HTMLElement) => void;
 }
 
 export class BotNotOpenExplorer extends React.Component<BotNotOpenExplorerProps, Record<string, unknown>> {
@@ -50,7 +51,7 @@ export class BotNotOpenExplorer extends React.Component<BotNotOpenExplorerProps,
     return (
       <ul className={styles.botNotOpenExplorer}>
         <li>
-          <ExpandCollapse expanded={true} ariaLabel={label} title={label}>
+          <ExpandCollapse expanded={true} ariaLabel={label} title={label} elementRef={this.props.elementRef}>
             <ExpandCollapseContent>
               <div className={styles.explorerEmptyState}>
                 {`To connect the Emulator services, `}

packages/app/client/src/ui/shell/explorer/resourcesBar/resourcesBar.tsx

@@ -47,6 +47,14 @@ export interface ResourcesBarProps {
 }
 
 export class ResourcesBar extends Component<ResourcesBarProps, ResourcesBarProps> {
+  private chatFilesRef: HTMLElement;
+
+  public componentDidMount(): void {
+    if (this.chatFilesRef) {
+      this.chatFilesRef.focus();
+    }
+  }
+
   public render() {
     return (
       <div className={styles.resourcesBar}>
@@ -56,6 +64,7 @@ export class ResourcesBar extends Component<ResourcesBarProps, ResourcesBarProps
         <ul className={explorerStyles.explorerSet}>
           <li>
             <ResourceExplorerContainer
+              elementRef={this.setChatFilesRef}
               files={this.props.chatFiles}
               resourcesPath={this.props.chatsPath}
               title="chat files"
@@ -72,4 +81,7 @@ export class ResourcesBar extends Component<ResourcesBarProps, ResourcesBarProps
       </div>
     );
   }
+  private setChatFilesRef = (elementRef: HTMLElement) => {
+    this.chatFilesRef = elementRef;
+  };
 }

packages/app/client/src/ui/shell/explorer/servicePane/servicePane.tsx

@@ -45,6 +45,7 @@ export interface ServicePaneProps extends ServicePaneState {
   title?: string;
   ariaLabel?: string;
   sortCriteria?: string;
+  elementRef?: (ref: HTMLElement) => void;
 }
 
 export interface ServicePaneState {
@@ -181,6 +182,7 @@ export abstract class ServicePane<
         className={styles.servicePane}
         key={this.props.title}
         title={this.props.title}
+        elementRef={this.props.elementRef}
         ariaLabel={this.props.ariaLabel}
         expanded={this.state.expanded}
       >

packages/sdk/ui-react/src/layout/expandCollapse/expandCollapse.tsx

@@ -43,6 +43,7 @@ export interface ExpandCollapseProps {
   title?: string;
   className?: string;
   ariaLabel?: string;
+  elementRef?: (ref: HTMLElement) => void;
 }
 
 export interface ExpandCollapseState {
@@ -66,6 +67,7 @@ export class ExpandCollapse extends React.Component<ExpandCollapseProps, ExpandC
     return (
       <div className={`${styles.expandCollapse} ${className} ${expanded ? 'expanded' : ''}`}>
         <div
+          ref={this.setElementRef}
           aria-expanded={expanded}
           aria-label={ariaLabel}
           role="toolbar"
@@ -119,4 +121,11 @@ export class ExpandCollapse extends React.Component<ExpandCollapseProps, ExpandC
       this.onToggleExpandedButtonClick();
     }
   };
+
+  private setElementRef = (ref: HTMLElement): void => {
+    const { elementRef } = this.props;
+    if (elementRef) {
+      elementRef(ref);
+    }
+  };
 }