Fix a11y keyboard overlay (#71214)

- reinclude styling for the keyboard overlay (copied from legacy)
- refactor the exports of es_ui_shared to follow new pattern

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -22,7 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { debounce } from 'lodash';
 import { parse } from 'query-string';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
-import { useUIAceKeyboardMode } from '../../../../../../../es_ui_shared/public';
+import { ace } from '../../../../../../../es_ui_shared/public';
 // @ts-ignore
 import { retrieveAutoCompleteInfo, clearSubscriptions } from '../../../../../lib/mappings/mappings';
 import { ConsoleMenu } from '../../../../components';
@@ -38,6 +38,8 @@ import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
 import { applyCurrentSettings } from './apply_editor_settings';
 import { registerCommands } from './keyboard_shortcuts';
 
+const { useUIAceKeyboardMode } = ace;
+
 export interface EditorProps {
   initialTextValue: string;
 }

src/plugins/es_ui_shared/__packages_do_not_import__/ace/_ui_ace_keyboard_mode.scss

@@ -0,0 +1,24 @@
+.kbnUiAceKeyboardHint {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: transparentize($euiColorEmptyShade, 0.3);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  opacity: 0;
+
+  &:focus {
+    opacity: 1;
+    border: 2px solid $euiColorPrimary;
+    z-index: $euiZLevel1;
+  }
+
+  &.kbnUiAceKeyboardHint-isInactive {
+    display: none;
+  }
+}

src/plugins/es_ui_shared/__packages_do_not_import__/ace/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';

src/plugins/es_ui_shared/public/use_ui_ace_keyboard_mode.tsx → src/plugins/es_ui_shared/__packages_do_not_import__/ace/use_ui_ace_keyboard_mode.tsx

@@ -16,10 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useEffect, useRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import { keys, EuiText } from '@elastic/eui';
 
+import './_ui_ace_keyboard_mode.scss';
+
 const OverlayText = () => (
   // The point of this element is for accessibility purposes, so ignore eslint error
   // in this case

src/plugins/es_ui_shared/public/ace/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { useUIAceKeyboardMode } from '../../__packages_do_not_import__/ace';

src/plugins/es_ui_shared/public/index.ts

@@ -23,6 +23,7 @@
  */
 import * as Forms from './forms';
 import * as Monaco from './monaco';
+import * as ace from './ace';
 
 export { JsonEditor, OnJsonEditorUpdateHandler } from './components/json_editor';
 
@@ -41,8 +42,6 @@ export {
 
 export { indices } from './indices';
 
-export { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';
-
 export {
   installXJsonMode,
   XJsonMode,
@@ -66,7 +65,7 @@ export {
   useAuthorizationContext,
 } from './authorization';
 
-export { Monaco, Forms };
+export { Monaco, Forms, ace };
 
 export { extractQueryParams } from './url';
 

x-pack/plugins/searchprofiler/public/application/editor/editor.tsx

@@ -10,7 +10,9 @@ import { EuiScreenReaderOnly } from '@elastic/eui';
 import { Editor as AceEditor } from 'brace';
 
 import { initializeEditor } from './init_editor';
-import { useUIAceKeyboardMode } from '../../../../../../src/plugins/es_ui_shared/public';
+import { ace } from '../../../../../../src/plugins/es_ui_shared/public';
+
+const { useUIAceKeyboardMode } = ace;
 
 type EditorShim = ReturnType<typeof createEditorShim>;