Fix aria roles for the table component

docs/Grid.md

@@ -25,6 +25,7 @@ A windowed grid of elements. `Grid` only renders cells necessary to fill itself
 | overscanColumnCount | Number |  | Number of columns to render before/after the visible slice of the grid. This can help reduce flickering during scrolling on certain browsers/devices. |
 | overscanIndicesGetter | Function |  | Responsible for calculating the number of cells to overscan before and after a specified range [Learn more](#overscanindicesgetter) |
 | overscanRowCount | Number |  | Number of rows to render above/below the visible slice of the grid. This can help reduce flickering during scrolling on certain browsers/devices. |
+| role | String |  | Optional override of ARIA role default; defaults to `grid`. |
 | rowCount | Number | ✓ | Number of rows in grid. |
 | rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` |
 | scrollingResetTimeInterval | Number |  | Wait this amount of time after the last scroll event before resetting Grid `pointer-events`; defaults to 150ms. |

source/Grid/Grid.jest.js

@@ -1465,6 +1465,19 @@ describe('Grid', () => {
     })
   })
 
+  describe('role', () => {
+    it('should have grid role by default', () => {
+      const rendered = findDOMNode(render(getMarkup()))
+      expect(rendered.getAttribute('role')).toEqual('grid')
+    })
+
+    it('should allow role to be overridden', () => {
+      const role = null
+      const rendered = findDOMNode(render(getMarkup({ role })))
+      expect(rendered.getAttribute('role')).toEqual(role)
+    })
+  })
+
   describe('pure', () => {
     it('should not re-render unless props have changed', () => {
       let cellRendererCalled = false

source/Grid/Grid.js

@@ -162,6 +162,11 @@ export default class Grid extends PureComponent {
      */
     overscanRowCount: PropTypes.number.isRequired,
 
+    /**
+     * ARIA role for the grid element.
+     */
+    role: PropTypes.string,
+
     /**
      * Either a fixed row height (number) or a function that returns the height of a row given its index.
      * Should implement the following interface: ({ index: number }): number
@@ -223,6 +228,7 @@ export default class Grid extends PureComponent {
     overscanColumnCount: 0,
     overscanIndicesGetter: defaultOverscanIndicesGetter,
     overscanRowCount: 10,
+    role: 'grid',
     scrollingResetTimeInterval: DEFAULT_SCROLLING_RESET_TIME_INTERVAL,
     scrollToAlignment: 'auto',
     scrollToColumn: -1,
@@ -634,6 +640,7 @@ export default class Grid extends PureComponent {
       height,
       id,
       noContentRenderer,
+      role,
       style,
       tabIndex,
       width
@@ -687,7 +694,7 @@ export default class Grid extends PureComponent {
         className={cn('ReactVirtualized__Grid', className)}
         id={id}
         onScroll={this._onScroll}
-        role='grid'
+        role={role}
         style={{
           ...gridStyle,
           ...style

source/Table/Table.jest.js

@@ -876,13 +876,35 @@ describe('Table', () => {
   })
 
   describe('a11y properties', () => {
+    it('should set aria role on the table', () => {
+      const node = findDOMNode(render(getMarkup()))
+      expect(node.getAttribute('role')).toEqual('grid')
+    })
+
+    it('should set aria role on the header row', () => {
+      const rendered = findDOMNode(render(getMarkup()))
+      const row = rendered.querySelector('.ReactVirtualized__Table__headerRow')
+      expect(row.getAttribute('role')).toEqual('row')
+    })
+
+    it('should not set aria role on the grid', () => {
+      const rendered = findDOMNode(render(getMarkup()))
+      const grid = rendered.querySelector('.ReactVirtualized__Table__Grid')
+      expect(grid.getAttribute('role')).toEqual(null)
+    })
+
+    it('should set aria role on a row', () => {
+      const rendered = findDOMNode(render(getMarkup()))
+      const row = rendered.querySelector('.ReactVirtualized__Table__row')
+      expect(row.getAttribute('role')).toEqual('row')
+    })
+
     it('should attach a11y properties to a row if :onRowClick is specified', () => {
       const rendered = findDOMNode(render(getMarkup({
         onRowClick: () => {}
       })))
       const row = rendered.querySelector('.ReactVirtualized__Table__row')
       expect(row.getAttribute('aria-label')).toEqual('row')
-      expect(row.getAttribute('role')).toEqual('row')
       expect(row.tabIndex).toEqual(0)
     })
 
@@ -892,7 +914,6 @@ describe('Table', () => {
       })))
       const row = rendered.querySelector('.ReactVirtualized__Table__row')
       expect(row.getAttribute('aria-label')).toEqual(null)
-      expect(row.getAttribute('role')).toEqual(null)
       expect(row.tabIndex).toEqual(-1)
     })
 

source/Table/Table.js

@@ -306,6 +306,7 @@ export default class Table extends PureComponent {
       <div
         className={cn('ReactVirtualized__Table', className)}
         id={id}
+        role='grid'
         style={style}
       >
         {!disableHeader && (
@@ -335,6 +336,7 @@ export default class Table extends PureComponent {
           onScroll={this._onScroll}
           onSectionRendered={this._onSectionRendered}
           ref={this._setRef}
+          role={null}
           scrollbarWidth={scrollbarWidth}
           scrollToRow={scrollToIndex}
           style={{

source/Table/defaultHeaderRowRenderer.js

@@ -9,6 +9,7 @@ export default function defaultHeaderRowRenderer ({
 }: HeaderRowRendererParams) {
   return <div
     className={className}
+    role='row'
     style={style}
   >
     {columns}

source/Table/defaultRowRenderer.js

@@ -27,7 +27,6 @@ export default function defaultRowRenderer ({
     onRowMouseOut
   ) {
     a11yProps['aria-label'] = 'row'
-    a11yProps.role = 'row'
     a11yProps.tabIndex = 0
 
     if (onRowClick) {
@@ -49,6 +48,7 @@ export default function defaultRowRenderer ({
       {...a11yProps}
       className={className}
       key={key}
+      role='row'
       style={style}
     >
       {columns}