react-virtualized - npm Package Compare versions

Comparing version 6.0.4 to 6.0.5

CHANGELOG.md

 Changelog
 ------------
 
+#### 6.0.5
+Added `aria-label` and `role` attributes to `FlexTable`, `Grid`, and `VirtualScroll` components to fix a11y issues reported by [reactjs/react-a11y](https://github.com/reactjs/react-a11y).
+Thanks to @globexdesigns for the contributions!
+
 #### 6.0.4
@@ -5,0 +9,0 @@ Separated horiontal and vertical `Grid` metadata calculation to avoid unnecessarily recomputing row metadata for `FlexTable`s and `VirtualScroll`s when a browser's window is resized, for example.

dist/commonjs/FlexTable/FlexColumn.js

@@ -107,2 +107,5 @@ 'use strict';
 Column.propTypes = {
+  /** Optional aria-label value to set on the column header */
+  'aria-label': _react.PropTypes.string,
+
   /** Optional CSS class to apply to cell */
@@ -109,0 +112,0 @@ cellClassName: _react.PropTypes.string,

dist/commonjs/FlexTable/FlexTable.js

@@ -135,2 +135,3 @@ 'use strict';
         _react2.default.createElement(_Grid2.default, {
+          'aria-label': this.props['aria-label'],
           ref: 'Grid',
@@ -255,6 +256,9 @@ className: 'FlexTable__Grid',
         {
+          'aria-label': column.props['aria-label'] || label || dataKey,
           key: 'Header-Col' + columnIndex,
           className: classNames,
           style: style,
-          onClick: onClick
+          onClick: onClick,
+          role: 'rowheader',
+          tabIndex: '0'
         },
@@ -287,2 +291,3 @@ renderedHeader
         {
+          'aria-label': 'row',
           key: rowIndex,
@@ -296,3 +301,5 @@ className: (0, _classnames2.default)('FlexTable__row', rowClass),
             paddingRight: scrollbarWidth
-          }
+          },
+          role: 'row',
+          tabIndex: '0'
         },
@@ -367,2 +374,4 @@ renderedRow
 FlexTable.propTypes = {
+  'aria-label': _react.PropTypes.string,
+
   /** One or more FlexColumns describing the data displayed in this row */
@@ -369,0 +378,0 @@ children: function children(props, propName, componentName) {

dist/commonjs/Grid/Grid.js

@@ -395,6 +395,8 @@ 'use strict';
           ref: 'scrollingContainer',
+          'aria-label': this.props['aria-label'],
           className: (0, _classnames2.default)('Grid', className),
           onScroll: this._onScroll,
-          tabIndex: 0,
-          style: gridStyle
+          role: 'grid',
+          style: gridStyle,
+          tabIndex: 0
         },
@@ -697,2 +699,4 @@ childrenToDisplay.length > 0 && _react2.default.createElement(
 Grid.propTypes = {
+  'aria-label': _react.PropTypes.string,
+
   /**
@@ -788,2 +792,3 @@ * Optional custom CSS class name to attach to root Grid element.
 Grid.defaultProps = {
+  'aria-label': 'grid',
   noContentRenderer: function noContentRenderer() {
@@ -790,0 +795,0 @@ return null;

dist/commonjs/VirtualScroll/VirtualScroll.js

@@ -83,2 +83,3 @@ 'use strict';
         ref: 'Grid',
+        'aria-label': this.props['aria-label'],
         className: classNames,
@@ -131,2 +132,4 @@ columnWidth: width,
 VirtualScroll.propTypes = {
+  'aria-label': _react.PropTypes.string,
+
   /** Optional CSS class name */
@@ -133,0 +136,0 @@ className: _react.PropTypes.string,

dist/es/FlexTable/FlexColumn.js

@@ -85,2 +85,5 @@
 Column.propTypes = {
+  /** Optional aria-label value to set on the column header */
+  'aria-label': PropTypes.string,
+
   /** Optional CSS class to apply to cell */
@@ -87,0 +90,0 @@ cellClassName: PropTypes.string,

dist/es/FlexTable/FlexTable.js

@@ -102,2 +102,3 @@
         React.createElement(Grid, {
+          'aria-label': this.props['aria-label'],
           ref: 'Grid',
@@ -222,6 +223,9 @@ className: 'FlexTable__Grid',
         {
+          'aria-label': column.props['aria-label'] || label || dataKey,
           key: 'Header-Col' + columnIndex,
           className: classNames,
           style: style,
-          onClick: onClick
+          onClick: onClick,
+          role: 'rowheader',
+          tabIndex: '0'
         },
@@ -254,2 +258,3 @@ renderedHeader
         {
+          'aria-label': 'row',
           key: rowIndex,
@@ -263,3 +268,5 @@ className: cn('FlexTable__row', rowClass),
             paddingRight: scrollbarWidth
-          }
+          },
+          role: 'row',
+          tabIndex: '0'
         },
@@ -333,2 +340,4 @@ renderedRow
 FlexTable.propTypes = {
+  'aria-label': PropTypes.string,
+
   /** One or more FlexColumns describing the data displayed in this row */
@@ -335,0 +344,0 @@ children: function children(props, propName, componentName) {

dist/es/Grid/Grid.js

@@ -365,6 +365,8 @@
           ref: 'scrollingContainer',
+          'aria-label': this.props['aria-label'],
           className: cn('Grid', className),
           onScroll: this._onScroll,
-          tabIndex: 0,
-          style: gridStyle
+          role: 'grid',
+          style: gridStyle,
+          tabIndex: 0
         },
@@ -666,2 +668,4 @@ childrenToDisplay.length > 0 && React.createElement(
 Grid.propTypes = {
+  'aria-label': PropTypes.string,
+
   /**
@@ -757,2 +761,3 @@ * Optional custom CSS class name to attach to root Grid element.
 Grid.defaultProps = {
+  'aria-label': 'grid',
   noContentRenderer: function noContentRenderer() {
@@ -759,0 +764,0 @@ return null;

dist/es/VirtualScroll/VirtualScroll.js

@@ -56,2 +56,3 @@
         ref: 'Grid',
+        'aria-label': this.props['aria-label'],
         className: classNames,
@@ -103,2 +104,4 @@ columnWidth: width,
 VirtualScroll.propTypes = {
+  'aria-label': PropTypes.string,
+
   /** Optional CSS class name */
@@ -105,0 +108,0 @@ className: PropTypes.string,

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "homepage": "https://github.com/bvaughn/react-virtualized",
@@ -9,0 +9,0 @@ "main": "dist/commonjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

649958

increased by0.59%

Lines of code

7564

increased by0.63%

No dependency changes