From 4e30d4bb3699af2ebb7e44250b6530464fffbacb Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Thu, 22 Feb 2024 14:30:58 +0200
Subject: [PATCH] fix: [Rules][AXE-CORE]: Links must have discernible text
 (#177198)

Closes: https://github.com/elastic/security-team/issues/8565

## Summary

The [axe browser plugin](https://deque.com/axe) has identified four
links without clear text. Upon inspecting the page, it was found that
the SVG icons associated with each rule type are labeled as <a> but with
a negative tabindex, rendering them inaccessible for keyboard
navigation. Additionally, these icons lack an accessible label.

To address this issue, the <a> tag for the SVG icons has been removed.
SVGs inherently possess the appropriate role and aria-hidden attributes,
designating them as decorative elements for assistive technology.

### Screen


![image](https://github.com/elastic/kibana/assets/20072247/32ae0237-9b89-40e6-8201-416a1f2d4f17)

### AXE Report

#### Before


![image](https://github.com/elastic/kibana/assets/20072247/8e51168c-2028-422d-af9e-0c4f5aaeb467)


#### After


![image](https://github.com/elastic/kibana/assets/20072247/57b4aa67-84ee-4b46-96c2-d9ccaa49812d)



## For discussion only
Alternatively I recommend to refactor LandingLinkIcon component to use
`EuiCard` to make it more EUI friendly e.g.
<img width="1308" alt="image"
src="https://github.com/elastic/kibana/assets/20072247/ca76191f-bec7-473b-af73-838fcdee76af">

POC: [Alternative fix
for](https://github.com/alexwizp/kibana/commit/69c9375192a45e078a5c82cd714415aa726562b3)
---
 .../src/landing_links/landing_links_icons.tsx          | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/x-pack/packages/security-solution/navigation/src/landing_links/landing_links_icons.tsx b/x-pack/packages/security-solution/navigation/src/landing_links/landing_links_icons.tsx
index f2b8247840cac..7e6bac2510bdf 100644
--- a/x-pack/packages/security-solution/navigation/src/landing_links/landing_links_icons.tsx
+++ b/x-pack/packages/security-solution/navigation/src/landing_links/landing_links_icons.tsx
@@ -54,15 +54,7 @@ export const LandingLinkIcon: React.FC<LandingLinkIconProps> = React.memo(functi
       data-test-subj="LandingItem"
     >
       <EuiFlexItem grow={false}>
-        <LandingLink
-          tabIndex={-1} // Prevents the icon from being tabbable
-          item={item}
-          urlState={urlState}
-          onLinkClick={onLinkClick}
-          external={false} // Never show the external icon
-        >
-          <EuiIcon aria-hidden="true" size="xl" type={landingIcon ?? ''} role="presentation" />
-        </LandingLink>
+        <EuiIcon aria-hidden="true" size="xl" type={landingIcon ?? ''} role="presentation" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiTitle size="xxs" css={styles.title}>