fix: [Rules][AXE-CORE]: Links must have discernible text #177198
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alexwizp
added
release_note:skip
|
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
alexwizp
added
v8.14.0
Team: SecuritySolution
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
alexwizp
added a commit
to alexwizp/kibana
that referenced
this pull request
Feb 21, 2024
Alterative: elastic#177198
alexwizp
added
v8.13.0
Feature:Rule Management
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management) |
|
@elastic/security-threat-hunting-explore please have a look |
💚 Build Succeeded
Metrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
|
@alexwizp The alternative version using
|
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Feb 22, 2024
) 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  ### AXE Report #### Before  #### After  ## 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) (cherry picked from commit 4e30d4b)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Feb 27, 2024
) (#177576) # Backport This will backport the following commits from `main` to `8.13`: - [fix: [Rules][AXE-CORE]: Links must have discernible text (#177198)](#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":"[email protected]"},"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\r\n\r\n### AXE Report\r\n\r\n#### Before\r\n\r\n\r\n\r\n\r\n\r\n#### After\r\n\r\n\r\n\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=\"https://github.com/elastic/kibana/assets/20072247/ca76191f-bec7-473b-af73-838fcdee76af\">\r\n\r\nPOC: [Alternative fix\r\nfor](https://github.com/alexwizp/kibana/commit/69c9375192a45e078a5c82cd714415aa726562b3)","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\r\n\r\n### AXE Report\r\n\r\n#### Before\r\n\r\n\r\n\r\n\r\n\r\n#### After\r\n\r\n\r\n\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=\"https://github.com/elastic/kibana/assets/20072247/ca76191f-bec7-473b-af73-838fcdee76af\">\r\n\r\nPOC: [Alternative fix\r\nfor](https://github.com/alexwizp/kibana/commit/69c9375192a45e078a5c82cd714415aa726562b3)","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\r\n\r\n### AXE Report\r\n\r\n#### Before\r\n\r\n\r\n\r\n\r\n\r\n#### After\r\n\r\n\r\n\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=\"https://github.com/elastic/kibana/assets/20072247/ca76191f-bec7-473b-af73-838fcdee76af\">\r\n\r\nPOC: [Alternative fix\r\nfor](https://github.com/alexwizp/kibana/commit/69c9375192a45e078a5c82cd714415aa726562b3)","sha":"4e30d4bb3699af2ebb7e44250b6530464fffbacb"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <[email protected]>
fkanout
pushed a commit
to fkanout/kibana
that referenced
this pull request
Mar 4, 2024
) 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  ### AXE Report #### Before  #### After  ## 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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: https://github.com/elastic/security-team/issues/8565
Summary
The axe browser plugin 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 but with a negative tabindex, rendering them inaccessible for keyboard navigation. Additionally, these icons lack an accessible label.
To address this issue, the 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
AXE Report
Before
After
For discussion only
Alternatively I recommend to refactor LandingLinkIcon component to use
EuiCardto make it more EUI friendly e.g.POC: Alternative fix for