fix: [Alerts > Landing][AXE-CORE]: Buttons must have discernible text (…

…elastic#177817)

Closes: elastic/security-team#8576

## Summary

The axe browser plugin is reporting that the Alerts landing page has 4
buttons without discernible text. I found that the `OptionsListControl`
sets selected values for the `aria-label` attribute, which is not
correct and requires correction.

What was done in that PR: 
- The value for `aria-label` was updated; now it is equal to
state.explicitInput.title || state.explicitInput.fieldName.
- `role="combobox"` was set for `EuiInputPopover.input`.
- The argument for `OptionsListStrings.popover.getAriaLabel` was
updated. We should read the title, and if that value is empty, read the
fieldName.

## Screens

<img width="1495" alt="image"
src="https://github.com/elastic/kibana/assets/20072247/a925663e-e53e-4817-a8ee-ea91f5675acf">

#### Axe report 

<img width="939" alt="image"
src="https://github.com/elastic/kibana/assets/20072247/3ba859b5-a764-4502-bf0f-ad5dadc5e434">

No related issues

src/plugins/controls/public/options_list/components/options_list_control.tsx

@@ -19,6 +19,7 @@ import {
   EuiInputPopover,
   EuiToken,
   EuiToolTip,
+  htmlIdGenerator,
 } from '@elastic/eui';
 
 import { MAX_OPTIONS_LIST_REQUEST_SIZE } from '../types';
@@ -39,7 +40,7 @@ export const OptionsListControl = ({
   loadMoreSubject: Subject<number>;
 }) => {
   const optionsList = useOptionsList();
-
+  const popoverId = useMemo(() => htmlIdGenerator()(), []);
   const error = optionsList.select((state) => state.componentState.error);
   const isPopoverOpen = optionsList.select((state) => state.componentState.popoverOpen);
   const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
@@ -48,6 +49,7 @@ export const OptionsListControl = ({
   const id = optionsList.select((state) => state.explicitInput.id);
   const exclude = optionsList.select((state) => state.explicitInput.exclude);
   const fieldName = optionsList.select((state) => state.explicitInput.fieldName);
+  const fieldTitle = optionsList.select((state) => state.explicitInput.title);
   const placeholder = optionsList.select((state) => state.explicitInput.placeholder);
   const controlStyle = optionsList.select((state) => state.explicitInput.controlStyle);
   const singleSelect = optionsList.select((state) => state.explicitInput.singleSelect);
@@ -190,17 +192,11 @@ export const OptionsListControl = ({
         isSelected={isPopoverOpen}
         numActiveFilters={selectedOptionsCount}
         hasActiveFilters={Boolean(selectedOptionsCount)}
-        aria-label={`${selectedOptions
-          ?.map((value) => {
-            const isInvalid = invalidSelections?.includes(value);
-            return `${
-              isInvalid
-                ? OptionsListStrings.popover.getInvalidSelectionScreenReaderText() + ' '
-                : ''
-            }${fieldFormatter(value)}`;
-          })
-          .join(delimiter)}`}
         textProps={{ className: 'optionsList--selectionText' }}
+        aria-label={fieldTitle ?? fieldName}
+        aria-expanded={isPopoverOpen}
+        aria-controls={popoverId}
+        role="combobox"
       >
         {hasSelections || existsSelected
           ? selectionDisplayNode
@@ -218,6 +214,7 @@ export const OptionsListControl = ({
       })}
     >
       <EuiInputPopover
+        id={popoverId}
         ownFocus
         input={button}
         hasArrow={false}
@@ -229,7 +226,9 @@ export const OptionsListControl = ({
         initialFocus={'[data-test-subj=optionsList-control-search-input]'}
         closePopover={() => optionsList.dispatch.setPopoverOpen(false)}
         panelClassName="optionsList__popoverOverride"
-        panelProps={{ 'aria-label': OptionsListStrings.popover.getAriaLabel(fieldName) }}
+        panelProps={{
+          'aria-label': OptionsListStrings.popover.getAriaLabel(fieldTitle ?? fieldName),
+        }}
       >
         <OptionsListPopover
           isLoading={debouncedLoading}