Fix grid roles for accessbility (#1624)

* Fix grid roles for accessbility * Add test for gridcell role
bvaughn · May 17, 2021 · abe0530 · abe0530
1 parent d365098
commit abe0530
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/source/Grid/Grid.jest.js b/source/Grid/Grid.jest.js
@@ -1102,7 +1102,7 @@ describe('Grid', () => {
     });
   });
 
-  describe('styles, classNames, and ids', () => {
+  describe('styles, classNames, ids, and roles', () => {
     it('should use the expected global CSS classNames', () => {
       const rendered = findDOMNode(render(getMarkup()));
       expect(rendered.className).toEqual('ReactVirtualized__Grid');
@@ -1132,6 +1132,12 @@ describe('Grid', () => {
           .style.backgroundColor,
       ).toEqual('red');
     });
+
+    it('should have the gridcell role', () => {
+      const containerStyle = {backgroundColor: 'red'};
+      const rendered = findDOMNode(render(getMarkup({containerStyle})));
+      expect(rendered.querySelectorAll('[role="gridcell"]').length).toEqual(20);
+    });
   });
 
   describe('onScroll', () => {

diff --git a/source/Grid/Grid.js b/source/Grid/Grid.js
@@ -263,7 +263,7 @@ class Grid extends React.PureComponent<Props, State> {
     autoHeight: false,
     autoWidth: false,
     cellRangeRenderer: defaultCellRangeRenderer,
-    containerRole: 'rowgroup',
+    containerRole: 'row',
     containerStyle: {},
     estimatedColumnSize: 100,
     estimatedRowSize: 30,

diff --git a/source/Grid/defaultCellRangeRenderer.js b/source/Grid/defaultCellRangeRenderer.js
@@ -1,6 +1,7 @@
 /** @flow */
 
 import type {CellRangeRendererParams} from './types';
+import React from 'react';
 
 /**
  * Default implementation of cellRangeRenderer used by Grid.
@@ -138,6 +139,10 @@ export default function defaultCellRangeRenderer({
         warnAboutMissingStyle(parent, renderedCell);
       }
 
+      if (!renderedCell.props.role) {
+        renderedCell = React.cloneElement(renderedCell, {role: 'gridcell'});
+      }
+
       renderedCells.push(renderedCell);
     }
   }