Fix merge conflicts.

packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js

@@ -27,7 +27,7 @@ const navigateToCell = (row, col) => {
 };
 
 const clickCell = (row, col, selector) => {
-  browser.$$(`${selector} tr`)[row].$(`:nth-child(${col + 1})`).click();
+  browser.$$(`${selector} tr`)[row].$(`td:nth-child(${col + 1}), th:nth-child(${col + 1})`).click();
 };
 
 Terra.describeViewports('FlowsheetDataGrid', ['medium', 'large'], () => {

packages/terra-data-grid/tests/wdio/worklist-data-grid-spec.js

@@ -33,7 +33,7 @@ const rowSelectionNavigateToCell = (row, col) => {
 };
 
 const clickCell = (row, col, selector) => {
-  browser.$$(`${selector} tr`)[row].$(`:nth-child(${col + 1})`).click();
+  browser.$$(`${selector} tr`)[row].$(`td:nth-child(${col + 1}), th:nth-child(${col + 1})`).click();
 };
 
 const shiftClickCell = (row, col, selector) => {

packages/terra-framework-docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Added
+  * Added example to `terra-table` to show column states and sorting;
   * Added new test for Terra Slider component for long field labels.
   * Added `hasVisibleColumnHeaders` example for FlowsheetDataGrid.
   * Added examples and tests to `terra-data-grid` for sections in FlowsheetDataGrid.

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnStates.doc.mdx

@@ -0,0 +1,17 @@
+import TableColumnStates from './TableColumnStates?dev-site-example';
+
+# Column States and Selection
+
+### Description
+This example demonstrates a [Table](/components/cerner-terra-framework-docs/table/about) that supports column states and sorting.
+A column can be selected by clicking on the column header or tabbing to the column header and pressing the Space key on the focused column header.
+Only columns that are selectable can be selected.
+
+The Column can display error and sort indicator icons to represent its current state.
+
+### Properties required
+* The **_onColumnSelect_** callback prop: When the user selects a column, this callback will be called with the columnId of the selected column.
+
+The below example also demonstrates how properties such as _isSelectable_, _hasError_ and _sortIndicator_ can be provided by the consumer to control if column header is selectable, display error state, and show sort indicator icons respectively.
+
+<TableColumnStates title='Table Column States' />

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnStates.jsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import Table from 'terra-table';
+
+const tableDataJSON = {
+  cols: [
+    {
+      id: 'Column-0', displayName: 'Patient', sortIndicator: 'ascending', hasError: true, isSelectable: true, // This column header will be rendered with a sort indicator and an error icon by default.
+    },
+    { id: 'Column-1', displayName: 'Location', isSelectable: true },
+    { id: 'Column-2', displayName: 'Illness Severity', isSelectable: true },
+    { id: 'Column-3', displayName: 'Visit', isSelectable: true },
+    { id: 'Column-4', displayName: 'Allergy', hasError: true }, // Use hasError property to display an error icon in the column header
+    { id: 'Column-5', displayName: 'Primary Contact', isSelectable: true },
+  ],
+  rows: [
+    {
+      id: '1',
+      cells: [
+        { content: 'Fleck, Arthur' },
+        { content: '1007-MTN' },
+        { content: 'Unstable' },
+        { content: 'Inpatient, 2 months' },
+        { content: '' },
+        { content: 'Quinzell, Harleen' },
+      ],
+    },
+    {
+      id: '2',
+      cells: [
+        { content: 'Wayne, Bruce' },
+        { content: '1007-MTN-DR' },
+        { content: 'Stable' },
+        { content: 'Outpatient, 2 days' },
+        { content: 'Phytochemicals' },
+        { content: 'Grayson, Richard' },
+      ],
+    },
+  ],
+};
+
+const TableWithColumnStates = () => {
+  const rowHeaderIndex = 0;
+  const { cols, rows } = tableDataJSON;
+
+  const [tableColumns, setTableColumns] = useState(cols);
+  const [tableRows, setTableRows] = useState(rows);
+
+  // The onColumnSelect will sort the rows and toggle the current sort indicator.
+  const onColumnSelect = (columnId) => {
+    const newColumnArray = tableColumns.map((column, columnIndex) => {
+      const newColumn = { ...column };
+
+      if (column.id === columnId) {
+        newColumn.sortIndicator = column.sortIndicator === 'ascending' ? 'descending' : 'ascending';
+
+        const newGridRows = [...tableRows];
+        newGridRows.sort((rowA, rowB) => {
+          const firstRowContent = rowA.cells[columnIndex].content || '';
+          const secondRowContent = rowB.cells[columnIndex].content || '';
+
+          if (newColumn.sortIndicator === 'ascending') {
+            return firstRowContent.localeCompare(secondRowContent);
+          }
+          return secondRowContent.localeCompare(firstRowContent);
+        });
+
+        setTableRows(newGridRows);
+      } else {
+        newColumn.sortIndicator = undefined;
+      }
+
+      return newColumn;
+    });
+
+    setTableColumns(newColumnArray);
+  };
+
+  return (
+    <Table
+      id="terra-table-with-column-states"
+      overflowColumns={tableColumns}
+      rows={tableRows}
+      rowHeaderIndex={rowHeaderIndex}
+      rowHeight="50px"
+      defaultColumnWidth={100}
+      columnHeaderHeight="50px"
+      onColumnSelect={onColumnSelect} // Consumer must provide this callback to the Worklist Data Grid for it to call when the user selects a column header.
+      ariaLabel="Table"
+    />
+  );
+};
+
+export default TableWithColumnStates;

packages/terra-table/src/Table.jsx

@@ -248,6 +248,8 @@ function Table(props) {
   const tableRowSelectionColumn = {
     id: 'table-rowSelectionColumn',
     width: 40,
+    displayName: intl.formatMessage({ id: 'Terra.table.row-selection-header-display' }),
+    isDisplayVisible: false,
     isSelectable: !!onRowSelectionHeaderSelect,
     isResizable: false,
   };
@@ -588,9 +590,9 @@ function Table(props) {
           ))}
         </ColumnContext.Provider>
       </table>
-      <VisuallyHiddenText aria-live="polite" text={rowSelectionModeAriaLiveMessage} />
-      <VisuallyHiddenText aria-live="polite" text={rowSelectionAriaLiveMessage} />
-      <VisuallyHiddenText aria-live="polite" aria-atomic="true" text={columnHeaderAriaLiveMessage} />
+      <VisuallyHiddenText className={cx('row-selection-mode-region')} aria-live="polite" text={rowSelectionModeAriaLiveMessage} />
+      <VisuallyHiddenText className={cx('row-selection-region')} aria-live="polite" text={rowSelectionAriaLiveMessage} />
+      <VisuallyHiddenText className={cx('column-header-region')} aria-live="polite" aria-atomic="true" text={columnHeaderAriaLiveMessage} />
     </div>
   );
 }

