[8.19] [ResponseOps] Fixes for a11y issues (#224838) (#226110)

kibanamachine · georgianaonoleata1904 · adcoelho · web-flow · commit 4322e2d7bcec · 2025-07-02T13:08:46.000+02:00
# Backport This will backport the following commits from `main` to `8.19`: - [[ResponseOps] Fixes for a11y issues (#224838)](#224838)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Georgiana-Andreea Onoleață <georgiana.onoleata@elastic.co> Co-authored-by: Antonio <antoniodcoelho@gmail.com>
diff --git a/src/platform/packages/shared/kbn-alerts-ui-shared/src/rule_settings/rule_settings_flapping_title_tooltip.tsx b/src/platform/packages/shared/kbn-alerts-ui-shared/src/rule_settings/rule_settings_flapping_title_tooltip.tsx
@@ -62,6 +62,13 @@ const flappingOffContentSettings = i18n.translate(
   }
 );
 
+const alertFlappingTitleInfo = i18n.translate(
+  'alertsUIShared.ruleSettingsFlappingTitleTooltip.alertFlappingTitleInfo',
+  {
+    defaultMessage: 'Rule settings flapping title info',
+  }
+);
+
 interface RuleSettingsFlappingTitleTooltipProps {
   isOpen: boolean;
   setIsPopoverOpen: (isOpen: boolean) => void;
@@ -87,7 +94,7 @@ export const RuleSettingsFlappingTitleTooltip = (props: RuleSettingsFlappingTitl
             display="empty"
             color="primary"
             iconType="question"
-            aria-label="Flapping title info"
+            aria-label={alertFlappingTitleInfo}
             onClick={() => setIsPopoverOpen(!isOpen)}
           />
         }
diff --git a/src/platform/packages/shared/kbn-alerts-ui-shared/src/rule_settings/rule_settings_range_input.tsx b/src/platform/packages/shared/kbn-alerts-ui-shared/src/rule_settings/rule_settings_range_input.tsx
@@ -30,8 +30,14 @@ export const RuleSettingsRangeInput = memo((props: RuleSettingsRangeInputProps)
       <div>
         {label}
         &nbsp;
-        {labelPopoverText && (
-          <EuiIconTip color="subdued" size="s" type="question" content={labelPopoverText} />
+        {labelPopoverText && label && (
+          <EuiIconTip
+            color="subdued"
+            size="s"
+            type="question"
+            content={labelPopoverText}
+            aria-label={String(label)}
+          />
         )}
       </div>
     );
diff --git a/src/platform/packages/shared/response-ops/alerts-fields-browser/components/categories_selector/categories_selector.tsx b/src/platform/packages/shared/response-ops/alerts-fields-browser/components/categories_selector/categories_selector.tsx
@@ -145,6 +145,7 @@ const CategoriesSelectorComponent: React.FC<CategoriesSelectorProps> = ({
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         panelPaddingSize="none"
+        aria-label={i18n.FILTER_OPTIONS_LABEL}
       >
         <div
           css={styles.selectableContainer}
diff --git a/src/platform/packages/shared/response-ops/alerts-fields-browser/components/field_browser_modal/field_browser_modal.tsx b/src/platform/packages/shared/response-ops/alerts-fields-browser/components/field_browser_modal/field_browser_modal.tsx
@@ -137,7 +137,11 @@ const FieldBrowserModalComponent: React.FC<FieldBrowserModalProps> = ({
   ];
 
   return (
-    <EuiModal onClose={closeAndRestoreFocus} style={{ width, maxWidth: width }}>
+    <EuiModal
+      onClose={closeAndRestoreFocus}
+      style={{ width, maxWidth: width }}
+      aria-label={i18n.FIELDS_BROWSER}
+    >
       <div data-test-subj="fields-browser-container" className="eui-yScroll">
         <EuiModalHeader>
           <EuiModalHeaderTitle>{i18n.FIELDS_BROWSER}</EuiModalHeaderTitle>
diff --git a/src/platform/packages/shared/response-ops/alerts-fields-browser/components/search/search.tsx b/src/platform/packages/shared/response-ops/alerts-fields-browser/components/search/search.tsx
@@ -27,6 +27,7 @@ export const Search = React.memo<Props>(({ isSearching, onSearchInputChange, sea
     placeholder={i18n.FILTER_PLACEHOLDER}
     value={searchInput}
     fullWidth
+    aria-label={i18n.FIELDS_SEARCH}
   />
 ));
 Search.displayName = 'Search';
diff --git a/src/platform/packages/shared/response-ops/alerts-fields-browser/translations.ts b/src/platform/packages/shared/response-ops/alerts-fields-browser/translations.ts
@@ -42,6 +42,10 @@ export const FIELDS_BROWSER = i18n.translate('responseOpsAlertsFieldsBrowser.fie
   defaultMessage: 'Fields',
 });
 
+export const FIELDS_SEARCH = i18n.translate('responseOpsAlertsFieldsBrowser.fieldBrowserSearch', {
+  defaultMessage: 'Search',
+});
+
 export const DESCRIPTION = i18n.translate('responseOpsAlertsFieldsBrowser.descriptionLabel', {
   defaultMessage: 'Description',
 });
@@ -87,6 +91,13 @@ export const NO_FIELDS_MATCH = i18n.translate('responseOpsAlertsFieldsBrowser.no
   defaultMessage: 'No fields match',
 });
 
+export const FILTER_OPTIONS_LABEL = i18n.translate(
+  'responseOpsAlertsFieldsBrowser.filterOptionsLabel',
+  {
+    defaultMessage: 'Search field for filtering options',
+  }
+);
+
 export const NO_FIELDS_MATCH_INPUT = (searchInput: string) =>
   i18n.translate('responseOpsAlertsFieldsBrowser.noFieldsMatchInputLabel', {
     defaultMessage: 'No fields match {searchInput}',
diff --git a/src/platform/packages/shared/response-ops/alerts-table/components/alerts_flyout.tsx b/src/platform/packages/shared/response-ops/alerts-table/components/alerts_flyout.tsx
@@ -20,6 +20,8 @@ import {
 } from '@elastic/eui';
 import usePrevious from 'react-use/lib/usePrevious';
 import type { Alert } from '@kbn/alerting-types';
+import { ALERT_RULE_CATEGORY } from '@kbn/rule-data-utils';
+
 import { DefaultAlertsFlyoutBody, DefaultAlertsFlyoutHeader } from './default_alerts_flyout';
 import {
   AdditionalContext,
@@ -59,6 +61,7 @@ export const AlertsFlyout = <AC extends AdditionalContext>({
   } = renderContext;
   const Footer: FlyoutSectionRenderer<AC> | undefined = renderFlyoutFooter;
   const prevAlert = usePrevious(alert);
+
   const props = useMemo(
     () =>
       ({
@@ -100,8 +103,27 @@ export const AlertsFlyout = <AC extends AdditionalContext>({
     [Footer, props]
   );
 
+  const ALERT_FLYOUT_ARIA_LABEL =
+    alert && alert[ALERT_RULE_CATEGORY]
+      ? i18n.translate('xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.ariaLabel', {
+          defaultMessage: '{alertCategory}',
+          values: { alertCategory: String(alert[ALERT_RULE_CATEGORY]) },
+        })
+      : i18n.translate(
+          'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.ariaLabelDefault',
+          {
+            defaultMessage: 'Alert details',
+          }
+        );
+
   return (
-    <EuiFlyout onClose={onClose} size="m" data-test-subj="alertsFlyout" ownFocus={flyoutOwnsFocus}>
+    <EuiFlyout
+      onClose={onClose}
+      size="m"
+      data-test-subj="alertsFlyout"
+      ownFocus={flyoutOwnsFocus}
+      aria-label={ALERT_FLYOUT_ARIA_LABEL}
+    >
       {isLoading && <EuiProgress size="xs" color="accent" data-test-subj="alertsFlyoutLoading" />}
       <EuiFlyoutHeader hasBorder>
         <FlyoutHeader />
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_connectors_modal.tsx
@@ -49,6 +49,7 @@ export const RuleActionsConnectorsModal = () => {
         overflow: responsiveOverflow,
       }}
       data-test-subj="ruleActionsConnectorsModal"
+      aria-label={ACTION_TYPE_MODAL_TITLE}
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle size="s">{ACTION_TYPE_MODAL_TITLE}</EuiModalHeaderTitle>
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_definition/rule_consumer_selection.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_definition/rule_consumer_selection.tsx
@@ -98,6 +98,7 @@ export const RuleConsumerSelection = (props: RuleConsumerSelectionProps) => {
       isInvalid={!!baseErrors?.consumer?.length}
       error={baseErrors?.consumer}
       data-test-subj="ruleConsumerSelection"
+      aria-label={CONSUMER_SELECT_TITLE}
     >
       <EuiComboBox
         fullWidth
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_definition/rule_definition.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_definition/rule_definition.tsx
@@ -344,6 +344,7 @@ export const RuleDefinition = () => {
                         position="right"
                         type="question"
                         content={ALERT_DELAY_HELP_TEXT}
+                        aria-label={ALERT_DELAY_HELP_TEXT}
                       />
                     </p>
                   </EuiText>
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_type_modal/components/rule_type_modal.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_type_modal/components/rule_type_modal.tsx
@@ -56,6 +56,10 @@ const loadingPrompt = (
   />
 );
 
+const ruleTypeModalTitle = i18n.translate('responseOpsRuleForm.components.ruleTypeModal.title', {
+  defaultMessage: 'Select rule type',
+});
+
 export const RuleTypeModal: React.FC<RuleTypeModalProps & RuleTypeModalState> = ({
   onClose,
   onSelectRuleType,
@@ -88,18 +92,15 @@ export const RuleTypeModal: React.FC<RuleTypeModalProps & RuleTypeModalState> =
         overflow: isFullscreenPortrait ? 'auto' : 'hidden',
       }}
       data-test-subj="ruleTypeModal"
+      aria-label={ruleTypeModalTitle}
     >
       <EuiPanel paddingSize="m" style={!isFullscreenPortrait ? { maxHeight: '100%' } : {}}>
         <EuiFlexGroup direction="column" style={{ height: '100%' }}>
           <EuiFlexItem grow={0}>
             <EuiPageHeader bottomBorder="extended" paddingSize="m">
               <EuiPageHeaderSection style={{ width: '100%' }}>
                 <EuiTitle size="s">
-                  <h1>
-                    {i18n.translate('responseOpsRuleForm.components.ruleTypeModal.title', {
-                      defaultMessage: 'Select rule type',
-                    })}
-                  </h1>
+                  <h1>{ruleTypeModalTitle}</h1>
                 </EuiTitle>
                 <EuiSpacer size="m" />
                 <EuiPageHeaderSection style={{ width: isFullscreenPortrait ? '100%' : '50%' }}>
diff --git a/x-pack/platform/plugins/shared/stack_alerts/public/rule_types/es_query/rule_common_expressions/rule_common_expressions.tsx b/x-pack/platform/plugins/shared/stack_alerts/public/rule_types/es_query/rule_common_expressions/rule_common_expressions.tsx
@@ -49,6 +49,21 @@ export interface RuleCommonExpressionsProps extends CommonRuleParams {
   onChangeSourceFields: (selectedSourceFields: SourceField[]) => void;
 }
 
+const SIZE_VALUE_TOOLTIP_CONTENT = i18n.translate(
+  'xpack.stackAlerts.esQuery.ui.selectSizePrompt.toolTip',
+  {
+    defaultMessage:
+      'Specify the number of documents to pass to the configured actions when the threshold condition is met.',
+  }
+);
+
+const SIZE_VALUE_EXPRESSION_LABEL = i18n.translate(
+  'xpack.stackAlerts.esQuery.ui.selectSizePrompt.label',
+  {
+    defaultMessage: 'Set the number of documents to send.',
+  }
+);
+
 export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
   esFields,
   thresholdComparator,
@@ -164,10 +179,8 @@ export const RuleCommonExpressions: React.FC<RuleCommonExpressionsProps> = ({
             position="right"
             color="subdued"
             type="question"
-            content={i18n.translate('xpack.stackAlerts.esQuery.ui.selectSizePrompt.toolTip', {
-              defaultMessage:
-                'Specify the number of documents to pass to the configured actions when the threshold condition is met.',
-            })}
+            content={SIZE_VALUE_TOOLTIP_CONTENT}
+            aria-label={SIZE_VALUE_EXPRESSION_LABEL}
           />,
         ]}
       >
diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/jira/jira_params.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/jira/jira_params.tsx
@@ -32,6 +32,13 @@ import { useGetFieldsByIssueType } from './use_get_fields_by_issue_type';
 import { SearchIssues } from './search_issues';
 import { OptionalFieldLabel } from '../../common/optional_field_label';
 
+const summaryFieldLabel = i18n.translate(
+  'xpack.stackConnectors.components.jira.summaryFieldLabel',
+  {
+    defaultMessage: 'Summary',
+  }
+);
+
 const JiraParamsFields: React.FunctionComponent<ActionParamsProps<JiraActionParams>> = ({
   actionConnector,
   actionParams,
@@ -286,9 +293,8 @@ const JiraParamsFields: React.FunctionComponent<ActionParamsProps<JiraActionPara
             Number(errors['subActionParams.incident.summary'].length) > 0 &&
             incident.summary !== undefined
           }
-          label={i18n.translate('xpack.stackConnectors.components.jira.summaryFieldLabel', {
-            defaultMessage: 'Summary',
-          })}
+          label={summaryFieldLabel}
+          aria-label={summaryFieldLabel}
         >
           <TextFieldWithMessageVariables
             index={index}
diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/opsgenie/create_alert/additional_options.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/opsgenie/create_alert/additional_options.tsx
@@ -36,6 +36,7 @@ const AdditionalOptionsComponent: React.FC<AdditionalOptionsProps> = ({
             fullWidth
             label={i18n.ENTITY_FIELD_LABEL}
             helpText={i18n.OPSGENIE_ENTITY_HELP}
+            aria-label={i18n.ENTITY_FIELD_LABEL}
           >
             <TextFieldWithMessageVariables
               index={index}
@@ -52,6 +53,7 @@ const AdditionalOptionsComponent: React.FC<AdditionalOptionsProps> = ({
             fullWidth
             label={i18n.SOURCE_FIELD_LABEL}
             helpText={i18n.OPSGENIE_SOURCE_HELP}
+            aria-label={i18n.SOURCE_FIELD_LABEL}
           >
             <TextFieldWithMessageVariables
               index={index}
@@ -69,6 +71,7 @@ const AdditionalOptionsComponent: React.FC<AdditionalOptionsProps> = ({
         fullWidth
         label={i18n.USER_FIELD_LABEL}
         helpText={i18n.OPSGENIE_USER_HELP}
+        aria-label={i18n.USER_FIELD_LABEL}
       >
         <TextFieldWithMessageVariables
           index={index}
diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/opsgenie/create_alert/index.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/opsgenie/create_alert/index.tsx
@@ -62,6 +62,7 @@ const FormView: React.FC<FormViewProps> = ({
         error={errors['subActionParams.message'] as string}
         label={i18n.MESSAGE_FIELD_LABEL}
         isInvalid={isMessageInvalid}
+        aria-label={i18n.MESSAGE_FIELD_LABEL}
       >
         <TextFieldWithMessageVariables
           index={index}
@@ -103,6 +104,7 @@ const FormView: React.FC<FormViewProps> = ({
         label={i18n.ALIAS_FIELD_LABEL}
         helpText={i18n.OPSGENIE_ALIAS_HELP}
         labelAppend={OptionalFieldLabel}
+        aria-label={i18n.ALIAS_FIELD_LABEL}
       >
         <TextFieldWithMessageVariables
           index={index}
diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/opsgenie/create_alert/tags.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/opsgenie/create_alert/tags.tsx
@@ -85,6 +85,7 @@ const TagsComponent: React.FC<TagsProps> = ({ onChange, values, executionMode })
       label={i18n.TAGS_FIELD_LABEL}
       labelAppend={OptionalFieldLabel}
       helpText={i18n.TAGS_HELP}
+      aria-label={i18n.TAGS_FIELD_LABEL}
     >
       <EuiComboBox
         rowHeight={50}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/components/rules_setting/rules_settings_flyout.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/components/rules_setting/rules_settings_flyout.tsx
@@ -274,7 +274,15 @@ export const RulesSettingsFlyout = memo((props: RulesSettingsFlyoutProps) => {
   };
 
   return (
-    <EuiFlyout type="push" data-test-subj="rulesSettingsFlyout" onClose={onCloseFlyout} size="s">
+    <EuiFlyout
+      type="push"
+      data-test-subj="rulesSettingsFlyout"
+      onClose={onCloseFlyout}
+      size="s"
+      aria-label={i18n.translate('xpack.triggersActionsUI.rulesSettings.flyout.ruleSettingsLabel', {
+        defaultMessage: 'Rule settings',
+      })}
+    >
       <EuiFlyoutHeader>
         <EuiTitle>
           <h3>
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_stat.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_stat.tsx
@@ -24,7 +24,7 @@ export const EventLogStat = ({
           <b>{title}</b>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiIconTip content={tooltip} position="top" />
+          <EuiIconTip content={tooltip} position="top" aria-label={title} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/untrack_alerts_modal.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/untrack_alerts_modal.tsx
@@ -59,6 +59,7 @@ export const UntrackAlertsModal = (props: UntrackAlertsModalProps) => {
       onConfirm={() => onConfirm(isUntrack)}
       confirmButtonText={UNTRACK_ORPHANED_ALERTS_CONFIRM_BUTTON_TEXT}
       cancelButtonText={UNTRACK_ORPHANED_ALERTS_CANCEL_BUTTON_TEXT}
+      aria-label={UNTRACK_ORPHANED_ALERTS_TITLE}
     >
       <EuiSwitch
         data-test-subj="untrackAlertsModalSwitch"
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule_definition.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rule_details/components/rule_definition.tsx
@@ -235,6 +235,9 @@ export const RuleDefinition: React.FunctionComponent<RuleDefinitionProps> = memo
                     data-test-subj="ruleDetailsEditButton"
                     iconType={'pencil'}
                     onClick={onEditRuleClick}
+                    aria-label={i18n.translate('xpack.triggersActionsUI.ruleDetails.editButton', {
+                      defaultMessage: 'Edit Rule',
+                    })}
                   />
                 </EuiFlexItem>
               )
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx

Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,7 @@ const CategoriesSelectorComponent: React.FC<CategoriesSelectorProps> = ({`
`145`	`145`	`isOpen={isPopoverOpen}`
`146`	`146`	`closePopover={closePopover}`
`147`	`147`	`panelPaddingSize="none"`
	`148`	`+ aria-label={i18n.FILTER_OPTIONS_LABEL}`
`148`	`149`	`>`
`149`	`150`	`<div`
`150`	`151`	`css={styles.selectableContainer}`
Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ export const RuleActionsConnectorsModal = () => {`
`49`	`49`	`overflow: responsiveOverflow,`
`50`	`50`	`}}`
`51`	`51`	`data-test-subj="ruleActionsConnectorsModal"`
	`52`	`+ aria-label={ACTION_TYPE_MODAL_TITLE}`
`52`	`53`	`>`
`53`	`54`	`<EuiModalHeader>`
`54`	`55`	`<EuiModalHeaderTitle size="s">{ACTION_TYPE_MODAL_TITLE}</EuiModalHeaderTitle>`
Original file line number	Diff line number	Diff line change
`@@ -98,6 +98,7 @@ export const RuleConsumerSelection = (props: RuleConsumerSelectionProps) => {`
`98`	`98`	`isInvalid={!!baseErrors?.consumer?.length}`
`99`	`99`	`error={baseErrors?.consumer}`
`100`	`100`	`data-test-subj="ruleConsumerSelection"`
	`101`	`+ aria-label={CONSUMER_SELECT_TITLE}`
`101`	`102`	`>`
`102`	`103`	`<EuiComboBox`
`103`	`104`	`fullWidth`