From b011e8dc81256f50ca3d05fdd46de9e90dd6ea2b Mon Sep 17 00:00:00 2001
From: Sergi Romeu <sergi.romeu@elastic.co>
Date: Mon, 7 Apr 2025 15:23:16 +0200
Subject: [PATCH] refactor: add missing announcement for some elements

---
 .../service_groups_list/sort.tsx              |  3 +++
 .../shared/key_value_filter_list/index.tsx    | 27 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/apm/public/components/app/service_groups/service_groups_list/sort.tsx b/x-pack/solutions/observability/plugins/apm/public/components/app/service_groups/service_groups_list/sort.tsx
index bc5bca798cdb8..4048d9897ab97 100644
--- a/x-pack/solutions/observability/plugins/apm/public/components/app/service_groups/service_groups_list/sort.tsx
+++ b/x-pack/solutions/observability/plugins/apm/public/components/app/service_groups/service_groups_list/sort.tsx
@@ -36,6 +36,9 @@ export function Sort({ type, onChange }: Props) {
   return (
     <EuiSelect
       data-test-subj="apmSortSelect"
+      aria-label={i18n.translate('xpack.apm.serviceGroups.list.sort.ariaLabel', {
+        defaultMessage: 'Sort service groups by',
+      })}
       options={options}
       value={type}
       onChange={(e) => onChange(e.target.value as ServiceGroupsSortType)}
diff --git a/x-pack/solutions/observability/plugins/apm/public/components/shared/key_value_filter_list/index.tsx b/x-pack/solutions/observability/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
index cb1ce7b0b51be..0d73e49a28cfd 100644
--- a/x-pack/solutions/observability/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
+++ b/x-pack/solutions/observability/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
@@ -20,6 +20,7 @@ import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import styled from '@emotion/styled';
 import { isEmpty } from 'lodash';
+import { css } from '@emotion/react';
 
 interface KeyValue {
   key: string;
@@ -79,23 +80,41 @@ export function KeyValueFilterList({
             <Fragment key={key}>
               <EuiDescriptionListTitle
                 className="descriptionList__title"
-                style={{ height: '40px' }}
+                css={css`
+                  height: 40px;
+                `}
               >
-                <EuiText size="s" style={{ fontWeight: 'bold' }}>
+                <EuiText
+                  size="s"
+                  css={css`
+                    font-weight: bold;
+                  `}
+                >
                   {key}
                 </EuiText>
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription
                 className="descriptionList__description"
-                style={{ height: '40px' }}
+                css={css`
+                  height: 40px;
+                `}
               >
                 <EuiFlexGroup alignItems="baseline" responsive={false} gutterSize="none">
-                  <EuiFlexItem style={{ minWidth: '32px' }} grow={false}>
+                  <EuiFlexItem
+                    css={css`
+                      min-width: 32px;
+                    `}
+                    grow={false}
+                  >
                     {isFilterable && (
                       <EuiButtonEmpty
                         onClick={() => {
                           onClickFilter({ key, value });
                         }}
+                        aria-label={i18n.translate(
+                          'xpack.apm.keyValueFilterList.actionFilterLabel',
+                          { defaultMessage: 'Filter by value' }
+                        )}
                         data-test-subj={`filter_by_${key}`}
                       >
                         <EuiToolTip