[Security Solution] Fix Accessibility Tests (elastic#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. elastic#95707 2. elastic#101923
adcoelho · Jul 28, 2023 · 7e535c0 · 7e535c0
1 parent 20f90af
commit 7e535c0
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 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
@@ -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/...plugins/security_solution/public/detections/components/rules/schedule_item_form/index.tsx b/...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
@@ -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
@@ -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
@@ -121,7 +121,7 @@ export class DetectionsPageObject extends FtrService {
 
   async preview(): Promise<void> {
     await this.common.clickAndValidate(
-      'queryPreviewButton',
+      'previewSubmitButton',
       'queryPreviewCustomHistogram',
       undefined,
       500