[Security app] Detections events list 'overflow' ... button and expand > button do not have hover over names #74140
Assignees
Labels
loe:small
Small Level of Effort
Project:Accessibility
Team: SecuritySolution
Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.
triage_needed
WCAG A
Comments
EricDavisX
changed the title
|
@MikePaquette @crowens hi - I find this to be a fairly urgent need for the new Endpoint Exceptions work-flow, it will be hard for folks to find the option. Is it possible to get this in for 7.9.1? I'm hopefuly its an easier change, tho I don't know that. |
|
@mchopda I'll ping you as well. |
|
Agree with fixing hover for ... for better usability if it is a quick fix for 7.9.1 |
andrew-goldstein
added a commit
to andrew-goldstein/kibana
that referenced
this issue
Dec 14, 2020
…(a11y) Improvements This PR improves the accessibility of Timeline and the draggables used throughout the Security Solution. - ⌨️ Keyboard support for all draggables - 🖱 Click on any draggable with the mouse to give it keyboard focus - 🕵️♀️ Press `Enter` to display the draggable's action / options menu (e.g. Filter value, Investigate in Timeline, Show Top N). The menu also displays hyperlinks to allow for keyboard navigation from draggables containing links. - 🚀 Press `Space` to start dragging via keyboard, and press `Space` again to drop - 🏓 Timeline, + all Timeline-based tables (i.e. Detections, Host / Network Events, External alerts) support keyboard navigation - ⬆️ ⬇️ ⬅️ ➡️ arrow key navigation per the `Keyboard Support` section of [w3.org grid examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) - 📉 📈 `page down` and `page up` support per the `Keyboard interactions` section of the [MDN ARIA grid role documentation](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) (and also the [w3](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html)) - 🏠 🔚 `home` and `end` moves focus to the first and last cell in the row, per [w3.org](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) & [MDN](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) - 🕹🏠 🕹🔚 `ctrl + home` and `ctrl + end` moves focus to the first and last cell in the row, per [w3.org](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) & [MDN](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) - 🎉 Screenreader improvements for Timeline, + all Timeline-based tables, and draggables (tested with Voiceover for `macOS` version `10.15`) - 👂 Draggables implement custom screenreader announcements. For example, when a draggable field is selected, the screenreader reads a custom message that reads the _field name_ in addition to the value, to provide additional context. For example, selecting a field named `network_flow` may be read phonetically by the screen reader as: > event.action network underscore flow Press enter for actions, or press space to begin dragging - 📅 Timeline, + all Timeline-based tables provide an enhanced screenreader experience via the use of `EuiScreenReaderOnly` and [w3 grid roles](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) to provide context. For example, after clicking an arrow key to select a cell, the screenreader reads: > You are in a table cell. row: 2, column: 5, event.module system Press enter for options, or press space to begin dragging.  - 📰 Timeline's table supports Voiceover screenreader shortcuts that read all cells across a row, or all rows down a column. See <elastic#83364> for details - 🍿 popovers and tooltips were enhanced via `EuiScreenReaderOnly` to provide additional context to screen readers - 🪓 The [axe - Web Accessibility Testing Chrome extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) was run interactively throughout the Security Solution to find and fix the highest-severity issues found by `axe` - 🧹 Other keyboard-related improvements include - The `Customize Columns` popover traps keyboard focus, and allows navigation of content via arrow keys & home / end - The `Event details` view allows navigation of content via arrow keys & home / end - Improvements to keyboard-focus trapping in popovers throughout the Security Solution This PR addresses the following issues: - [X] [[Security Solution] Add support for Voiceover announcements In Timeline's table elastic#83364](elastic#83364) - [X] [[Security app] Detections events list 'overflow' ... button and expand > button do not have hover over names elastic#74140](elastic#74140) - [X] [SIEM app accessibility issues elastic#64596](elastic#64596) - After merging with the _Timeline Evolution_ PR, the drop zone at the bottom of the screen stopped accepting draggables after the first draggable is dropped. The current workaround is to press `Enter` to open the draggables action menu, and select the `Investigate in timeline` action. When Timeline is open, the drag area at the top of the screen accepts additional draggables via keyboard.
Merged
3 tasks
andrew-goldstein
added a commit
that referenced
this issue
Dec 16, 2020
…11y) Improvements (#85767) # [Security Solution][Timeline] Timeline and Draggable Accessibility (a11y) Improvements This PR improves the accessibility of Timeline and the draggables used throughout the Security Solution. - ⌨️ Keyboard support for all draggables - 🖱 Click on any draggable with the mouse to give it keyboard focus - 🕵️♀️ Press `Enter` to display the draggable's action / options menu (e.g. Filter value, Investigate in Timeline, Show Top N). The menu also displays hyperlinks to allow for keyboard navigation from draggables containing links. - 🚀 Press `Space` to start dragging via keyboard, and press `Space` again to drop - 🏓 Timeline, + all Timeline-based tables (i.e. Detections, Host / Network Events, External alerts) support keyboard navigation - ⬆️ ⬇️ ⬅️ ➡️ arrow key navigation per the `Keyboard Support` section of [w3.org grid examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) - 📉 📈 `page down` and `page up` support per the `Keyboard interactions` section of the [MDN ARIA grid role documentation](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) (and also the [w3](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html)) - 🏠 🔚 `home` and `end` moves focus to the first and last cell in the row, per [w3.org](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) & [MDN](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) - 🕹🏠 🕹🔚 `ctrl + home` and `ctrl + end` moves focus to the first and last cell in the row, per [w3.org](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) & [MDN](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) - 🎉 Screenreader improvements for Timeline, + all Timeline-based tables, and draggables (tested with Voiceover for `macOS` version `10.15`) - 👂 Draggables implement custom screenreader announcements. For example, when a draggable field is selected, the screenreader reads a custom message that reads the _field name_ in addition to the value, to provide additional context. For example, selecting a field named `network_flow` may be read phonetically by the screen reader as: > event.action network underscore flow Press enter for actions, or press space to begin dragging - 📅 Timeline, + all Timeline-based tables provide an enhanced screenreader experience via the use of `EuiScreenReaderOnly` and [w3 grid roles](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) to provide context. For example, after clicking an arrow key to select a cell, the screenreader reads: > You are in a table cell. row: 2, column: 5, event.module system Press enter for options, or press space to begin dragging.  - 📰 Timeline's table supports Voiceover screenreader shortcuts that read all cells across a row, or all rows down a column. See <#83364> for details - 🍿 popovers and tooltips were enhanced via `EuiScreenReaderOnly` to provide additional context to screen readers - 🪓 The [axe - Web Accessibility Testing Chrome extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) was run interactively throughout the Security Solution to find and fix the highest-severity issues found by `axe` - 🧹 Other keyboard-related improvements include - The `Customize Columns` popover traps keyboard focus, and allows navigation of content via arrow keys & home / end - The `Event details` view allows navigation of content via arrow keys & home / end - Improvements to keyboard-focus trapping in popovers throughout the Security Solution This PR addresses the following issues: - [X] [[Security Solution] Add support for Voiceover announcements In Timeline's table #83364](#83364) - [X] [[Security app] Detections events list 'overflow' ... button and expand > button do not have hover over names #74140](#74140) - [X] [SIEM app accessibility issues #64596](#64596) - After merging with the _Timeline Evolution_ PR, the drop zone at the bottom of the screen stopped accepting draggables after the first draggable is dropped. The current workaround is to press `Enter` to open the draggables action menu, and select the `Investigate in timeline` action. When Timeline is open, the drag area at the top of the screen accepts additional draggables via keyboard. EDIT: I paired with @XavierM on this, and he has a fix for this issue (duplicate draggable IDs) in his PR.
andrew-goldstein
added a commit
that referenced
this issue
Dec 16, 2020
…11y) Improvements (#85767) (#86081) # [Security Solution][Timeline] Timeline and Draggable Accessibility (a11y) Improvements This PR improves the accessibility of Timeline and the draggables used throughout the Security Solution. - ⌨️ Keyboard support for all draggables - 🖱 Click on any draggable with the mouse to give it keyboard focus - 🕵️♀️ Press `Enter` to display the draggable's action / options menu (e.g. Filter value, Investigate in Timeline, Show Top N). The menu also displays hyperlinks to allow for keyboard navigation from draggables containing links. - 🚀 Press `Space` to start dragging via keyboard, and press `Space` again to drop - 🏓 Timeline, + all Timeline-based tables (i.e. Detections, Host / Network Events, External alerts) support keyboard navigation - ⬆️ ⬇️ ⬅️ ➡️ arrow key navigation per the `Keyboard Support` section of [w3.org grid examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) - 📉 📈 `page down` and `page up` support per the `Keyboard interactions` section of the [MDN ARIA grid role documentation](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) (and also the [w3](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html)) - 🏠 🔚 `home` and `end` moves focus to the first and last cell in the row, per [w3.org](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) & [MDN](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) - 🕹🏠 🕹🔚 `ctrl + home` and `ctrl + end` moves focus to the first and last cell in the row, per [w3.org](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) & [MDN](<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role>) - 🎉 Screenreader improvements for Timeline, + all Timeline-based tables, and draggables (tested with Voiceover for `macOS` version `10.15`) - 👂 Draggables implement custom screenreader announcements. For example, when a draggable field is selected, the screenreader reads a custom message that reads the _field name_ in addition to the value, to provide additional context. For example, selecting a field named `network_flow` may be read phonetically by the screen reader as: > event.action network underscore flow Press enter for actions, or press space to begin dragging - 📅 Timeline, + all Timeline-based tables provide an enhanced screenreader experience via the use of `EuiScreenReaderOnly` and [w3 grid roles](https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html) to provide context. For example, after clicking an arrow key to select a cell, the screenreader reads: > You are in a table cell. row: 2, column: 5, event.module system Press enter for options, or press space to begin dragging.  - 📰 Timeline's table supports Voiceover screenreader shortcuts that read all cells across a row, or all rows down a column. See <#83364> for details - 🍿 popovers and tooltips were enhanced via `EuiScreenReaderOnly` to provide additional context to screen readers - 🪓 The [axe - Web Accessibility Testing Chrome extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) was run interactively throughout the Security Solution to find and fix the highest-severity issues found by `axe` - 🧹 Other keyboard-related improvements include - The `Customize Columns` popover traps keyboard focus, and allows navigation of content via arrow keys & home / end - The `Event details` view allows navigation of content via arrow keys & home / end - Improvements to keyboard-focus trapping in popovers throughout the Security Solution This PR addresses the following issues: - [X] [[Security Solution] Add support for Voiceover announcements In Timeline's table #83364](#83364) - [X] [[Security app] Detections events list 'overflow' ... button and expand > button do not have hover over names #74140](#74140) - [X] [SIEM app accessibility issues #64596](#64596) - After merging with the _Timeline Evolution_ PR, the drop zone at the bottom of the screen stopped accepting draggables after the first draggable is dropped. The current workaround is to press `Enter` to open the draggables action menu, and select the `Investigate in timeline` action. When Timeline is open, the drag area at the top of the screen accepts additional draggables via keyboard. EDIT: I paired with @XavierM on this, and he has a fix for this issue (duplicate draggable IDs) in his PR.
smith
added
the
Team:Security
|
Pinging @elastic/kibana-security (Team:Security) |
azasypkin
added
Team: SecuritySolution
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Kibana version: Tested on 7.9 BC 6 deployed to cloud prod
Browser version:
Chrome latest on macOS
Describe the bug:
the buttons in the SIEM / Security app Detections page do not have names in the ui or hover-over names so user may not know what they do (and may not try them). I found that the ... overflow button is the only way that the 'Exceptions' feature is exposed so it would be really nice to have it highlighted better in the UI with a name so users will know what the ... is.
Steps to reproduce:
Pedro and I discussed and we thought that 'More Actions' seemed like a good name for the ... overflow button. And perhaps 'Expand' could be a good title for the > button.
Expected behavior:
users know where to find features because they are intuitively labeled. this will also hinder a11y if not fixed.
Screenshots (if relevant):
note that the 'analyze' and 'investigate' have hover overs, but the other 2 do not.
The text was updated successfully, but these errors were encountered: