Skip to content

Commit

Permalink
fix: [Rules][AXE-CORE]: Links must have discernible text (elastic#177198
Browse files Browse the repository at this point in the history
)

Closes: elastic/security-team#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](alexwizp@69c9375)
  • Loading branch information
alexwizp authored Feb 22, 2024
1 parent aecbb9c commit 4e30d4b
Showing 1 changed file with 1 addition and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down

0 comments on commit 4e30d4b

Please sign in to comment.