diff --git a/src/plugins/console/public/application/components/editor_example.tsx b/src/plugins/console/public/application/components/editor_example.tsx index ea08a06a9e39b..e9e252e4ebb17 100644 --- a/src/plugins/console/public/application/components/editor_example.tsx +++ b/src/plugins/console/public/application/components/editor_example.tsx @@ -16,10 +16,11 @@ * specific language governing permissions and limitations * under the License. */ - -import React, { useEffect } from 'react'; +import { EuiScreenReaderOnly } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; // @ts-ignore import exampleText from 'raw-loader!../constants/help_example.txt'; +import React, { useEffect } from 'react'; import { createReadOnlyAceEditor } from '../models/legacy_core_editor'; interface EditorExampleProps { @@ -28,16 +29,31 @@ interface EditorExampleProps { export function EditorExample(props: EditorExampleProps) { const elemId = `help-example-${props.panel}`; + const inputId = `help-example-${props.panel}-input`; useEffect(() => { - const el = document.querySelector(`#${elemId}`)!; + const el = document.getElementById(elemId)!; el.textContent = exampleText.trim(); const editor = createReadOnlyAceEditor(el); + const textarea = el.querySelector('textarea')!; + textarea.setAttribute('id', inputId); + textarea.setAttribute('readonly', 'true'); return () => { editor.destroy(); }; - }, [elemId]); + }, [elemId, inputId]); - return
; + return ( + <> + + + +
+ + ); } diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx index bfa74392c14fb..daf88e28c6440 100644 --- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx +++ b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx @@ -17,31 +17,26 @@ * under the License. */ -import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react'; -import { EuiToolTip } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiScreenReaderOnly, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { debounce } from 'lodash'; import { parse } from 'query-string'; -import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { useServicesContext, useEditorReadContext } from '../../../../contexts'; -import { useUIAceKeyboardMode } from '../use_ui_ace_keyboard_mode'; +import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react'; +// @ts-ignore +import mappings from '../../../../../lib/mappings/mappings'; import { ConsoleMenu } from '../../../../components'; - -import { autoIndent, getDocumentation } from '../console_menu_actions'; -import { registerCommands } from './keyboard_shortcuts'; -import { applyCurrentSettings } from './apply_editor_settings'; - +import { useEditorReadContext, useServicesContext } from '../../../../contexts'; import { + useSaveCurrentTextObject, useSendCurrentRequestToES, useSetInputEditor, - useSaveCurrentTextObject, } from '../../../../hooks'; - import * as senseEditor from '../../../../models/sense_editor'; -// @ts-ignore -import mappings from '../../../../../lib/mappings/mappings'; - +import { autoIndent, getDocumentation } from '../console_menu_actions'; import { subscribeResizeChecker } from '../subscribe_console_resize_checker'; +import { useUIAceKeyboardMode } from '../use_ui_ace_keyboard_mode'; +import { applyCurrentSettings } from './apply_editor_settings'; +import { registerCommands } from './keyboard_shortcuts'; export interface EditorProps { initialTextValue: string; @@ -66,6 +61,8 @@ const DEFAULT_INPUT_VALUE = `GET _search } }`; +const inputId = 'ConAppInputTextarea'; + function EditorUI({ initialTextValue }: EditorProps) { const { services: { history, notifications }, @@ -95,6 +92,11 @@ function EditorUI({ initialTextValue }: EditorProps) { useEffect(() => { editorInstanceRef.current = senseEditor.create(editorRef.current!); const editor = editorInstanceRef.current; + const textareaElement = editorRef.current!.querySelector('textarea'); + + if (textareaElement) { + textareaElement.setAttribute('id', inputId); + } const readQueryParams = () => { const [, queryString] = (window.location.hash || '').split('?'); @@ -244,19 +246,19 @@ function EditorUI({ initialTextValue }: EditorProps) { - {/* Axe complains about Ace's textarea element missing a label, which interferes with our - automated a11y tests per #52136. This wrapper does nothing to address a11y but it does - satisfy Axe. */} - - {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} -