Merge pull request #210 from edx/fsheets/hidden-table-headers

fix(table): add label to sr only text on hidden table headers
openedx · Apr 11, 2018 · c2804a4 · c2804a4
2 parents 5c6daa2 + 71bba05
commit c2804a4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -19056,7 +19056,9 @@ exports[`Storyshots Table default heading 1`] = `
       >
         <span
           className="sr-only"
-        />
+        >
+          Coat Color
+        </span>
       </th>
     </tr>
   </thead>
@@ -19212,7 +19214,9 @@ exports[`Storyshots Table fixed 1`] = `
       >
         <span
           className="sr-only"
-        />
+        >
+          Coat Color
+        </span>
       </th>
     </tr>
   </thead>
@@ -19368,7 +19372,9 @@ exports[`Storyshots Table responsive 1`] = `
       >
         <span
           className="sr-only"
-        />
+        >
+          Coat Color
+        </span>
       </th>
     </tr>
   </thead>
@@ -19545,7 +19551,9 @@ exports[`Storyshots Table sortable 1`] = `
       >
         <span
           className="sr-only"
-        />
+        >
+          Coat Color
+        </span>
       </th>
     </tr>
   </thead>
@@ -19701,7 +19709,9 @@ exports[`Storyshots Table table-striped 1`] = `
       >
         <span
           className="sr-only"
-        />
+        >
+          Coat Color
+        </span>
       </th>
     </tr>
   </thead>
@@ -19857,7 +19867,9 @@ exports[`Storyshots Table unstyled 1`] = `
       >
         <span
           className="sr-only"
-        />
+        >
+          Coat Color
+        </span>
       </th>
     </tr>
   </thead>

diff --git a/src/Table/Table.test.jsx b/src/Table/Table.test.jsx
@@ -105,6 +105,19 @@ describe('<Table />', () => {
   describe('that is non-sortable renders', () => {
     const wrapper = mount(<Table {...sortableProps} tableSortable={false} />);
 
+    it('it sets column headers correctly even with hidden prop', () => {
+      const tableHeadings = wrapper.find('th');
+      let hiddenHeader;
+
+      tableHeadings.forEach((th, i) => {
+        expect(th.text()).toEqual(sortableProps.columns[i].label);
+        if (sortableProps.columns[i].hideHeader) {
+          hiddenHeader = sortableProps.columns[i].label;
+        }
+      });
+      expect(tableHeadings.find('span').text()).toEqual(hiddenHeader);
+    });
+
     it('without sortable columns', () => {
       const tableHeadings = wrapper.find('th');
 

diff --git a/src/Table/index.jsx b/src/Table/index.jsx
@@ -80,7 +80,7 @@ class Table extends React.Component {
         onClick={() => this.onSortClick(column.key)}
       />);
     } else if (column.hideHeader) {
-      heading = (<span className={classNames(styles['sr-only'])} />);
+      heading = (<span className={classNames(styles['sr-only'])}>{column.label}</span>);
     } else {
       heading = column.label;
     }