[Accessibility] Avoid empty th in doc-table header row (#12364)

elastic · Jun 21, 2017 · 1eaf83e · 1eaf83e
1 parent 57f7da6
commit 1eaf83e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/ui/public/doc_table/__tests__/lib/rows_headers.js b/src/ui/public/doc_table/__tests__/lib/rows_headers.js
@@ -52,7 +52,7 @@ describe('Doc Table', function () {
 
     it('should create a time column if the timefield is defined', function () {
       const childElems = parentElem.find(elemType);
-      expect(childElems.length).to.be(2);
+      expect(childElems.length).to.be(1);
     });
 
     it('should be able to add and remove columns', function () {
@@ -61,28 +61,28 @@ describe('Doc Table', function () {
       $parentScope.columns = ['bytes'];
       parentElem.scope().$digest();
       childElems = parentElem.find(elemType);
-      expect(childElems.length).to.be(3);
-      expect($(childElems[2]).text()).to.contain('bytes');
+      expect(childElems.length).to.be(2);
+      expect($(childElems[1]).text()).to.contain('bytes');
 
       $parentScope.columns = ['bytes', 'request_body'];
       parentElem.scope().$digest();
       childElems = parentElem.find(elemType);
-      expect(childElems.length).to.be(4);
-      expect($(childElems[3]).text()).to.contain('request_body');
+      expect(childElems.length).to.be(3);
+      expect($(childElems[2]).text()).to.contain('request_body');
 
       $parentScope.columns = ['request_body'];
       parentElem.scope().$digest();
       childElems = parentElem.find(elemType);
-      expect(childElems.length).to.be(3);
-      expect($(childElems[2]).text()).to.contain('request_body');
+      expect(childElems.length).to.be(2);
+      expect($(childElems[1]).text()).to.contain('request_body');
     });
 
     it('should create only the toggle column if there is no timeField', function () {
       delete parentElem.scope().indexPattern.timeFieldName;
       parentElem.scope().$digest();
 
       const childElems = parentElem.find(elemType);
-      expect(childElems.length).to.be(1);
+      expect(childElems.length).to.be(0);
     });
 
   };
@@ -117,7 +117,7 @@ describe('Doc Table', function () {
     });
 
     describe('adding and removing columns', function () {
-      columnTests('th', $elem);
+      columnTests('[data-test-subj~="docTableHeaderField"]', $elem);
     });
 
     describe('cycleSortOrder function', function () {
@@ -252,7 +252,7 @@ describe('Doc Table', function () {
     });
 
     describe('adding and removing columns', function () {
-      columnTests('td', $elem);
+      columnTests('[data-test-subj~="docTableField"]', $elem);
     });
 
     describe('details row', function () {

diff --git a/src/ui/public/doc_table/components/table_header.html b/src/ui/public/doc_table/components/table_header.html
@@ -1,6 +1,10 @@
 <tr>
-  <th width="1%"></th>
-  <th ng-if="indexPattern.timeFieldName" data-test-subj="docTableHeaderField">
+  <td width="1%"></td>
+  <th
+    ng-if="indexPattern.timeFieldName"
+    data-test-subj="docTableHeaderField"
+    scope="col"
+  >
     <span>Time <button
       id="docTableHeaderFieldSort{{indexPattern.timeFieldName}}"
       tabindex="0"
@@ -13,7 +17,11 @@
     ></button>
     </span>
   </th>
-  <th ng-repeat="name in columns" data-test-subj="docTableHeaderField">
+  <th
+    ng-repeat="name in columns"
+    data-test-subj="docTableHeaderField"
+    scope="col"
+  >
     <span class="table-header-name">
       {{name | shortDots}}
       <button