Resolve UX feedback issues.

cerner · Oct 20, 2023 · 4c22b9f · 4c22b9f
1 parent 390f380
commit 4c22b9f
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 257 deletions.
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableWithoutHeaders.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableWithoutHeaders.jsx
@@ -9,11 +9,6 @@ const tableDataJSON = {
     { id: 'Column-3', displayName: 'Visit' },
     { id: 'Column-4', displayName: 'Allergy' },
     { id: 'Column-5', displayName: 'Primary Contact' },
-    { id: 'Column-6', displayName: 'Generic Order Counts' },
-    { id: 'Column-7', displayName: 'Patient Age' },
-    { id: 'Column-8', displayName: 'Medication History' },
-    { id: 'Column-9', displayName: 'My Relationship' },
-    { id: 'Column-10', displayName: 'Not Selectable', isSelectable: false },
   ],
   rows: [
     {
@@ -25,11 +20,6 @@ const tableDataJSON = {
         { content: 'Inpatient, 2 months' },
         { content: '' },
         { content: 'Quinzell, Harleen' },
-        { content: '' },
-        { isMasked: true },
-        { isMasked: true },
-        { content: 'Admitting Physician' },
-        { content: '', isSelectable: false },
       ],
     },
     {
@@ -42,11 +32,6 @@ const tableDataJSON = {
         { content: 'Outpatient, 2 days' },
         { content: 'Phytochemicals' },
         { content: 'Grayson, Richard' },
-        { content: '' },
-        { content: '' },
-        { isMasked: true },
-        { content: 'Admitting Physician' },
-        { content: '', isSelectable: false },
       ],
     },
     {
@@ -58,11 +43,6 @@ const tableDataJSON = {
         { content: 'Inpatient, 2 days' },
         { content: 'Aspirin' },
         { content: 'Grayson, Richard' },
-        { content: '' },
-        { content: '' },
-        { isMasked: true },
-        { content: 'Primary Care Physician' },
-        { content: '', isSelectable: false },
       ],
     },
   ],

diff --git a/packages/terra-table/src/Table.jsx b/packages/terra-table/src/Table.jsx
@@ -103,8 +103,8 @@ const propTypes = {
   hasSelectableRows: PropTypes.bool,
 
   /**
-   * Boolean indicating whether or not the table should allow entire rows to be selectable. An additional column will be
-   * rendered to allow for row selection to occur.
+   * Boolean indicating whether or not the table columns should be displayed. Setting the value to false will hide the columns,
+   * but the voice reader will use the column header values for a11y.
    */
   hasColumnHeaders: PropTypes.bool,
 
@@ -322,15 +322,14 @@ function Table(props) {
             ))}
           </colgroup>
 
