[8.x] fix: [Stateful: Home page] Wrong announcement of code editor (#…

…195922) (#196299)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Home page] Wrong announcement of code editor
(#195922)](#195922)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-15T12:30:55Z","message":"fix:
[Stateful: Home page] Wrong announcement of code editor
(#195922)\n\nCloses:
https://github.com/elastic/kibana/issues/195289\r\nCloses:
https://github.com/elastic/kibana/issues/195198\r\nCloses:
https://github.com/elastic/kibana/issues/195358\r\n\r\n## Description
\r\n\r\n- The text editor must be fully accessible and functional across
all\r\ndevices, ensuring users can edit text using various input
methods, not\r\njust a mouse. This functionality should be available in
both the\r\nexpanded and collapsed states.\r\n\r\n- Appropriate
aria-label attribute must be assigned to elements to\r\nprovide users
with clear context and understanding of the type of\r\nelement they are
interacting with. This enhances usability and\r\naccessibility for all
users.\r\n\r\n## What was changed: \r\n\r\n- Updated the aria-label
attribute for the editor button to improve\r\naccessibility.\r\n-
Resolved an issue with the background color when
activating\r\nfull-screen mode from the dialog.\r\n- Fixed keyboard
navigation for full-screen mode, enabling users to\r\nactivate Edit Mode
using only the keyboard.\r\n\r\n## Screen
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/af122fab-3ce9-4a7f-b8b1-d75d39969781","sha":"04efa04d6b8fc7ac6bc6996717453bd56200104a","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Stateful: Home page] Wrong announcement of code
editor","number":195922,"url":"https://github.com/elastic/kibana/pull/195922","mergeCommit":{"message":"fix:
[Stateful: Home page] Wrong announcement of code editor
(#195922)\n\nCloses:
https://github.com/elastic/kibana/issues/195289\r\nCloses:
https://github.com/elastic/kibana/issues/195198\r\nCloses:
https://github.com/elastic/kibana/issues/195358\r\n\r\n## Description
\r\n\r\n- The text editor must be fully accessible and functional across
all\r\ndevices, ensuring users can edit text using various input
methods, not\r\njust a mouse. This functionality should be available in
both the\r\nexpanded and collapsed states.\r\n\r\n- Appropriate
aria-label attribute must be assigned to elements to\r\nprovide users
with clear context and understanding of the type of\r\nelement they are
interacting with. This enhances usability and\r\naccessibility for all
users.\r\n\r\n## What was changed: \r\n\r\n- Updated the aria-label
attribute for the editor button to improve\r\naccessibility.\r\n-
Resolved an issue with the background color when
activating\r\nfull-screen mode from the dialog.\r\n- Fixed keyboard
navigation for full-screen mode, enabling users to\r\nactivate Edit Mode
using only the keyboard.\r\n\r\n## Screen
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/af122fab-3ce9-4a7f-b8b1-d75d39969781","sha":"04efa04d6b8fc7ac6bc6996717453bd56200104a"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195922","number":195922,"mergeCommit":{"message":"fix:
[Stateful: Home page] Wrong announcement of code editor
(#195922)\n\nCloses:
https://github.com/elastic/kibana/issues/195289\r\nCloses:
https://github.com/elastic/kibana/issues/195198\r\nCloses:
https://github.com/elastic/kibana/issues/195358\r\n\r\n## Description
\r\n\r\n- The text editor must be fully accessible and functional across
all\r\ndevices, ensuring users can edit text using various input
methods, not\r\njust a mouse. This functionality should be available in
both the\r\nexpanded and collapsed states.\r\n\r\n- Appropriate
aria-label attribute must be assigned to elements to\r\nprovide users
with clear context and understanding of the type of\r\nelement they are
interacting with. This enhances usability and\r\naccessibility for all
users.\r\n\r\n## What was changed: \r\n\r\n- Updated the aria-label
attribute for the editor button to improve\r\naccessibility.\r\n-
Resolved an issue with the background color when
activating\r\nfull-screen mode from the dialog.\r\n- Fixed keyboard
navigation for full-screen mode, enabling users to\r\nactivate Edit Mode
using only the keyboard.\r\n\r\n## Screen
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/af122fab-3ce9-4a7f-b8b1-d75d39969781","sha":"04efa04d6b8fc7ac6bc6996717453bd56200104a"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

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 {

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;