packages/terra-table/src/subcomponents/ColumnHeader.jsx

@@ -95,6 +95,7 @@ const ColumnHeader = (props) => {
             rowIndex={0}
             columnIndex={columnIndex}
             displayName={column.displayName}
+            isDisplayVisible={column.isDisplayVisible}
             width={column.width}
             minimumWidth={column.minimumWidth}
             maximumWidth={column.maximumWidth}

packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx

@@ -10,6 +10,7 @@ import { injectIntl } from 'react-intl';
 import * as KeyCode from 'keycode-js';
 import classNames from 'classnames/bind';
 import ThemeContext from 'terra-theme-context';
+import VisuallyHiddenText from 'terra-visually-hidden-text';
 import { IconUp, IconDown, IconError } from 'terra-icon';
 
 import ColumnResizeHandle from './ColumnResizeHandle';
@@ -62,6 +63,11 @@ const propTypes = {
    */
   isActive: PropTypes.bool,
 
+  /**
+   * Boolean value indicating whether or not the header cell text is displayed in the cell.
+   */
+  isDisplayVisible: PropTypes.bool,
+
   /**
    * Boolean value indicating whether or not the column header is selectable.
   */
@@ -135,6 +141,7 @@ const defaultProps = {
   hasError: false,
   isSelectable: false,
   isActive: false,
+  isDisplayVisible: true,
   isResizable: false,
   isResizeActive: false,
 };
@@ -147,6 +154,7 @@ const ColumnHeaderCell = (props) => {
     sortIndicator,
     hasError,
     isActive,
+    isDisplayVisible,
     isSelectable,
     isResizable,
     tableHeight,
@@ -236,14 +244,17 @@ const ColumnHeaderCell = (props) => {
     }
   };
 
-  let sortIndicatorIcon;
-  const errorIcon = hasError && <IconError a11yLabel={intl.formatMessage({ id: 'Terra.table.columnError' })} className={cx('error-icon')} />;
+  const errorIcon = hasError && <IconError className={cx('error-icon')} />;
 
   // Add the sort indicator based on the sort direction
+  let sortIndicatorIcon;
+  let sortDescription = '';
   if (sortIndicator === SortIndicators.ASCENDING) {
     sortIndicatorIcon = <IconUp />;
+    sortDescription = intl.formatMessage({ id: 'Terra.table.sort-ascending' });
   } else if (sortIndicator === SortIndicators.DESCENDING) {
     sortIndicatorIcon = <IconDown />;
+    sortDescription = intl.formatMessage({ id: 'Terra.table.sort-descending' });
   }
 
   // Retrieve current theme from context
@@ -271,6 +282,11 @@ const ColumnHeaderCell = (props) => {
   // Determine if button element is required for column header
   const hasButtonElement = isSelectable && displayName;
 
+  // Format header description for screenreader
+  let headerDescription = displayName;
+  headerDescription += errorIcon ? `, ${intl.formatMessage({ id: 'Terra.table.columnError' })}` : '';
+  headerDescription += sortDescription ? `, ${sortDescription}` : '';
+
   return (
   /* eslint-disable react/forbid-dom-props */
     <th
@@ -285,7 +301,6 @@ const ColumnHeaderCell = (props) => {
       role="columnheader"
       scope="col"
       title={displayName}
-      aria-sort={sortIndicator}
       onMouseDown={isSelectable && onColumnSelect ? handleMouseDown : undefined}
       onKeyDown={(isSelectable || isResizable) ? handleKeyDown : undefined}
       style={{ width: `${width}px`, height: headerHeight, left: cellLeftEdge }} // eslint-disable-line react/forbid-dom-props
@@ -296,8 +311,9 @@ const ColumnHeaderCell = (props) => {
         tabIndex={buttonTabIndex}
       >
         {errorIcon}
-        <span>{displayName}</span>
+        <span aria-hidden className={cx('display-text', { hidden: !isDisplayVisible })}>{displayName}</span>
         {sortIndicatorIcon}
+        <VisuallyHiddenText text={headerDescription} />
       </div>
       { isResizable && (
       <ColumnResizeHandle

packages/terra-table/src/subcomponents/ColumnHeaderCell.module.scss

@@ -19,6 +19,7 @@
     .header-container {
       align-items: center;
       display: flex;
+      flex-direction: row;
       height: 100%;
       padding: var(--terra-table-header-cell-padding, 5px);
       width: 100%;
@@ -30,7 +31,7 @@
     }
 
     // Style column header text
-    span {
+    .display-text {
       background: transparent;
       border: 0;
       flex: 1;
@@ -41,6 +42,10 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .display-text.hidden {
+      color: transparent;
+    }
   }
 
   // Hover state for selectable elements