From 3ceb6b904c0effbcad545f234888108f717685dd Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Sat, 19 Oct 2024 02:01:15 +1100
Subject: [PATCH] [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)](https://github.com/elastic/kibana/pull/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":"alexwizp@gmail.com"},"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 <alexwizp@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../impl/__snapshots__/code_editor.test.tsx.snap    |  4 ++--
 packages/shared-ux/code_editor/impl/code_editor.tsx | 13 ++++++++++---
 .../shared-ux/code_editor/impl/editor.styles.ts     |  3 ++-
 3 files changed, 14 insertions(+), 6 deletions(-)

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;