Added conditional checks to when , , and get attached to headers and rows.

bvaughn · bvaughn · commit e6ff611359d2 · 2016-04-05T19:48:42.000-07:00
These a11y properties are only added when on-click or sort handlers are present.
diff --git a/source/FlexTable/FlexTable.js b/source/FlexTable/FlexTable.js
@@ -122,8 +122,6 @@ export default class FlexTable extends Component {
     disableHeader: false,
     headerHeight: 0,
     noRowsRenderer: () => null,
-    onHeaderClick: () => null,
-    onRowClick: () => null,
     onRowsRendered: () => null,
     onScroll: () => null,
     overscanRowsCount: 10
@@ -285,7 +283,7 @@ export default class FlexTable extends Component {
       : SortDirection.DESC
     const onClick = () => {
       sortEnabled && sort(dataKey, newSortDirection)
-      onHeaderClick(dataKey, columnData)
+      onHeaderClick && onHeaderClick(dataKey, columnData)
     }
 
     const renderedHeader = headerRenderer({
@@ -297,15 +295,21 @@ export default class FlexTable extends Component {
       sortDirection
     })
 
+    const a11yProps = {}
+
+    if (sortEnabled || onHeaderClick) {
+      a11yProps['aria-label'] = column.props['aria-label'] || label || dataKey
+      a11yProps.role = 'rowheader'
+      a11yProps.tabIndex = 0
+      a11yProps.onClick = onClick
+    }
+
     return (
       <div
-        aria-label={column.props['aria-label'] || label || dataKey}
+        {...a11yProps}
         key={`Header-Col${columnIndex}`}
         className={classNames}
         style={style}
-        onClick={onClick}
-        role='rowheader'
-        tabIndex='0'
       >
         {renderedHeader}
       </div>
@@ -334,18 +338,24 @@ export default class FlexTable extends Component {
       )
     )
 
+    const a11yProps = {}
+
+    if (onRowClick) {
+      a11yProps['aria-label'] = 'row'
+      a11yProps.role = 'row'
+      a11yProps.tabIndex = 0
+      a11yProps.onClick = () => onRowClick(rowIndex)
+    }
+
     return (
       <div
-        aria-label='row'
+        {...a11yProps}
         key={rowIndex}
         className={cn('FlexTable__row', rowClass)}
-        onClick={() => onRowClick(rowIndex)}
         style={{
           height: this._getRowHeight(rowIndex),
           paddingRight: scrollbarWidth
         }}
-        role='row'
-        tabIndex='0'
       >
         {renderedRow}
       </div>
diff --git a/source/FlexTable/FlexTable.test.js b/source/FlexTable/FlexTable.test.js
@@ -669,4 +669,47 @@ describe('FlexTable', () => {
       })
     })
   })
+
+  describe('a11y properties', () => {
+    it('should attach a11y properties to a row if :onRowClick is specified', () => {
+      const rendered = findDOMNode(render(getMarkup({
+        onRowClick: () => {}
+      })))
+      const row = rendered.querySelector('.FlexTable__row')
+      expect(row.getAttribute('aria-label')).toEqual('row')
+      expect(row.getAttribute('role')).toEqual('row')
+      expect(row.tabIndex).toEqual(0)
+    })
+
+    it('should not attach a11y properties to a row if no :onRowClick is specified', () => {
+      const rendered = findDOMNode(render(getMarkup({
+        onRowClick: null
+      })))
+      const row = rendered.querySelector('.FlexTable__row')
+      expect(row.getAttribute('aria-label')).toEqual(null)
+      expect(row.getAttribute('role')).toEqual(null)
+      expect(row.tabIndex).toEqual(-1)
+    })
+
+    it('should attach a11y properties to a header column if sort is enabled', () => {
+      const rendered = findDOMNode(render(getMarkup({
+        disableSort: false,
+        sort: () => {}
+      })))
+      const row = rendered.querySelector('.FlexTable__headerColumn')
+      expect(row.getAttribute('aria-label')).toEqual('Name')
+      expect(row.getAttribute('role')).toEqual('rowheader')
+      expect(row.tabIndex).toEqual(0)
+    })
+
+    it('should not attach a11y properties to a header column if sort is not enabled', () => {
+      const rendered = findDOMNode(render(getMarkup({
+        disableSort: true
+      })))
+      const row = rendered.querySelector('.FlexTable__headerColumn')
+      expect(row.getAttribute('aria-label')).toEqual(null)
+      expect(row.getAttribute('role')).toEqual(null)
+      expect(row.tabIndex).toEqual(-1)
+    })
+  })
 })
