fix a11y

packages/react-docs/patternfly-a11y.config.js

@@ -10,10 +10,11 @@ async function waitFor(page) {
 }
 
 module.exports = {
-  prefix: 'http://localhost:5000',
+  prefix: 'http://localhost:8002',
   waitFor,
   crawl: false,
-  urls: Object.keys(fullscreenRoutes),
+  // urls: Object.keys(fullscreenRoutes),
+  urls: ['/components/table/react/tree-table', '/components/table/react/composable-tree-table'],
   ignoreRules: 'color-contrast,page-has-heading-one,scrollable-region-focusable,bypass',
   ignoreIncomplete: true,
   skip: /^\/charts\//

packages/react-table/src/components/Table/RowWrapper.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { OUIAProps } from '@patternfly/react-core/dist/js/helpers/OUIA/ouia';
 import { debounce } from '@patternfly/react-core/dist/js/helpers/util';
 import { Tr } from '../TableComposable/Tr';
+import { IRow } from './TableTypes';
 
 // legacy export now, RowWrapperRow can simply be typed as IRow in the future
 export interface RowWrapperRow {
@@ -15,7 +16,7 @@ export interface RowWrapperProps extends OUIAProps {
   className?: string;
   onScroll?: React.UIEventHandler;
   onResize?: React.UIEventHandler;
-  row?: RowWrapperRow;
+  row?: IRow;
   rowProps?: {
     rowIndex: number;
     rowKey: string;
@@ -31,7 +32,7 @@ export class RowWrapper extends React.Component<RowWrapperProps> {
       isExpanded: undefined as boolean,
       isHeightAuto: undefined as boolean,
       isEditable: undefined as boolean
-    } as RowWrapperRow,
+    } as IRow,
     rowProps: null as any
   };
   _unmounted: boolean;

packages/react-table/src/components/Table/Table.tsx

@@ -31,6 +31,7 @@ import {
   IHeaderRow,
   OnFavorite
 } from './TableTypes';
+import { TreeRowWrapper } from './TreeRowWrapper';
 
 export interface TableProps extends OUIAProps {
   /** Adds an accessible name for the Table */
@@ -104,6 +105,8 @@ export interface TableProps extends OUIAProps {
   onFavorite?: OnFavorite;
   /** Along with the onSort prop, enables favorites sorting, defaults to true */
   canSortFavorites?: boolean;
+  /** Flag indicating table is a tree table */
+  isTreeTable?: boolean;
 }
 
 export class Table extends React.Component<TableProps, {}> {
@@ -128,7 +131,8 @@ export class Table extends React.Component<TableProps, {}> {
     selectVariant: 'checkbox',
     ouiaSafe: true,
     isStickyHeader: false,
-    canSortFavorites: true
+    canSortFavorites: true,
+    isTreeTable: false
   };
   state = {
     ouiaStateId: getDefaultOUIAId(Table.displayName)
@@ -158,7 +162,6 @@ export class Table extends React.Component<TableProps, {}> {
       'aria-label': ariaLabel,
       caption,
       header,
-      className,
       onSort,
       onSelect,
       canSelectAll,
@@ -232,7 +235,7 @@ export class Table extends React.Component<TableProps, {}> {
           renderers={{
             body: {
               wrapper: bodyWrapper || BodyWrapper,
-              row: rowWrapper || RowWrapper,
+              row: rowWrapper || (this.props.isTreeTable ? TreeRowWrapper : RowWrapper),
               cell: BodyCell
             },
             header: {
@@ -243,7 +246,6 @@ export class Table extends React.Component<TableProps, {}> {
           role={role}
           variant={variant}
           borders={borders}
-          className={className}
         >
           {caption && <caption>{caption}</caption>}
           {children}

packages/react-table/src/components/Table/TableTypes.ts

@@ -5,6 +5,7 @@ import {
   DropdownDirection,
   DropdownPosition
 } from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants';
+import * as React from 'react';
 
 export enum TableGridBreakpoint {
   none = '',
@@ -67,6 +68,19 @@ export type OnFavorite = (
   rowData: IRowData,
   extraData: IExtraData
 ) => void;
+export type OnTreeRowCollapse = (
+  event: any,
+  rowIndex: number,
+  title: string | React.ReactNode,
+  rowData: IRowData
+) => void;
+export type OnCheckChange = (
+  event: React.FormEvent<HTMLInputElement>,
+  isChecked: boolean,
+  rowIndex: number,
+  title: string | React.ReactNode,
+  rowData: IRowData
+) => void;
 
 // Todo: Update type with next breaking change release
 // export type IHeaderRow = ColumnType;

packages/react-table/src/components/Table/TreeRowWrapper.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+import { RowWrapperProps } from './RowWrapper';
+import { Tr } from '../TableComposable';
+
+export const TreeRowWrapper: React.FunctionComponent<RowWrapperProps> = ({
+  className,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rowProps,
+  ...props
+}: RowWrapperProps) => {
+  const { level, posinset, setsize, isExpanded, isHidden } = props.row.props;
+  return (
+    <Tr
+      role="treeitem"
+      aria-level={level}
+      aria-posinset={posinset}
+      aria-setsize={setsize}
+      aria-expanded={!!isExpanded}
+      isHidden={isHidden}
+      className={css(className, isExpanded && 'pf-m-expandable', isExpanded && styles.modifiers.expanded)}
+      {...props}
+    />
+  );
+};
+TreeRowWrapper.displayName = 'TreeRowWrapper';