fix: accessibility issues on share query dialog (#3708)

Author: ElinorW

src/app/views/common/copy-button/CopyButton.tsx

@@ -31,6 +31,19 @@ export default function CopyButton(props: ICopyButtonProps) {
 
   return (
     <>
+      <div
+        role="status"
+        aria-live="assertive"
+        style={{
+          position: 'absolute',
+          left: '-9999px',
+          width: '1px',
+          height: '1px',
+          overflow: 'hidden'
+        }}
+      >
+        {copied && translateMessage('Copied')}
+      </div>
       {props.isIconButton ? (
         <Tooltip content={copyLabel} relationship='label'>
           <Button
@@ -40,7 +53,7 @@ export default function CopyButton(props: ICopyButtonProps) {
           />
         </Tooltip>
       ) : (
-        <Button appearance='transparent' onClick={handleCopyClick}>
+        <Button appearance='primary' onClick={handleCopyClick}>
           {copyLabel}
         </Button>
       )}

src/app/views/common/popups/DialogWrapper.tsx

@@ -7,16 +7,23 @@ import {
   DialogTitle,
   Spinner
 } from '@fluentui/react-components';
-import { Suspense } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 
 import { WrapperProps } from './popups.types';
 
 export function DialogWrapper(props: WrapperProps) {
   const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props;
   const { settings: { title, subtitle } } = popupsProps;
+  const focusableRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen && focusableRef.current) {
+      focusableRef.current.focus();
+    }
+  }, [isOpen]);
 
   return (
-    <Dialog modalType='non-modal' open={isOpen} onOpenChange={(_, data) => !data.open && dismissPopup()}>
+    <Dialog modalType='modal' aria-modal='true' open={isOpen} onOpenChange={(_, data) => !data.open && dismissPopup()}>
       <DialogSurface>
         <DialogBody>
           {title && <DialogTitle>{title.toString()}</DialogTitle>}

src/app/views/query-runner/query-input/share-query/ShareQuery.tsx

@@ -59,7 +59,7 @@ const ShareQuery: React.FC<PopupsComponent<null>> = (props) => {
 
       <DialogActions>
         <CopyButton handleOnClick={handleCopy} isIconButton={false} />
-        <Button appearance="secondary" onClick={() => props.dismissPopup()}>
+        <Button appearance='secondary' onClick={() => props.dismissPopup()}>
           {translateMessage('Close')}
         </Button>
       </DialogActions>