[Discover] Fix classic and ES|QL switch button a11y issues (#216471) (#221246)

## Summary

Closes #216471

- Changed Monaco props in ES|QL editor to have accesibility support

| Before | After |
|--------|------|
| <img width="488" alt="image (3)"
src="https://github.com/user-attachments/assets/e7771a34-0ef2-408f-9b84-1165306ed241"
/> | <img width="493" alt="image (2)"
src="https://github.com/user-attachments/assets/1d13b700-f3cc-43e0-8a2f-0a1a9c7cd729"
/> |

- Changed field list grouped to only have aria-live enabled when the
search input is focused

| Scenario | Before | After |
|----------|--------|------|
| Classic to ESQL | <img width="487" alt="image (5)"
src="https://github.com/user-attachments/assets/de18d15d-cadb-4ea2-af02-285ab196db64"
/> | <img width="486" alt="image"
src="https://github.com/user-attachments/assets/9a3c55f1-5ae0-44ef-8029-344543a32880"
/> |
| ESQL to Classic | <img width="489" alt="image (4)"
src="https://github.com/user-attachments/assets/ebfd6f56-4f02-46e5-aa79-1fb0f515cc97"
/> | <img width="486" alt="image (7)"
src="https://github.com/user-attachments/assets/8a260a4f-2ad2-4ff9-af1e-7f7767c8df70"
/> |


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: Matthias Wilhelm <[email protected]>

Author: AlexGPlay

src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx

@@ -717,7 +717,7 @@ export const ESQLEditor = memo(function ESQLEditor({
       hover: {
         above: false,
       },
-      accessibilitySupport: 'off',
+      accessibilitySupport: 'auto',
       autoIndent: 'keep',
       automaticLayout: true,
       fixedOverflowWidgets: true,

src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_list_filters.tsx

@@ -24,6 +24,8 @@ export interface FieldListFiltersProps<T extends FieldListItem> {
   getCustomFieldType?: FieldTypeFilterProps<T>['getCustomFieldType'];
   onSupportedFieldFilter?: FieldTypeFilterProps<T>['onSupportedFieldFilter'];
   onChangeFieldTypes: FieldTypeFilterProps<T>['onChange'];
+  onFieldNameSearchFocus?: () => void;
+  onFieldNameSearchBlur?: () => void;
   compressed?: FieldNameSearchProps['compressed'];
   nameFilter: FieldNameSearchProps['nameFilter'];
   screenReaderDescriptionId?: FieldNameSearchProps['screenReaderDescriptionId'];
@@ -59,6 +61,8 @@ function InnerFieldListFilters<T extends FieldListItem = DataViewField>({
   nameFilter,
   screenReaderDescriptionId,
   onChangeNameFilter,
+  onFieldNameSearchBlur,
+  onFieldNameSearchFocus,
 }: FieldListFiltersProps<T>) {
   return (
     <FieldNameSearch
@@ -80,6 +84,8 @@ function InnerFieldListFilters<T extends FieldListItem = DataViewField>({
       nameFilter={nameFilter}
       screenReaderDescriptionId={screenReaderDescriptionId}
       onChange={onChangeNameFilter}
+      onFocus={onFieldNameSearchFocus}
+      onBlur={onFieldNameSearchBlur}
     />
   );
 }

src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_name_search.tsx

@@ -22,6 +22,8 @@ export interface FieldNameSearchProps {
   nameFilter: string;
   screenReaderDescriptionId?: string;
   onChange: (nameFilter: string) => unknown;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 /**
@@ -41,6 +43,8 @@ export const FieldNameSearch: React.FC<FieldNameSearchProps> = ({
   nameFilter,
   screenReaderDescriptionId,
   onChange,
+  onFocus,
+  onBlur,
 }) => {
   const searchPlaceholder = i18n.translate('unifiedFieldList.fieldNameSearch.filterByNameLabel', {
     defaultMessage: 'Search field names',
@@ -61,6 +65,8 @@ export const FieldNameSearch: React.FC<FieldNameSearchProps> = ({
       onChange={(e) => {
         handleInputChange(e.target.value);
       }}
+      onFocus={onFocus}
+      onBlur={onBlur}
       placeholder={searchPlaceholder}
       value={inputValue}
       append={append}

src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/field_list_grouped.tsx

@@ -41,6 +41,7 @@ export interface FieldListGroupedProps<T extends FieldListItem> {
   scrollToTopResetCounter: number;
   screenReaderDescriptionId?: string;
   localStorageKeyPrefix?: string; // Your app name: "discover", "lens", etc. If not provided, sections state would not be persisted.
+  muteScreenReader?: boolean; // Changes aria-live from "polite" to "off" - it's useful when the numbers change due to something not directly related to the field list and we want to avoid announcing it.
   'data-test-subj'?: string;
 }
 
@@ -51,6 +52,7 @@ function InnerFieldListGrouped<T extends FieldListItem = DataViewField>({
   renderFieldItem,
   scrollToTopResetCounter,
   screenReaderDescriptionId,
+  muteScreenReader,
   localStorageKeyPrefix,
   'data-test-subj': dataTestSubject = 'fieldListGrouped',
 }: FieldListGroupedProps<T>) {
@@ -141,7 +143,7 @@ function InnerFieldListGrouped<T extends FieldListItem = DataViewField>({
         {Boolean(screenReaderDescriptionId) && (
           <EuiScreenReaderOnly>
             <div
-              aria-live="polite"
+              aria-live={muteScreenReader ? 'off' : 'polite'}
               id={screenReaderDescriptionId}
               data-test-subj={`${dataTestSubject}__ariaDescription`}
             >

src/platform/packages/shared/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx

@@ -181,6 +181,7 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
   const [multiFieldsMap, setMultiFieldsMap] = useState<
     Map<string, Array<{ field: DataViewField; isSelected: boolean }>> | undefined
   >(undefined);
+  const [isFieldNameSearchFocused, setIsFieldNameSearchFocused] = useState(false);
 
   useEffect(() => {
     const result = getSelectedFields({
@@ -393,7 +394,12 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
                   <EuiFlexItem grow={false}>{sidebarToggleButton}</EuiFlexItem>
                 )}
                 <EuiFlexItem>
-                  <FieldListFilters {...fieldListFiltersProps} compressed={compressed} />
+                  <FieldListFilters
+                    {...fieldListFiltersProps}
+                    compressed={compressed}
+                    onFieldNameSearchBlur={() => setIsFieldNameSearchFocused(false)}
+                    onFieldNameSearchFocus={() => setIsFieldNameSearchFocused(true)}
+                  />
                 </EuiFlexItem>
               </EuiFlexGroup>
             }
@@ -404,6 +410,7 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
                 {...fieldListGroupedProps}
                 renderFieldItem={renderFieldItem}
                 localStorageKeyPrefix={stateService.creationOptions.localStorageKeyPrefix}
+                muteScreenReader={!isFieldNameSearchFocused}
               />
             ) : (
               <EuiFlexItem grow />

src/platform/plugins/shared/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx

@@ -7,6 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { render, screen, act as rtlAct } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { BehaviorSubject } from 'rxjs';
 import type { ReactWrapper } from 'enzyme';
 import { findTestSubject } from '@elastic/eui/lib/test';
@@ -34,6 +37,9 @@ import type { DiscoverCustomizationId } from '../../../../customizations/customi
 import type { FieldListCustomization, SearchBarCustomization } from '../../../../customizations';
 import { RuntimeStateProvider } from '../../state_management/redux';
 import { DiscoverMainProvider } from '../../state_management/discover_state_provider';
+import type { DataView } from '@kbn/data-views-plugin/common';
+
+type TestWrapperProps = DiscoverSidebarResponsiveProps & { selectedDataView: DataView };
 
 const mockSearchBarCustomization: SearchBarCustomization = {
   id: 'search_bar',
@@ -143,7 +149,7 @@ jest.mock('@kbn/discover-utils/src/utils/calc_field_counts', () => ({
 
 jest.spyOn(ExistingFieldsServiceApi, 'loadFieldExisting');
 
-function getCompProps(options?: { hits?: DataTableRecord[] }): DiscoverSidebarResponsiveProps {
+function getCompProps(options?: { hits?: DataTableRecord[] }): TestWrapperProps {
   const dataView = stubLogstashDataView;
   dataView.toSpec = jest.fn(() => ({}));
 
@@ -186,12 +192,16 @@ function getStateContainer({ query }: { query?: Query | AggregateQuery }) {
   return stateContainer;
 }
 
-async function mountComponent(
-  props: DiscoverSidebarResponsiveProps,
+type EnzymeReturnType = ReactWrapper<TestWrapperProps>;
+type MountReturn<WithRTL extends boolean> = WithRTL extends true ? undefined : EnzymeReturnType;
+
+async function mountComponent<WithReactTestingLibrary extends boolean = false>(
+  props: TestWrapperProps,
   appStateParams: { query?: Query | AggregateQuery } = {},
-  services?: DiscoverServices
-): Promise<ReactWrapper<DiscoverSidebarResponsiveProps>> {
-  let comp: ReactWrapper<DiscoverSidebarResponsiveProps>;
+  services?: DiscoverServices,
+  withReactTestingLibrary?: WithReactTestingLibrary
+): Promise<MountReturn<WithReactTestingLibrary>> {
+  let comp: ReactWrapper<TestWrapperProps>;
   const stateContainer = getStateContainer(appStateParams);
   const mockedServices = services ?? createMockServices();
   mockedServices.data.dataViews.getIdsWithTitle = jest.fn(async () =>
@@ -206,30 +216,37 @@ async function mountComponent(
     .fn()
     .mockImplementation(() => stateContainer.appState.getState());
 
+  const component = (
+    <EuiProvider>
+      <KibanaContextProvider services={mockedServices}>
+        <DiscoverMainProvider value={stateContainer}>
+          <RuntimeStateProvider currentDataView={props.selectedDataView} adHocDataViews={[]}>
+            <DiscoverSidebarResponsive {...props} />
+          </RuntimeStateProvider>
+        </DiscoverMainProvider>
+      </KibanaContextProvider>
+    </EuiProvider>
+  );
+
+  if (withReactTestingLibrary) {
+    await rtlAct(() => render(<IntlProvider locale="en">{component}</IntlProvider>));
+    return undefined as MountReturn<WithReactTestingLibrary>;
+  }
+
   await act(async () => {
-    comp = mountWithIntl(
-      <EuiProvider>
-        <KibanaContextProvider services={mockedServices}>
-          <DiscoverMainProvider value={stateContainer}>
-            <RuntimeStateProvider currentDataView={props.selectedDataView!} adHocDataViews={[]}>
-              <DiscoverSidebarResponsive {...props} />{' '}
-            </RuntimeStateProvider>
-          </DiscoverMainProvider>
-        </KibanaContextProvider>
-      </EuiProvider>
-    );
+    comp = mountWithIntl(component);
     // wait for lazy modules
     await new Promise((resolve) => setTimeout(resolve, 0));
     comp.update();
   });
 
   comp!.update();
 
-  return comp!;
+  return comp! as unknown as MountReturn<WithReactTestingLibrary>;
 }
 
 describe('discover responsive sidebar', function () {
-  let props: DiscoverSidebarResponsiveProps;
+  let props: TestWrapperProps;
 
   beforeEach(async () => {
     (ExistingFieldsServiceApi.loadFieldExisting as jest.Mock).mockImplementation(async () => ({
@@ -328,17 +345,42 @@ describe('discover responsive sidebar', function () {
     expect(ExistingFieldsServiceApi.loadFieldExisting).toHaveBeenCalledTimes(1);
   });
 
-  it('should set a11y attributes for the search input in the field list', async function () {
-    const comp = await mountComponent(props);
+  describe('when the input is not focused', () => {
+    it('should set a11y attributes for the search input in the field list', async function () {
+      // When
+      await mountComponent(props, undefined, undefined, true);
 
-    const a11yDescription = findTestSubject(comp, 'fieldListGrouped__ariaDescription');
-    expect(a11yDescription.prop('aria-live')).toBe('polite');
-    expect(a11yDescription.text()).toBe(
-      '1 selected field. 4 popular fields. 3 available fields. 20 empty fields. 2 meta fields.'
-    );
+      // Then
+      const a11yDescription = screen.getByTestId('fieldListGrouped__ariaDescription');
+      expect(a11yDescription).toHaveAttribute('aria-live', 'off');
+      expect(a11yDescription).toHaveTextContent(
+        '1 selected field. 4 popular fields. 3 available fields. 20 empty fields. 2 meta fields.'
+      );
+
+      const searchInput = screen.getByTestId('fieldListFiltersFieldSearch');
+      expect(searchInput).toHaveAttribute('aria-describedby', a11yDescription.id);
+    });
+  });
 
-    const searchInput = findTestSubject(comp, 'fieldListFiltersFieldSearch');
-    expect(searchInput.first().prop('aria-describedby')).toBe(a11yDescription.prop('id'));
+  describe('when the input is focused', () => {
+    it('should set a11y attributes for the search input in the field list', async function () {
+      // Given
+      const user = userEvent.setup();
+
+      // When
+      await mountComponent(props, undefined, undefined, true);
+
+      // Then
+      const searchInput = screen.getByTestId('fieldListFiltersFieldSearch');
+      const a11yDescription = screen.getByTestId('fieldListGrouped__ariaDescription');
+      await user.click(searchInput);
+      expect(searchInput).toHaveAttribute('aria-describedby', a11yDescription.id);
+
+      expect(a11yDescription).toHaveAttribute('aria-live', 'polite');
+      expect(a11yDescription).toHaveTextContent(
+        '1 selected field. 4 popular fields. 3 available fields. 20 empty fields. 2 meta fields.'
+      );
+    });
   });
 
   it('should not have selected fields if no columns selected', async function () {
@@ -385,7 +427,7 @@ describe('discover responsive sidebar', function () {
   });
 
   it('should not calculate counts if documents are not fetched yet', async function () {
-    const propsWithoutDocuments: DiscoverSidebarResponsiveProps = {
+    const propsWithoutDocuments: TestWrapperProps = {
       ...props,
       documents$: new BehaviorSubject({
         fetchStatus: FetchStatus.UNINITIALIZED,
@@ -662,7 +704,7 @@ describe('discover responsive sidebar', function () {
 
   it('should render buttons in data view picker correctly', async () => {
     const services = createMockServices();
-    const propsWithPicker: DiscoverSidebarResponsiveProps = {
+    const propsWithPicker: TestWrapperProps = {
       ...props,
       fieldListVariant: 'button-and-flyout-always',
     };
@@ -694,7 +736,7 @@ describe('discover responsive sidebar', function () {
     const services = createMockServices();
     services.dataViewEditor.userPermissions.editDataView = jest.fn(() => false);
     services.dataViewFieldEditor.userPermissions.editIndexPattern = jest.fn(() => false);
-    const propsWithPicker: DiscoverSidebarResponsiveProps = {
+    const propsWithPicker: TestWrapperProps = {
       ...props,
       fieldListVariant: 'button-and-flyout-always',
     };

src/platform/test/functional/page_objects/unified_field_list.ts

@@ -25,7 +25,7 @@ export class UnifiedFieldListPageObject extends FtrService {
 
   public async clearFieldSearchInput() {
     const fieldSearch = await this.testSubjects.find('fieldListFiltersFieldSearch');
-    await fieldSearch.clearValue();
+    await fieldSearch.clearValueWithKeyboard();
   }
 
   public async getAllFieldNames() {