Add aria roles for table

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `Fixed` for any bug fixes.
 - `Security`
 
+## [3.6.0] - 2020-03-26
+- https://github.com/teamsnap/teamsnap-ui/pull/267
+- `Added` aria roles for table
+
 ## [3.15.0] - 2020-03-17
 - https://github.com/teamsnap/teamsnap-ui/pull/269
 - `Added` orange as a color for the progress bar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamsnap/teamsnap-ui",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "a CSS component library for TeamSnap",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/js/components/PanelBody/PanelBody.tsx

@@ -16,11 +16,15 @@ import * as React from "react";
 import * as PropTypes from "prop-types";
 import { getClassName } from "../../utils/helpers";
 
-class PanelBody extends React.PureComponent<PropTypes.InferProps<typeof PanelBody.propTypes>, any> {
+class PanelBody extends React.PureComponent<
+  PropTypes.InferProps<typeof PanelBody.propTypes>,
+  any
+> {
   static propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     mods: PropTypes.string,
+    role: PropTypes.string,
     style: PropTypes.shape({}),
     otherProps: PropTypes.shape({})
   };
@@ -33,11 +37,12 @@ class PanelBody extends React.PureComponent<PropTypes.InferProps<typeof PanelBod
   };
 
   render() {
-    const { children, className, mods, style, otherProps } = this.props;
+    const { children, className, mods, role, style, otherProps } = this.props;
 
     return (
       <div
         className={getClassName(className, mods)}
+        role={role}
         style={style}
         {...otherProps}
       >

src/js/components/PanelCell/PanelCell.tsx

@@ -16,15 +16,19 @@ import * as React from "react";
 import * as PropTypes from "prop-types";
 import { getClassName } from "../../utils/helpers";
 
-class PanelCell extends React.PureComponent<PropTypes.InferProps<typeof PanelCell.propTypes>, any> {
+class PanelCell extends React.PureComponent<
+  PropTypes.InferProps<typeof PanelCell.propTypes>,
+  any
+> {
   static propTypes = {
     children: PropTypes.node,
     isTitle: PropTypes.bool,
     isHeader: PropTypes.bool,
     className: PropTypes.string,
     mods: PropTypes.string,
+    role: PropTypes.string,
     style: PropTypes.object,
-    otherProps: PropTypes.object,
+    otherProps: PropTypes.object
   };
 
   static defaultProps = {
@@ -33,6 +37,7 @@ class PanelCell extends React.PureComponent<PropTypes.InferProps<typeof PanelCel
     isHeader: false,
     className: "Panel-cell",
     mods: null,
+    role: "cell",
     style: {},
     otherProps: {}
   };
@@ -45,6 +50,7 @@ class PanelCell extends React.PureComponent<PropTypes.InferProps<typeof PanelCel
       isTitle,
       className,
       mods,
+      role,
       style,
       otherProps
     } = this.props;
@@ -56,7 +62,7 @@ class PanelCell extends React.PureComponent<PropTypes.InferProps<typeof PanelCel
     );
 
     return (
-      <div className={cellClasses} style={style} {...otherProps}>
+      <div className={cellClasses} role={role} style={style} {...otherProps}>
         {isTitle ? this.renderTitle() : children}
       </div>
     );

src/js/components/PanelRow/PanelRow.tsx

@@ -16,13 +16,17 @@ import * as React from "react";
 import * as PropTypes from "prop-types";
 import { getClassName } from "../../utils/helpers";
 
-class PanelRow extends React.PureComponent<PropTypes.InferProps<typeof PanelRow.propTypes>, any> {
+class PanelRow extends React.PureComponent<
+  PropTypes.InferProps<typeof PanelRow.propTypes>,
+  any
+> {
   static propTypes = {
     children: PropTypes.node.isRequired,
     isWithCells: PropTypes.bool,
     isParent: PropTypes.bool,
     className: PropTypes.string,
     mods: PropTypes.string,
+    role: PropTypes.string,
     style: PropTypes.object,
     otherProps: PropTypes.object
   };
@@ -32,6 +36,7 @@ class PanelRow extends React.PureComponent<PropTypes.InferProps<typeof PanelRow.
     isWithCells: null,
     isParent: null,
     mods: null,
+    role: "row",
     style: {},
     otherProps: {}
   };
@@ -43,6 +48,7 @@ class PanelRow extends React.PureComponent<PropTypes.InferProps<typeof PanelRow.
       isParent,
       className,
       mods,
+      role,
       style,
       otherProps
     } = this.props;
@@ -55,7 +61,7 @@ class PanelRow extends React.PureComponent<PropTypes.InferProps<typeof PanelRow.
     );
 
     return (
-      <div className={panelClasses} style={style} {...otherProps}>
+      <div className={panelClasses} role={role} style={style} {...otherProps}>
         {children}
       </div>
     );

src/js/components/Table/Table.tsx

@@ -203,7 +203,7 @@ class Table extends React.PureComponent<
     );
   };
 
-  renderPanelCell = (children, column) => {
+  renderPanelCell = (role, children, column) => {
     const cellMods = getClassName(
       column.mods,
       `u-text${capitalize(column.align || "Left")}`
@@ -213,6 +213,7 @@ class Table extends React.PureComponent<
       <PanelCell
         key={column.key}
         mods={cellMods}
+        role={role}
         style={column.style}
         isTitle={column.isTitle}
         {...column.otherProps}
@@ -226,7 +227,7 @@ class Table extends React.PureComponent<
     const data = row[column.name];
     const children = column.render ? column.render(column, row) : data;
 
-    return this.renderPanelCell(children, {
+    return this.renderPanelCell("cell", children, {
       key: `${row.id}-${column.name}`,
       itTitle: false,
       ...column
@@ -238,7 +239,7 @@ class Table extends React.PureComponent<
       ? this.renderSortLink(column)
       : this.renderSortLabel(column.label);
 
-    return this.renderPanelCell(children, {
+    return this.renderPanelCell("columnheader", children, {
       key: column.name,
       isTitle: true,
       ...column
@@ -295,7 +296,7 @@ class Table extends React.PureComponent<
         style={style}
         {...otherProps}
       >
-        <PanelBody>
+        <PanelBody role="table">
           <PanelRow isWithCells>{this.renderTableColumns()}</PanelRow>
           {maxTableHeight && (
             <div style={{ height: maxTableHeight, overflow: "scroll" }}>