fix: [Dashboard > Overview][AXE-CORE]: Select menus must have accessible labels (#177837)

Closes: https://github.com/elastic/security-team/issues/8556

## Description

The [axe browser plugin](https://deque.com/axe) is reporting two select
menus without accessible labels.

### Steps to recreate

1. Open the Security Dashboards, then click
[Overview](https://kibana.siem.estc.dev/app/security/overview)
2. Run an axe browser scan in Chrome, Edge, or Firefox
3. Verify the Critical issue "Select element must have an accessible
name"


### What was done
- Added required `a11y` attributes

### Screens

#### Axe report


![image](a79347ca-edda-42e6-873f-b87ecbab0216)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alexey Antonov 2024-03-12 13:12:29 +02:00 committed by GitHub
parent ddc82a20f2
commit 1457fcd4c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 2 additions and 0 deletions

View file

@ -67,6 +67,7 @@ export const RecentCasesFilters = React.memo<{
onChange={onChange}
options={options}
value={filterBy}
aria-label={i18n.RECENT_CASES}
/>
);
});

View file

@ -341,6 +341,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
options={stackByOptions}
prepend={i18n.STACK_BY}
value={selectedStackByOption?.value}
aria-label={i18n.STACK_BY}
/>
)}
</EuiFlexItem>