Review example of table design pattern

[mcking65]

The table example page
completed for issue #242 is ready for review.

Task Force Member Reviews Requested as of December 6, 2017

• Review by Ann (@annabbott)
• Review by Jemma (@a11ydoer)
• Review by James (@jnurthen)

[annabbott]

No issues noted.

[a11ydoer]

Visual styling(CSS) is applied and this example is done!

[jha11y]

The current example does not work with Firefox 68.0.1 and NVDA 2019.1.1 when using table reading keystrokes. NVDA only can navigate the column header row and first data row.

This seems to be because of the combined use of both role="rowgroup" and role="row". Removing the role="rowgroup" seems to fix the issue.

Steps to reproduce:

1. Go to example page
2. Navigate to second row in table (starts with "Fred")
3. try to use table reading keystrokes to navigate the table (Ctrl+ Alt and arrows keys)

[mcking65]

@jha11y commented:

The current example does not work with Firefox 68.0.1 and NVDA 2019.1.1 when using table reading keystrokes. NVDA only can navigate the column header row and first data row.

This seems to be because of the combined use of both role="rowgroup" and role="row". Removing the role="rowgroup" seems to fix the issue.

Steps to reproduce:

1. Go to example page
2. Navigate to second row in table (starts with "Fred")
3. try to use table reading keystrokes to navigate the table (Ctrl+ Alt and arrows keys)

The rowgroup role is used correctly in the example. Since it works with JAWS and Firefox 68, this is most likely an NVDA bug. This is the type of issue we intend to capture and report with the w3c/aria-at project.