Fix @elastic/eui/require-aria-label-for-modals lint violations in osquery plugin

x-pack/platform/plugins/shared/osquery/public/actions/components/add_tags_flyout.tsx

@@ -19,6 +19,7 @@ import {
   EuiFormRow,
   EuiComboBox,
   EuiText,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -68,6 +69,7 @@ const AddTagsFlyoutComponent: React.FC<AddTagsFlyoutProps> = ({
   onClose,
   onSave,
 }) => {
+  const flyoutTitleId = useGeneratedHtmlId();
   const [localTags, setLocalTags] = useState<string[]>(currentTags);
   const { tags: availableTags } = useHistoryTags();
   const { mutate: updateTags, isLoading: isSaving } = useUpdateActionTags();
@@ -125,10 +127,10 @@ const AddTagsFlyoutComponent: React.FC<AddTagsFlyoutProps> = ({
   }, [actionId, localTags, updateTags, onSave, onClose]);
 
   return (
-    <EuiFlyout onClose={onClose} size="s" ownFocus>
+    <EuiFlyout onClose={onClose} size="s" ownFocus aria-labelledby={flyoutTitleId}>
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
-          <h2>{FLYOUT_TITLE}</h2>
+          <h2 id={flyoutTitleId}>{FLYOUT_TITLE}</h2>
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>

x-pack/platform/plugins/shared/osquery/public/actions/components/run_by_filter_popover.tsx

@@ -145,6 +145,7 @@ const RunByFilterPopoverComponent: React.FC<RunByFilterPopoverProps> = ({
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={PANEL_PROPS}
+      aria-label={RUN_BY_LABEL}
     >
       <EuiSelectable
         searchable

x-pack/platform/plugins/shared/osquery/public/actions/components/source_filter_popover.tsx

@@ -103,6 +103,7 @@ const SourceFilterPopoverComponent: React.FC<SourceFilterPopoverProps> = ({
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={PANEL_PROPS}
+      aria-label={SOURCE_LABEL}
     >
       <EuiSelectable aria-label={SOURCE_LABEL} options={selectableOptions} onChange={handleChange}>
         {(list) => <div style={POPOVER_CONTENT_STYLE}>{list}</div>}

x-pack/platform/plugins/shared/osquery/public/actions/components/tags_column.tsx

@@ -62,6 +62,7 @@ const TagsColumnComponent: React.FC<TagsColumnProps> = ({ tags }) => {
           closePopover={closePopover}
           repositionOnScroll
           data-test-subj="tagsColumnPopover"
+          aria-label={POPOVER_TITLE}
         >
           <EuiPopoverTitle>{POPOVER_TITLE}</EuiPopoverTitle>
           <EuiBadgeGroup css={popoverWrapperCss}>

x-pack/platform/plugins/shared/osquery/public/actions/components/tags_filter_popover.tsx

@@ -110,6 +110,7 @@ const TagsFilterPopoverComponent: React.FC<TagsFilterPopoverProps> = ({
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={PANEL_PROPS}
+      aria-label={TAGS_LABEL}
     >
       <EuiSelectable
         searchable

x-pack/platform/plugins/shared/osquery/public/common/hooks/use_duplicate_guard.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useMemo, useState } from 'react';
 
@@ -15,6 +15,7 @@ interface UseDuplicateGuardParams {
 }
 
 export const useDuplicateGuard = ({ copyMutation, resourceType }: UseDuplicateGuardParams) => {
+  const confirmModalTitleId = useGeneratedHtmlId();
   const bodyText = useMemo(
     () =>
       i18n.translate('xpack.osquery.duplicateConfirmation.body', {
@@ -48,8 +49,12 @@ export const useDuplicateGuard = ({ copyMutation, resourceType }: UseDuplicateGu
     setIsFormDirty(isDirty);
   }, []);
 
+  const titleProps = useMemo(() => ({ id: confirmModalTitleId }), [confirmModalTitleId]);
+
   const duplicateModal = isDuplicateModalVisible ? (
     <EuiConfirmModal
+      aria-labelledby={confirmModalTitleId}
+      titleProps={titleProps}
       title={i18n.translate('xpack.osquery.duplicateConfirmation.title', {
         defaultMessage: 'You have unsaved changes',
       })}

x-pack/platform/plugins/shared/osquery/public/components/row_actions_menu.tsx

@@ -150,6 +150,7 @@ const RowActionsMenuComponent: React.FC<RowActionsMenuProps> = ({
         closePopover={closePopover}
         panelPaddingSize="none"
         anchorPosition="leftCenter"
+        aria-label={actionsAriaLabel}
       >
         <EuiContextMenuPanel size="s" items={menuItems} />
       </EuiPopover>

x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/column_picker_popover.tsx

@@ -87,6 +87,7 @@ const ColumnPickerPopoverComponent: React.FC<ColumnPickerPopoverProps> = ({
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={panelProps}
+      aria-label={COLUMNS_LABEL}
     >
       <EuiSelectable aria-label={COLUMNS_LABEL} options={selectableOptions} onChange={handleChange}>
         {(list) => (

x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/created_by_filter_popover.tsx

@@ -135,6 +135,7 @@ const CreatedByFilterPopoverComponent: React.FC<CreatedByFilterPopoverProps> = (
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={panelProps}
+      aria-label={CREATED_BY_LABEL}
     >
       <EuiSelectable
         searchable

x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/selectable_filter_popover.tsx

@@ -87,6 +87,7 @@ const SelectableFilterPopoverComponent: React.FC<SelectableFilterPopoverProps> =
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={panelProps}
+      aria-label={label}
     >
       <EuiSelectable aria-label={label} options={selectableOptions} onChange={handleChange}>
         {(list) => <div style={POPOVER_CONTENT_STYLE}>{list}</div>}

x-pack/platform/plugins/shared/osquery/public/components/table_toolbar/sort_fields_popover.tsx

@@ -127,6 +127,7 @@ const SortFieldsPopoverComponent: React.FC<SortFieldsPopoverProps> = ({
       panelPaddingSize="none"
       repositionOnScroll
       panelProps={panelProps}
+      aria-label={SORT_FIELDS_LABEL}
     >
       <div style={POPOVER_CONTENT_STYLE}>
         <EuiPopoverTitle paddingSize="s">

x-pack/platform/plugins/shared/osquery/public/live_queries/form/row_kebab_menu.tsx

@@ -95,6 +95,7 @@ const RowKebabMenuContent: React.FC<RowKebabMenuProps> = React.memo(
         closePopover={close}
         panelPaddingSize="none"
         anchorPosition="downLeft"
+        aria-label={kebabLabel}
       >
         <EuiContextMenuPanel size="s" items={menuItems} />
       </EuiPopover>

x-pack/platform/plugins/shared/osquery/public/packs/packs_table.tsx

@@ -72,7 +72,14 @@ export const AgentPoliciesPopover = ({ agentPolicyIds = [] }: { agentPolicyIds?:
   }
 
   return (
-    <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      aria-label={i18n.translate('xpack.osquery.packs.table.agentPoliciesPopoverAriaLabel', {
+        defaultMessage: 'Agent policies',
+      })}
+    >
       <EuiText size="s">
         {agentPolicyIds?.map((policyId) => (
           <div key={policyId}>