Scopes: Add autofocus, aria-label and search area to selector (#108906)

* Add autofocus, aria-label and search area

* Clean up search area

* Clean up search area

* Add test

* Remove superflous memo

* Undo values change

public/app/features/scopes/selector/ScopesTree.tsx

@@ -63,11 +63,20 @@ export function ScopesTree({
     }
   }
 
+  // Used as a label and placeholder for search field
+  const nodeTitle = scopeNodes[tree.scopeNodeId]?.spec?.title || '';
+  const searchArea = tree.scopeNodeId === '' ? '' : nodeTitle;
+
   const lastExpandedNode = !anyChildExpanded && tree.expanded;
 
   return (
     <>
-      <ScopesTreeSearch anyChildExpanded={anyChildExpanded} onNodeUpdate={onNodeUpdate} treeNode={tree} />
+      <ScopesTreeSearch
+        anyChildExpanded={anyChildExpanded}
+        searchArea={searchArea}
+        onNodeUpdate={onNodeUpdate}
+        treeNode={tree}
+      />
       {tree.scopeNodeId === '' &&
         !anyChildExpanded &&
         recentScopes &&

public/app/features/scopes/selector/ScopesTreeSearch.tsx

@@ -10,11 +10,12 @@ import { TreeNode } from './types';
 
 export interface ScopesTreeSearchProps {
   anyChildExpanded: boolean;
+  searchArea: string;
   treeNode: TreeNode;
   onNodeUpdate: (scopeNodeId: string, expanded: boolean, query: string) => void;
 }
 
-export function ScopesTreeSearch({ anyChildExpanded, treeNode, onNodeUpdate }: ScopesTreeSearchProps) {
+export function ScopesTreeSearch({ anyChildExpanded, treeNode, onNodeUpdate, searchArea }: ScopesTreeSearchProps) {
   const styles = useStyles2(getStyles);
 
   const [inputState, setInputState] = useState<{ value: string; dirty: boolean }>({
@@ -42,9 +43,16 @@ export function ScopesTreeSearch({ anyChildExpanded, treeNode, onNodeUpdate }: S
     return null;
   }
 
+  const searchLabel = t('scopes.tree.search', 'Search {{parentTitle}}', {
+    parentTitle: searchArea,
+  });
+
   return (
     <FilterInput
-      placeholder={t('scopes.tree.search', 'Search')}
+      placeholder={searchLabel}
+      // Don't do autofocus for root node
+      autoFocus={treeNode.scopeNodeId !== ''}
+      aria-label={searchLabel}
       value={inputState.value}
       className={styles.input}
       data-testid="scopes-tree-search"

public/app/features/scopes/tests/tree.test.ts

@@ -1,3 +1,5 @@
+import { screen } from '@testing-library/react';
+
 import { config, locationService } from '@grafana/runtime';
 
 import { ScopesService } from '../ScopesService';
@@ -71,6 +73,14 @@ describe('Tree', () => {
     await resetScenes([fetchNodesSpy, fetchScopeSpy]);
   });
 
+  it('Gives autofocus to search field when node is expanded', async () => {
+    await openSelector();
+    expect(screen.getByRole('textbox', { name: 'Search' })).not.toHaveFocus();
+
+    await expandResultApplications();
+    expect(screen.getByRole('textbox', { name: 'Search Applications' })).toHaveFocus();
+  });
+
   it('Fetches scope details on select', async () => {
     await openSelector();
     await expandResultApplications();

public/locales/en-US/grafana.json

@@ -11874,7 +11874,7 @@
         "recommended": "Recommended",
         "results": "Results"
       },
-      "search": "Search"
+      "search": "Search {{parentTitle}}"
     }
   },
   "search": {