fix(slo): Aria labels (elastic#177202)

ersin-erdal · Feb 19, 2024 · 2e6150c · 2e6150c
1 parent 9e6db9b
commit 2e6150c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/...lugins/observability/public/pages/slo_edit/components/slo_edit_form_indicator_section.tsx b/...lugins/observability/public/pages/slo_edit/components/slo_edit_form_indicator_section.tsx
@@ -59,11 +59,7 @@ export function SloEditFormIndicatorSection({ isEditMode }: SloEditFormIndicator
     >
       {!isEditMode && (
         <>
-          <EuiFormRow
-            label={i18n.translate('xpack.observability.slo.sloEdit.definition.sliType', {
-              defaultMessage: 'Choose the SLI type',
-            })}
-          >
+          <EuiFormRow label={indicatorLabel}>
             <Controller
               name="indicator.type"
               control={control}
@@ -74,6 +70,7 @@ export function SloEditFormIndicatorSection({ isEditMode }: SloEditFormIndicator
                   required
                   data-test-subj="sloFormIndicatorTypeSelect"
                   options={SLI_OPTIONS}
+                  aria-label={indicatorLabel}
                 />
               )}
             />
@@ -85,3 +82,7 @@ export function SloEditFormIndicatorSection({ isEditMode }: SloEditFormIndicator
     </EuiPanel>
   );
 }
+
+const indicatorLabel = i18n.translate('xpack.observability.slo.sloEdit.definition.sliType', {
+  defaultMessage: 'Choose the SLI type',
+});
diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_context_menu.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_context_menu.tsx
@@ -82,14 +82,15 @@ export function SLOContextMenu({
               <span>{label}</span>
             </EuiTitle>
           </EuiFlexItem>
-          <EuiFlexItem grow={false} data-test-subj="syntheticsOverviewGroupButton">
+          <EuiFlexItem grow={false} data-test-subj="sloOverviewGroupButton">
             <EuiPopover
               id={singleContextMenuPopoverId}
               button={button}
               isOpen={isPopoverOpen}
               closePopover={() => setIsPopoverOpen(false)}
               panelPaddingSize="none"
               anchorPosition="downLeft"
+              aria-label={label}
             >
               <EuiContextMenuPanel size="s" items={items} style={{ minWidth: 160 }} />
             </EuiPopover>
@@ -114,6 +115,7 @@ export function ContextMenuItem({
   return (
     <EuiContextMenuItem
       size="s"
+      aria-label={option.label}
       key={option.value}
       icon={getIconType(option.checked)}
       onClick={() => {