github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.13] fix: [Rules][AXE-CORE]: Links must have discernible text (#177198) (#177576)

Browse source 
# Backport

This will backport the following commits from `main` to `8.13`:
- [fix: [Rules][AXE-CORE]: Links must have discernible text
(#177198)](https://github.com/elastic/kibana/pull/177198)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-02-22T12:30:58Z","message":"fix:
[Rules][AXE-CORE]: Links must have discernible text (#177198)\n\nCloses:
https://github.com/elastic/security-team/issues/8565\r\n\r\n##
Summary\r\n\r\nThe [axe browser plugin](https://deque.com/axe) has
identified four\r\nlinks without clear text. Upon inspecting the page,
it was found that\r\nthe SVG icons associated with each rule type are
labeled as <a> but with\r\na negative tabindex, rendering them
inaccessible for keyboard\r\nnavigation. Additionally, these icons lack
an accessible label.\r\n\r\nTo address this issue, the <a> tag for the
SVG icons has been removed.\r\nSVGs inherently possess the appropriate
role and aria-hidden attributes,\r\ndesignating them as decorative
elements for assistive technology.\r\n\r\n###
Screen\r\n\r\n\r\n![image](32ae0237-9b89-40e6-8201-416a1f2d4f17)\r\n\r\n###
AXE Report\r\n\r\n####
Before\r\n\r\n\r\n![image](8e51168c-2028-422d-af9e-0c4f5aaeb467)\r\n\r\n\r\n####
After\r\n\r\n\r\n![image](57b4aa67-84ee-4b46-96c2-d9ccaa49812d)\r\n\r\n\r\n\r\n##
For discussion only\r\nAlternatively I recommend to refactor
LandingLinkIcon component to use\r\n`EuiCard` to make it more EUI
friendly e.g.\r\n<img width=\"1308\"
alt=\"image\"\r\nsrc=\"ca76191f-bec7-473b-af73-838fcdee76af\">\r\n\r\nPOC:
[Alternative
fix\r\nfor](69c9375192)","sha":"4e30d4bb3699af2ebb7e44250b6530464fffbacb","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Detections
and Resp","Team: SecuritySolution","Feature:Rule
Management","Team:Detection Rule
Management","v8.13.0","v8.14.0"],"title":"fix: [Rules][AXE-CORE]: Links
must have discernible
text","number":177198,"url":"https://github.com/elastic/kibana/pull/177198","mergeCommit":{"message":"fix:
[Rules][AXE-CORE]: Links must have discernible text (#177198)\n\nCloses:
https://github.com/elastic/security-team/issues/8565\r\n\r\n##
Summary\r\n\r\nThe [axe browser plugin](https://deque.com/axe) has
identified four\r\nlinks without clear text. Upon inspecting the page,
it was found that\r\nthe SVG icons associated with each rule type are
labeled as <a> but with\r\na negative tabindex, rendering them
inaccessible for keyboard\r\nnavigation. Additionally, these icons lack
an accessible label.\r\n\r\nTo address this issue, the <a> tag for the
SVG icons has been removed.\r\nSVGs inherently possess the appropriate
role and aria-hidden attributes,\r\ndesignating them as decorative
elements for assistive technology.\r\n\r\n###
Screen\r\n\r\n\r\n![image](32ae0237-9b89-40e6-8201-416a1f2d4f17)\r\n\r\n###
AXE Report\r\n\r\n####
Before\r\n\r\n\r\n![image](8e51168c-2028-422d-af9e-0c4f5aaeb467)\r\n\r\n\r\n####
After\r\n\r\n\r\n![image](57b4aa67-84ee-4b46-96c2-d9ccaa49812d)\r\n\r\n\r\n\r\n##
For discussion only\r\nAlternatively I recommend to refactor
LandingLinkIcon component to use\r\n`EuiCard` to make it more EUI
friendly e.g.\r\n<img width=\"1308\"
alt=\"image\"\r\nsrc=\"ca76191f-bec7-473b-af73-838fcdee76af\">\r\n\r\nPOC:
[Alternative
fix\r\nfor](69c9375192)","sha":"4e30d4bb3699af2ebb7e44250b6530464fffbacb"}},"sourceBranch":"main","suggestedTargetBranches":["8.13"],"targetPullRequestStates":[{"branch":"8.13","label":"v8.13.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/177198","number":177198,"mergeCommit":{"message":"fix:
[Rules][AXE-CORE]: Links must have discernible text (#177198)\n\nCloses:
https://github.com/elastic/security-team/issues/8565\r\n\r\n##
Summary\r\n\r\nThe [axe browser plugin](https://deque.com/axe) has
identified four\r\nlinks without clear text. Upon inspecting the page,
it was found that\r\nthe SVG icons associated with each rule type are
labeled as <a> but with\r\na negative tabindex, rendering them
inaccessible for keyboard\r\nnavigation. Additionally, these icons lack
an accessible label.\r\n\r\nTo address this issue, the <a> tag for the
SVG icons has been removed.\r\nSVGs inherently possess the appropriate
role and aria-hidden attributes,\r\ndesignating them as decorative
elements for assistive technology.\r\n\r\n###
Screen\r\n\r\n\r\n![image](32ae0237-9b89-40e6-8201-416a1f2d4f17)\r\n\r\n###
AXE Report\r\n\r\n####
Before\r\n\r\n\r\n![image](8e51168c-2028-422d-af9e-0c4f5aaeb467)\r\n\r\n\r\n####
After\r\n\r\n\r\n![image](57b4aa67-84ee-4b46-96c2-d9ccaa49812d)\r\n\r\n\r\n\r\n##
For discussion only\r\nAlternatively I recommend to refactor
LandingLinkIcon component to use\r\n`EuiCard` to make it more EUI
friendly e.g.\r\n<img width=\"1308\"
alt=\"image\"\r\nsrc=\"ca76191f-bec7-473b-af73-838fcdee76af\">\r\n\r\nPOC:
[Alternative
fix\r\nfor](69c9375192)","sha":"4e30d4bb3699af2ebb7e44250b6530464fffbacb"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
This commit is contained in:
Kibana Machine 2024-02-27 17:12:41 -05:00 • committed by GitHub
parent a137efff5d
commit ba337b22e2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 1 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
x-pack/packages/security-solution/navigation/src/landing_links/landing_links_icons.tsx
View file

@ -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}>