fix: [Security:Manage:EntityAnalytics:EntityStore] missing labels on …

…Entity store page (elastic#207400) Closes: elastic#205826 Closes: elastic#205825 **Description** Import entities input file upload box is missing label on entity store page. **Preconditions** Security -> Manage ->Entity store page **Steps to reproduce** 1. Open Entity store page 2. Run axe-core through the page **Changes made** 1. added required `aria-label` attributes for mentioned places **Screen** <img width="1223" alt="image" src="https://github.com/user-attachments/assets/29a76c2c-76f6-4bdc-b3f4-4feefc4009eb" />
gbamparop · Jan 30, 2025 · 50272d6 · 50272d6
1 parent cf7debd
commit 50272d6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/...tity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx b/...tity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx
@@ -19,6 +19,7 @@ import {
 
 import { css } from '@emotion/css';
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage, useI18n } from '@kbn/i18n-react';
 
 import { useAssetCriticalityEntityTypes } from '../../../hooks/use_enabled_entity_types';
@@ -41,7 +42,7 @@ const sampleCSVContent = `user,user-001,low_impact\nuser,user-002,medium_impact\
 
 export const AssetCriticalityFilePickerStep: React.FC<AssetCriticalityFilePickerStepProps> =
   React.memo(({ onFileChange, errorMessage, isLoading }) => {
-    const i18n = useI18n();
+    const { formatListToParts } = useI18n();
 
     const formatBytes = useFormatBytes();
     const { euiTheme } = useEuiTheme();
@@ -55,11 +56,9 @@ export const AssetCriticalityFilePickerStep: React.FC<AssetCriticalityFilePicker
 
     const entityTypes = useAssetCriticalityEntityTypes();
     const i18nOrList = (items: string[]) =>
-      i18n
-        .formatListToParts(items, {
-          type: 'disjunction',
-        })
-        .map(({ type, value }) => (type === 'element' ? <b>{value}</b> : value)); // bolded list items
+      formatListToParts(items, {
+        type: 'disjunction',
+      }).map(({ type, value }) => (type === 'element' ? <b>{value}</b> : value)); // bolded list items
 
     return (
       <>
@@ -170,6 +169,12 @@ export const AssetCriticalityFilePickerStep: React.FC<AssetCriticalityFilePicker
           onChange={onFileChange}
           isInvalid={!!errorMessage}
           isLoading={isLoading}
+          aria-label={i18n.translate(
+            'xpack.securitySolution.entityAnalytics.assetCriticalityUploadPage.filePickerAriaLabel',
+            {
+              defaultMessage: 'Asset criticality file picker',
+            }
+          )}
         />
         <br />
         {errorMessage && (

diff --git a/.../plugins/security_solution/public/entity_analytics/pages/entity_store_management_page.tsx b/.../plugins/security_solution/public/entity_analytics/pages/entity_store_management_page.tsx
@@ -31,6 +31,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import type { SecurityAppError } from '@kbn/securitysolution-t-grid';
+import { i18n } from '@kbn/i18n';
 import { type StoreStatus } from '../../../common/api/entity_analytics';
 import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 import { ASSET_CRITICALITY_INDEX_PATTERN } from '../../../common/entity_analytics/asset_criticality';
@@ -62,6 +63,13 @@ const canDeleteEntityEngine = (status?: StoreStatus) =>
   !['not_installed', 'installing'].includes(status || '');
 const isEntityStoreInstalled = (status?: StoreStatus) => status && status !== 'not_installed';
 
+const entityStoreLabel = i18n.translate(
+  'xpack.securitySolution.entityAnalytics.entityStoreManagementPage.title',
+  {
+    defaultMessage: 'Entity Store',
+  }
+);
+
 export const EntityStoreManagementPage = () => {
   const hasEntityAnalyticsCapability = useHasSecurityCapability('entity-analytics');
   const isEntityStoreFeatureFlagDisabled = useIsExperimentalFeatureEnabled('entityStoreDisabled');
@@ -147,12 +155,7 @@ export const EntityStoreManagementPage = () => {
     <>
       <EuiPageHeader
         data-test-subj="entityStoreManagementPage"
-        pageTitle={
-          <FormattedMessage
-            id="xpack.securitySolution.entityAnalytics.entityStoreManagementPage.title"
-            defaultMessage="Entity Store"
-          />
-        }
+        pageTitle={entityStoreLabel}
         alignItems="center"
         rightSideItems={
           !isEntityStoreFeatureFlagDisabled && privileges?.has_all_required
@@ -381,12 +384,12 @@ const EnablementButton: React.FC<{
       )}
       <EntityStoreHealth currentEntityStoreStatus={status} />
       <EuiSwitch
-        showLabel={false}
-        label=""
+        label={entityStoreLabel}
         onChange={onSwitch}
         data-test-subj="entity-store-switch"
         checked={isEntityStoreEnabled(status)}
         disabled={isDisabled}
+        showLabel={false}
       />
     </EuiFlexGroup>
   );