diff --git a/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap b/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
index e58bd37dead6c..787c5e348e51a 100644
--- a/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
+++ b/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<CodeEditor /> hint element should be tabable 1`] = `
 <div
-  aria-label="Code Editor"
+  aria-label="Code Editor, activate edit mode"
   css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,false"
   data-test-subj="codeEditorHint codeEditorHint--active"
   id="1234"
@@ -267,7 +267,7 @@ exports[`<CodeEditor /> is rendered 1`] = `
             onMouseOver={[Function]}
           >
             <div
-              aria-label="Code Editor"
+              aria-label="Code Editor, activate edit mode"
               css={
                 Array [
                   Object {
diff --git a/packages/shared-ux/code_editor/impl/code_editor.tsx b/packages/shared-ux/code_editor/impl/code_editor.tsx
index 760784fdbbcaf..5ab4d94bc9421 100644
--- a/packages/shared-ux/code_editor/impl/code_editor.tsx
+++ b/packages/shared-ux/code_editor/impl/code_editor.tsx
@@ -340,7 +340,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>
@@ -527,6 +532,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
           </div>
         ) : null}
         <UseBug177756ReBroadcastMouseDown>
+          {accessibilityOverlayEnabled && isFullScreen && renderPrompt()}
           <MonacoEditor
             theme={theme}
             language={languageId}
@@ -575,6 +581,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
 
 const useFullScreen = ({ allowFullScreen }: { allowFullScreen?: boolean }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
+  const { euiTheme } = useEuiTheme();
 
   const toggleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
@@ -616,12 +623,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;