Merge pull request #372 from panichevoleg/bugfix/648843-table-wrong-h…

…eader WCAG: PreciseUI table has wrong header
ZEISS · Mar 17, 2022 · a96f795 · a96f795
2 parents 6c1d1e6 + 01d23e8
commit a96f795
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Precise UI Changelog
 
+## 2.1.10
+
+- Fix WCAG error: Empty table header
+
 ## 2.1.9
 
 - Fixed `arrowToggle` on `AccordionTable`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",

diff --git a/src/components/Table/TableBasic.part.tsx b/src/components/Table/TableBasic.part.tsx
@@ -42,6 +42,7 @@ const StyledTable = styled.table<StyledTableProps>(
     border: ${borderless ? 'none' : theme.tableBorder};
 
     > thead > tr > th,
+    > thead > tr > td,
     > tbody > tr > td {
       padding: ${condensed ? `${distance.small} ${distance.large}` : theme.tableHeadPadding};
 
@@ -245,8 +246,11 @@ export class TableBasic<T> extends React.Component<TableProps<T> & RefProps, Tab
               const width = typeof column === 'string' ? undefined : column.width;
               const sortable = this.isSortable(key, columns);
               const direction = sortable && sortBy && (sortBy.columnKey !== key ? undefined : sortBy.order);
+              const headTag = `${name}`.trim() ? 'th' : 'td';
+
               return (
                 <StyledTableHeader
+                  as={headTag}
                   sortable={sortable}
                   width={width}
                   key={key}