fix: [Stateful: Home page] Wrong announcement of code editor (#195922)

Closes: https://github.com/elastic/kibana/issues/195289
Closes: https://github.com/elastic/kibana/issues/195198
Closes: https://github.com/elastic/kibana/issues/195358

## Description 

- The text editor must be fully accessible and functional across all
devices, ensuring users can edit text using various input methods, not
just a mouse. This functionality should be available in both the
expanded and collapsed states.

- Appropriate aria-label attribute must be assigned to elements to
provide users with clear context and understanding of the type of
element they are interacting with. This enhances usability and
accessibility for all users.

## What was changed: 

- Updated the aria-label attribute for the editor button to improve
accessibility.
- Resolved an issue with the background color when activating
full-screen mode from the dialog.
- Fixed keyboard navigation for full-screen mode, enabling users to
activate Edit Mode using only the keyboard.

## Screen 


https://github.com/user-attachments/assets/af122fab-3ce9-4a7f-b8b1-d75d39969781

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 {

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 && isFullScreen && 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 {

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;