From 97e0a5c235fba7a04862bc1980479fb552c652d8 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 11 Oct 2024 16:42:16 +0300
Subject: [PATCH] fix: [Stateful: Home page] Wrong announcement of code editor

Closes: https://github.com/elastic/kibana/issues/195289
---
 packages/shared-ux/code_editor/impl/code_editor.tsx | 13 ++++++++++---
 .../shared-ux/code_editor/impl/editor.styles.ts     |  3 ++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx
index 0ac1dd2334800..a79caad3036e4 100644
--- a/packages/shared-ux/code_editor/impl/code_editor.tsx
+++ b/packages/shared-ux/code_editor/impl/code_editor.tsx
@@ -341,7 +341,12 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
           role="button"
           onClick={startEditing}
           onKeyDown={onKeyDownHint}
-          aria-label={ariaLabel}
+          aria-label={i18n.translate('sharedUXPackages.codeEditor.codeEditorEditButton', {
+            defaultMessage: '{codeEditorAriaLabel}, activate edit mode',
+            values: {
+              codeEditorAriaLabel: ariaLabel,
+            },
+          })}
           data-test-subj={`codeEditorHint codeEditorHint--${isHintActive ? 'active' : 'inactive'}`}
         />
       </EuiToolTip>
@@ -528,6 +533,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
           </div>
         ) : null}
         <UseBug177756ReBroadcastMouseDown>
+          {accessibilityOverlayEnabled && renderPrompt()}
           <MonacoEditor
             theme={theme}
             language={languageId}
@@ -576,6 +582,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
 
 const useFullScreen = ({ allowFullScreen }: { allowFullScreen?: boolean }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
+  const { euiTheme } = useEuiTheme();
 
   const toggleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
@@ -617,12 +624,12 @@ const useFullScreen = ({ allowFullScreen }: { allowFullScreen?: boolean }) => {
         return (
           <EuiOverlayMask>
             <EuiFocusTrap clickOutsideDisables={true}>
-              <div css={styles.fullscreenContainer}>{children}</div>
+              <div css={styles.fullscreenContainer(euiTheme)}>{children}</div>
             </EuiFocusTrap>
           </EuiOverlayMask>
         );
       },
-    [isFullScreen]
+    [isFullScreen, euiTheme]
   );
 
   return {
diff --git a/packages/shared-ux/code_editor/impl/editor.styles.ts b/packages/shared-ux/code_editor/impl/editor.styles.ts
index 62f15a4a88317..2d12cd01d031b 100644
--- a/packages/shared-ux/code_editor/impl/editor.styles.ts
+++ b/packages/shared-ux/code_editor/impl/editor.styles.ts
@@ -15,10 +15,11 @@ export const styles = {
     position: relative;
     height: 100%;
   `,
-  fullscreenContainer: css`
+  fullscreenContainer: (euiTheme: EuiThemeComputed) => css`
     position: absolute;
     left: 0;
     top: 0;
+    background: ${euiTheme.colors.body};
   `,
   keyboardHint: (euiTheme: EuiThemeComputed) => css`
     position: absolute;