Table: fix the empty table column cell element and add test (#726)

* fix(table): update empty table cell element

* test(table): add empty column header cell test

* chore: add changeset

.changeset/strong-hounds-jump.md

@@ -0,0 +1,5 @@
+---
+"@ithaka/pharos": patch
+---
+
+Fix empty table column header cell and add test

packages/pharos/src/components/table/pharos-table.test.ts

@@ -9,7 +9,9 @@ import type { PharosPagination } from '../pagination/pharos-pagination';
 import type { PharosSelect } from '../select/pharos-select';
 
 describe('pharos-table', () => {
-  let component: PharosTable, componentWithPagination: PharosTable;
+  let component: PharosTable,
+    componentWithPagination: PharosTable,
+    componentWithEmptyHeaderCell: PharosTable;
   const columns = [
     {
       name: 'Item',
@@ -20,6 +22,20 @@ describe('pharos-table', () => {
       field: 'filename',
     },
   ];
+  const columnsEmptyCell = [
+    {
+      name: '',
+      field: 'item',
+    },
+    {
+      name: 'Item',
+      field: 'item',
+    },
+    {
+      name: 'Filename',
+      field: 'filename',
+    },
+  ];
   const rowData = [
     {
       item: 1,
@@ -59,6 +75,16 @@ describe('pharos-table', () => {
       >
       </test-pharos-table>
     `);
+
+    componentWithEmptyHeaderCell = await fixture(html`
+      <test-pharos-table
+        .columns="${columnsEmptyCell}"
+        .rowData="${rowData}"
+        .totalResults="${2}"
+        caption="test table"
+      >
+      </test-pharos-table>
+    `);
   });
 
   it('is accessible', async () => {
@@ -147,6 +173,14 @@ describe('pharos-table', () => {
 
     expect(prevWasFired).to.be.true;
   });
+
+  it('renders an empty table cell instead of table header if column header is empty', async () => {
+    const rows = componentWithEmptyHeaderCell.renderRoot.querySelectorAll(`tr`);
+    const headerRow = rows[0];
+    const tableCell = headerRow.querySelectorAll('td');
+    await expect(tableCell[0].innerHTML).is.empty;
+    await expect(componentWithEmptyHeaderCell).to.be.accessible();
+  });
 });
 
 it('throws an error if caption is not provided', async () => {

packages/pharos/src/components/table/pharos-table.ts

@@ -136,7 +136,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       if (column.name) {
         return html`<th scope="col">${column.name}</th>`;
       } else {
-        return html`<tb></tb>`;
+        return html`<td></td>`;
       }
     });
   }