From 7e535c0ec42947522a828f7881932b0497a96478 Mon Sep 17 00:00:00 2001
From: Ievgen Sorokopud <ievgen.sorokopud@elastic.co>
Date: Thu, 27 Jul 2023 20:41:16 +0200
Subject: [PATCH] [Security Solution] Fix Accessibility Tests (#162143)

## Summary

This PR un-skips security solution a11y tests.

There were four main issues fixes:

1. All list items (`li`) must be contained within `ul` or `ol` parent
elements:
https://dequeuniversity.com/rules/axe/4.6/listitem?application=axeAPI
2. Lists must be marked up correctly, meaning they must not contain
content elements other than `li` elements:
https://dequeuniversity.com/rules/axe/4.6/list?application=axeAPI
3. Ensures elements marked `role="img"` elements have alternate text:
https://dequeuniversity.com/rules/axe/4.6/role-img-alt?application=axeAPI
4. Each `select` element must have a programmatically associated label
element:
https://dequeuniversity.com/rules/axe/4.6/select-name?application=axeAPI


Fixes next tests:
1. https://github.com/elastic/kibana/issues/95707
2. https://github.com/elastic/kibana/issues/101923
---
 .../side_nav/src/solution_side_nav.tsx        | 59 +++++++++----------
 .../rules/schedule_item_form/index.tsx        |  1 +
 .../components/rules/status_icon/index.tsx    |  2 +-
 .../accessibility/apps/security_solution.ts   |  3 +-
 .../page_objects/detections/index.ts          |  2 +-
 5 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/x-pack/packages/security-solution/side_nav/src/solution_side_nav.tsx b/x-pack/packages/security-solution/side_nav/src/solution_side_nav.tsx
index f9ac3ab3d8ade19..dfae8526603325c 100644
--- a/x-pack/packages/security-solution/side_nav/src/solution_side_nav.tsx
+++ b/x-pack/packages/security-solution/side_nav/src/solution_side_nav.tsx
@@ -106,28 +106,25 @@ export const SolutionSideNav: React.FC<SolutionSideNavProps> = React.memo(functi
       <EuiFlexGroup gutterSize="none" direction="column">
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="none" direction="column">
-            <EuiFlexItem>
-              <EuiListGroup gutterSize="none">
-                <SolutionSideNavItems
-                  items={topItems}
-                  categories={categories}
-                  selectedId={selectedId}
-                  activePanelNavId={activePanelNavId}
-                  isMobileSize={isMobileSize}
-                  onOpenPanelNav={openPanelNav}
-                />
-              </EuiListGroup>
+            <EuiFlexItem grow={false}>
+              <SolutionSideNavItems
+                items={topItems}
+                categories={categories}
+                selectedId={selectedId}
+                activePanelNavId={activePanelNavId}
+                isMobileSize={isMobileSize}
+                onOpenPanelNav={openPanelNav}
+              />
             </EuiFlexItem>
+            <EuiFlexItem />
             <EuiFlexItem grow={false}>
-              <EuiListGroup gutterSize="none">
-                <SolutionSideNavItems
-                  items={bottomItems}
-                  selectedId={selectedId}
-                  activePanelNavId={activePanelNavId}
-                  isMobileSize={isMobileSize}
-                  onOpenPanelNav={openPanelNav}
-                />
-              </EuiListGroup>
+              <SolutionSideNavItems
+                items={bottomItems}
+                selectedId={selectedId}
+                activePanelNavId={activePanelNavId}
+                isMobileSize={isMobileSize}
+                onOpenPanelNav={openPanelNav}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
@@ -284,16 +281,18 @@ const SolutionSideNavItem: React.FC<SolutionSideNavItemProps> = React.memo(
       <>
         <EuiFlexGroup alignItems="center" gutterSize="xs">
           <EuiFlexItem>
-            <EuiListGroupItem
-              label={itemLabel}
-              href={href}
-              wrapText
-              onClick={onLinkClicked}
-              className={itemClassNames}
-              color="text"
-              size="s"
-              data-test-subj={`solutionSideNavItemLink-${id}`}
-            />
+            <EuiListGroup gutterSize="none">
+              <EuiListGroupItem
+                label={itemLabel}
+                href={href}
+                wrapText
+                onClick={onLinkClicked}
+                className={itemClassNames}
+                color="text"
+                size="s"
+                data-test-subj={`solutionSideNavItemLink-${id}`}
+              />
+            </EuiListGroup>
           </EuiFlexItem>
           {hasPanelNav && (
             <EuiFlexItem grow={0}>
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/schedule_item_form/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/schedule_item_form/index.tsx
index 4da7f038cf6549d..4dbbf1f3a9206a7 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/schedule_item_form/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/schedule_item_form/index.tsx
@@ -179,6 +179,7 @@ export const ScheduleItem = ({
             options={timeTypeOptions.filter((type) => timeTypes.includes(type.value))}
             onChange={onChangeTimeType}
             value={timeType}
+            aria-label={field.label}
             data-test-subj="timeType"
             {...rest}
           />
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/status_icon/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/status_icon/index.tsx
index b52d317a6ce82d0..6afb5c256040386 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/status_icon/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/status_icon/index.tsx
@@ -31,7 +31,7 @@ const RuleStatusIconComponent: React.FC<RuleStatusIconProps> = ({ name, type })
   const color = type === 'passive' ? theme.euiColorLightestShade : theme.euiColorPrimary;
   return (
     <RuleStatusIconStyled>
-      <EuiAvatar color={color} name={type === 'valid' ? '' : name} size="l" />
+      <EuiAvatar color={color} name={type === 'valid' ? '' : name} size="l" aria-label={name} />
       {type === 'valid' ? <EuiIcon type="check" color={theme.euiColorEmptyShade} size="l" /> : null}
     </RuleStatusIconStyled>
   );
diff --git a/x-pack/test/accessibility/apps/security_solution.ts b/x-pack/test/accessibility/apps/security_solution.ts
index ef930f093eb4a1b..ba7d22fd2d39db6 100644
--- a/x-pack/test/accessibility/apps/security_solution.ts
+++ b/x-pack/test/accessibility/apps/security_solution.ts
@@ -14,8 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const toasts = getService('toasts');
   const testSubjects = getService('testSubjects');
 
-  // FLAKY: https://github.com/elastic/kibana/issues/95707
-  describe.skip('Security Solution Accessibility', () => {
+  describe('Security Solution Accessibility', () => {
     before(async () => {
       await security.testUser.setRoles(['superuser'], { skipBrowserRefresh: true });
       await common.navigateToApp('security');
diff --git a/x-pack/test/security_solution_ftr/page_objects/detections/index.ts b/x-pack/test/security_solution_ftr/page_objects/detections/index.ts
index 9d5abd2631be1df..a8ff43a8e06bfc9 100644
--- a/x-pack/test/security_solution_ftr/page_objects/detections/index.ts
+++ b/x-pack/test/security_solution_ftr/page_objects/detections/index.ts
@@ -121,7 +121,7 @@ export class DetectionsPageObject extends FtrService {
 
   async preview(): Promise<void> {
     await this.common.clickAndValidate(
-      'queryPreviewButton',
+      'previewSubmitButton',
       'queryPreviewCustomHistogram',
       undefined,
       500