Accessibility: Fix text selection when using FocusScope (#44770)

* Add tabIndex={-1} to places using focusScope to allow for text highlighting

* use useDialog

* don't need explicit tabIndex anymore

* remove duplicate spreading of props

public/app/features/dimensions/editors/ResourcePickerPopover.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { Button, ButtonGroup, useStyles2 } from '@grafana/ui';
 import { GrafanaTheme2 } from '@grafana/data';
 import { FocusScope } from '@react-aria/focus';
+import { useDialog } from '@react-aria/dialog';
 import { useOverlay } from '@react-aria/overlays';
 
 import { MediaType, PickerTabType, ResourceFolderName } from '../types';
@@ -25,6 +26,7 @@ export const ResourcePickerPopover = (props: Props) => {
   };
 
   const ref = createRef<HTMLElement>();
+  const { dialogProps } = useDialog({}, ref);
   const { overlayProps } = useOverlay({ onClose, isDismissable: true, isOpen: true }, ref);
 
   const [newValue, setNewValue] = useState<string>(value ?? '');
@@ -59,7 +61,7 @@ export const ResourcePickerPopover = (props: Props) => {
 
   return (
     <FocusScope contain autoFocus restoreFocus>
-      <section ref={ref} {...overlayProps}>
+      <section ref={ref} {...overlayProps} {...dialogProps}>
         <div className={styles.resourcePickerPopover}>
           <div className={styles.resourcePickerPopoverTabs}>
             <button