(Accessibility) Kibana Stack Monitoring - Tables need better information

[barlowm]

Steps to reproduce (assumes NVDA or JAWS Screen Reader or similar)

NVDA Screen Reader is a free Screen Reader which can be downloaded from the NV Access Website Deque has a page of shortcuts for help on using NVDA as well as a Quick Reference Guide for using NVDA

Steps to reproduce

1. Navigate to the Kibana Stack Monitoring page
2. Navigate to the "Recent Log Entries" table (Click in the "Logs" component, then press the "T" key to go to the next table) The first table on the page is the "Recent Log Entries" but table navigation to the first table does not tell you what table you're in. NVDA Reads: "Table with 11 rows and 6 columns. Below is a table of 10 items"

The caption should be more descriptive. Identifying it as a "table of N items" does not describe the purpose of the table (which would be read when navigating directly through the list of tables e.g. "Recent Log Entries showing the most...").

<caption role="status" aria-relevant="text" aria-live="polite"
class="euiScreenReaderOnly">Below is a table of 10 items.</caption>

A better caption would be:

<caption role="status" aria-relevant="text" aria-live="polite"
class="euiScreenReaderOnly">Recent Log Entries for this cluster</caption>

3. Navigate through the table with the keyboard using the table caret navigation controls (T, DownArrow, Ctrl-Down/RightArrow, Ctrl-Left/RightArrow) Switching between columns and rows, the screen reader will announce the column header (e.g. "Level", "Type", "Message"), but not the row (other than the row number "Row 3") The screen reader does not read the "timestamp" which would tell the reader what row they are looking at.

Add

scope="row"

to the first <TH> tag of each <TR> tag in the table (currently the rows of the table do not have <TH> for the first cell of the row. This will cause the screen reader to read the data in the first cell of the row before reading the contents of the selected cell.

Meta Issue Accessibility Audit for Kibana 7.0

Kibana Version: 7.2

OS: Tested on Windows 7. But issue exists in all OS's

Browser: Tested in Chrome. But issue exists in all Browsers

Screen reader: [if relevant] NVDA

Relevant WCAG Criteria: WCAG Criterion 1.3.1 Info and Relationships - Level A Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text

Relevant ARIA spec: WAI-ARIA Authoring Practices 1.1 N/A

Tables Concepts

Blocked by https://github.com/elastic/eui/issues/2336

[elasticmachine]

Pinging @elastic/stack-monitoring

[myasonik]

EUI supports rowHeader and tableCaption props to fix this issue