Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution] Add support for Voiceover announcements In Timeline's table #83364

Open
andrew-goldstein opened this issue Nov 13, 2020 · 1 comment
Open

[Security Solution] Add support for Voiceover announcements In Timeline's table #83364

andrew-goldstein opened this issue Nov 13, 2020 · 1 comment
Assignees
@andrew-goldstein
Labels
enhancement New value added to drive a business result Project:Accessibility Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team

Comments

@andrew-goldstein
Copy link
Contributor

[Security Solution] Add support for Voiceover announcements In Timeline's table

macOS's Voiceover accessibility feature provides shortcuts for announcing the contents of tables, if the table implementation is instrumented to provide context via aria tags.

Enhance Timeline's table such that it supports the following Voiceover features:

  • To hear the contents of a table row from the location of the VoiceOver cursor to the end of the row, press VO-R.
  • To hear the contents of a table column from the location of the VoiceOver cursor to the bottom of the column, press VO-C-C.
  • To hear the column header, press VO-C.

Note: Voiceover should skip over and NOT announce row renderer content that interleaves a column when reading the contents of a column from the current row to the bottom of the page (via VO-C-C).

Kibana/Elasticsearch Stack version:

7.11

Functional Area (e.g. Endpoint management, timelines, resolver, etc.):

Timeline

Steps to reproduce:

  1. Drag anything to a new timeline
  2. Focus any event.category cell
  3. Enable macOS voiceover via Command + F5

Expected result

  • After making several context-setting announcements, Voiceover will state: You are currently on a group, Inside of a cell
  1. Press Control-Option-R

Expected result

  • Voiceover will announce the current row, e.g. row 2 of 26
  1. Once again, press Control-Option-R

Expected results

  • This time, voiceover will announce the current column, e.g. event.category, and the cell value, e.g. network
  • Voiceover will continue to announce the remaining columns and values until it reaches the end of the current row, e.g. event.action / network_flow, host.name / somehostname, etc
  1. Press Control-Option-C-C (note, press C twice)

Expected results

  • Voiceover will announce the current column, e.g. event.category, and the cell value, e.g. network
  • Voiceover will continue to announce the remaining event.category values from the current row to the bottom of the column
  • Voiceover will skip over and NOT announce row renderer content while reading the column
  1. Press Control-Option-C
  • Voiceover will announce the current column, e.g. event.category

Current behavior:

  • No Voiceover table support

Expected behavior:

See Steps to reproduce above
@andrew-goldstein andrew-goldstein added Project:Accessibility enhancement New value added to drive a business result Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. labels Nov 13, 2020
@andrew-goldstein andrew-goldstein self-assigned this Nov 13, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@andrew-goldstein andrew-goldstein added the Team:Threat Hunting Security Solution Threat Hunting Team label Nov 13, 2020
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Dec 14, 2020
@andrew-goldstein
# [Security Solution][Timeline] Timeline and Draggable Accessibility …
15b00b2 
…(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.

  ![you-are-in-a-table-cell](https://user-images.githubusercontent.com/4459398/102074207-a7e95000-3dc1-11eb-8e01-5b14c72094c9.png)

  - 📰 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.
@andrew-goldstein andrew-goldstein mentioned this issue Dec 14, 2020
Merged
3 tasks
andrew-goldstein added a commit that referenced this issue Dec 16, 2020
@andrew-goldstein
[Security Solution][Timeline] Timeline and Draggable Accessibility (a…
d559f0c 
…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.

  ![you-are-in-a-table-cell](https://user-images.githubusercontent.com/4459398/102074207-a7e95000-3dc1-11eb-8e01-5b14c72094c9.png)

  - 📰 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
@andrew-goldstein
[Security Solution][Timeline] Timeline and Draggable Accessibility (a…
01ba881 
…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.

  ![you-are-in-a-table-cell](https://user-images.githubusercontent.com/4459398/102074207-a7e95000-3dc1-11eb-8e01-5b14c72094c9.png)

  - 📰 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andrew-goldstein andrew-goldstein

Labels
enhancement New value added to drive a business result Project:Accessibility Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@andrew-goldstein @elasticmachine