-          {hasColumnHeaders && (
           <ColumnHeader
             columns={tableColumns}
+            hasColumnHeaders={hasColumnHeaders}
             headerHeight={columnHeaderHeight}
             tableHeight={tableHeight}
             onResizeMouseDown={onResizeMouseDown}
             onColumnSelect={handleColumnSelect}
           />
-          )}
           <tbody>
             {rows.map((row, index) => (
               <Row

diff --git a/packages/terra-table/src/subcomponents/ColumnHeader.jsx b/packages/terra-table/src/subcomponents/ColumnHeader.jsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import classNames from 'classnames/bind';
 import ColumnHeaderCell from './ColumnHeaderCell';
 import { columnShape } from '../proptypes/columnShape';
+import styles from './ColumnHeader.module.scss';
+
+const cx = classNames.bind(styles);
 
 const propTypes = {
   /**
@@ -30,6 +33,15 @@ const propTypes = {
    * Function that is called when the mouse down event is triggered on the column resize handle.
    */
   onResizeMouseDown: PropTypes.func,
+
+  /**
+   * Boolean indicating whether or not the table columns should be displayed.
+   */
+  hasColumnHeaders: PropTypes.bool,
+};
+
+const defaultProps = {
+  hasColumnHeaders: true,
 };
 
 const ColumnHeader = (props) => {
@@ -39,11 +51,15 @@ const ColumnHeader = (props) => {
     tableHeight,
     onColumnSelect,
     onResizeMouseDown,
+    hasColumnHeaders,
   } = props;
 
   return (
     <thead>
-      <tr className="column-header-row" height={headerHeight}>
+      <tr
+        className={cx('column-header-row', { hidden: !hasColumnHeaders })}
+        height={hasColumnHeaders ? headerHeight : undefined}
+      >
         {columns.map((column, columnIndex) => (
           <ColumnHeaderCell
             key={column.id}
@@ -70,4 +86,5 @@ const ColumnHeader = (props) => {
 };
 
 ColumnHeader.propTypes = propTypes;
+ColumnHeader.defaultProps = defaultProps;
 export default React.memo(ColumnHeader);
diff --git a/packages/terra-table/src/subcomponents/ColumnHeader.module.scss b/packages/terra-table/src/subcomponents/ColumnHeader.module.scss
@@ -0,0 +1,13 @@
+:local {
+  .hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap; /* Ensures words  are not read one at a time on screen readers*/
+    width: 1px;
+  }
+}
diff --git a/packages/terra-table/tests/jest/ColumnHeader.test.jsx b/packages/terra-table/tests/jest/ColumnHeader.test.jsx
@@ -128,4 +128,52 @@ describe('ColumnHeader', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('verifies that the hasColumnHeaders prop hides the table column headers when set to false', () => {
+    const columns = [{
+      id: 'Column-0',
+      displayName: ' Vitals',
+    }, {
+      id: 'Column-1',
+      displayName: ' Patient',
+    }];
+
+    const wrapper = shallow(
+      <ColumnHeader
+        columns={columns}
+        hasColumnHeaders={false}
+        headerHeight="3rem"
+      />,
+    );
+
+    // Verify that column headers are not present
+    const columnHeader = wrapper.find('.hidden');
+    expect(columnHeader).toHaveLength(1);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('verifies that the column headers are not hidden when the hasColumnHeader is true', () => {
+    const columns = [{
+      id: 'Column-0',
+      displayName: ' Vitals',
+    }, {
+      id: 'Column-1',
+      displayName: ' Patient',
+    }];
+
+    const wrapper = shallow(
+      <ColumnHeader
+        columns={columns}
+        headerHeight="3rem"
+        hasColumnHeaders
+      />,
+    );
+
+    // Verify that column headers are present
+    const columnHeader = wrapper.find('.hidden');
+    expect(columnHeader).toHaveLength(0);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/terra-table/tests/jest/Table.test.jsx b/packages/terra-table/tests/jest/Table.test.jsx
@@ -222,26 +222,7 @@ describe('Table', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('verifies that the hasColumnHeaders prop hides the table column headers', () => {
-    const wrapper = shallowWithIntl(
-      <IntlProvider locale="en">
-        <Table
-          id="test-terra-table"
-          overflowColumns={tableData.cols}
-          rows={tableData.rows}
-          hasColumnHeaders={false}
-        />
-      </IntlProvider>,
-    ).dive().dive();
-
-    // Verify that column headers are not present
-    const columnHeader = wrapper.find(ColumnHeader);
-    expect(columnHeader).toHaveLength(0);
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('verifies that the hasColumnHeaders prop hides the table column headers', () => {
+  it('verifies that the column widths are set properly in the colgroup', () => {
     const wrapper = shallowWithIntl(
       <IntlProvider locale="en">
         <Table

diff --git a/packages/terra-table/tests/jest/__snapshots__/ColumnHeader.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/ColumnHeader.test.jsx.snap
@@ -113,3 +113,54 @@ exports[`ColumnHeader renders a default column header 1`] = `
   </tr>
 </thead>
 `;
+
+exports[`ColumnHeader verifies that the column headers are not hidden when the hasColumnHeader is true 1`] = `
+<thead>
+  <tr
+    className="column-header-row"
+    height="3rem"
+  >
+    <Memo(InjectIntl(ColumnHeaderCell))
+      columnIndex={0}
+      displayName=" Vitals"
+      headerHeight="3rem"
+      id="Column-0"
+      key="Column-0"
+      rowIndex={0}
+    />
+    <Memo(InjectIntl(ColumnHeaderCell))
+      columnIndex={1}
+      displayName=" Patient"
+      headerHeight="3rem"
+      id="Column-1"
+      key="Column-1"
+      rowIndex={0}
+    />
+  </tr>
+</thead>
+`;
+
+exports[`ColumnHeader verifies that the hasColumnHeaders prop hides the table column headers when set to false 1`] = `
+<thead>
+  <tr
+    className="column-header-row hidden"
+  >
+    <Memo(InjectIntl(ColumnHeaderCell))
+      columnIndex={0}
+      displayName=" Vitals"
+      headerHeight="3rem"
+      id="Column-0"
+      key="Column-0"
+      rowIndex={0}
+    />
+    <Memo(InjectIntl(ColumnHeaderCell))
+      columnIndex={1}
+      displayName=" Patient"
+      headerHeight="3rem"
+      id="Column-1"
+      key="Column-1"
+      rowIndex={0}
+    />
+  </tr>
+</thead>
+`;