Merge pull request #1258 from maykinmedia/issue/2347-A11y-1.3.1-table-heading-ckeditor

♿ [#2347] Add table-TH style/markup for product pages

Author: alextreme

src/open_inwoner/scss/components/Table/Table.scss

@@ -12,6 +12,27 @@
   scrollbar-color: var(--color-secondary) var(--color-gray-lightest);
   -webkit-overflow-scrolling: touch;
 
+  /// Scrollbar style for tables on mobile
+
+  @media (min-width: 768px) {
+    display: table;
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-gray-lightest);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-secondary);
+    border-radius: 6px;
+    border: 2px solid var(--color-secondary);
+  }
+
   &--space-medium {
     margin-top: var(--spacing-medium);
   }
@@ -40,43 +61,6 @@
     }
   }
 
-  &--content {
-    margin-top: var(--spacing-giant);
-    margin-bottom: var(--spacing-giant);
-
-    .table__item {
-      border-right: 1px solid var(--color-gray-light);
-    }
-
-    .table__item:first-of-type {
-      font-weight: bold;
-      padding-left: 0;
-    }
-
-    .table__item:not(:first-of-type) {
-      text-align: right;
-      padding-right: var(--spacing-giant);
-    }
-
-    .table__header:first-of-type {
-      padding-left: 0;
-    }
-
-    .table__header:not(:first-of-type) {
-      text-align: right;
-      padding-right: var(--spacing-giant);
-    }
-  }
-
-  &__heading {
-    .table__item {
-      color: var(--color-gray-lighter);
-      font-size: 16px;
-      letter-spacing: 0;
-      line-height: var(--font-line-height-body-medium);
-    }
-  }
-
   &__item {
     padding: var(--spacing-medium);
     border-bottom: 1px solid;
@@ -119,6 +103,72 @@
     }
   }
 
+  /// Product pages
+
+  &--content {
+    display: table;
+    border-collapse: separate;
+    margin-top: var(--spacing-giant);
+    margin-bottom: var(--spacing-giant);
+
+    .table__item {
+      border-right: 1px solid var(--color-gray-light);
+      word-wrap: break-word;
+      text-wrap: initial;
+    }
+
+    .table__item:first-of-type {
+      border-left: 1px solid var(--color-gray-light);
+      font-weight: bold;
+    }
+
+    .table__item:not(:first-of-type) {
+      text-align: right;
+      padding-right: var(--spacing-giant);
+    }
+
+    .table__row:first-child .table__header {
+      font-family: var(--font-family-heading);
+      font-weight: bold;
+      border-top: 1px solid var(--color-gray-dark-900);
+      border-bottom: 1px solid var(--color-gray-dark-900);
+    }
+
+    .table__header:first-of-type {
+      border-left: 1px solid var(--color-gray-dark-900);
+      border-top-left-radius: var(--border-radius);
+    }
+
+    .table__header:last-of-type {
+      border-right: 1px solid var(--color-gray-dark-900);
+      border-top-right-radius: var(--border-radius);
+    }
+
+    .table__header:not(:first-of-type) {
+      text-align: right;
+      padding-right: var(--spacing-giant);
+    }
+
+    .table__row:last-of-type .table__item:first-of-type {
+      border-bottom-left-radius: var(--border-radius);
+    }
+
+    .table__row:last-of-type .table__item:last-of-type {
+      border-bottom-right-radius: var(--border-radius);
+    }
+  }
+
+  /// Plans & Actions
+
+  &__heading {
+    .table__item {
+      color: var(--color-gray-lighter);
+      font-size: 16px;
+      letter-spacing: 0;
+      line-height: var(--font-line-height-body-medium);
+    }
+  }
+
   &__header {
     padding: var(--spacing-medium);
     text-align: left;
@@ -155,24 +205,26 @@
     }
   }
 
-  @media (min-width: 768px) {
-    display: table;
-  }
-}
+  ///
+  /// Legacy styling
+  ///
 
-/// Scrollbar style for tables on mobile
-
-.table::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+  &--content {
+    .table__row:first-child .table__item {
+      font-family: var(--font-family-heading);
+      font-weight: bold;
+      border-top: 1px solid var(--color-gray-dark-900);
+      border-bottom: 1px solid var(--color-gray-dark-900);
+    }
 
-.table::-webkit-scrollbar-track {
-  background: var(--color-gray-lightest);
-}
+    .table__row:first-of-type .table__item:first-of-type {
+      border-left: 1px solid var(--color-gray-dark-900);
+      border-top-left-radius: var(--border-radius);
+    }
 
-.table::-webkit-scrollbar-thumb {
-  background-color: var(--color-secondary);
-  border-radius: 6px;
-  border: 2px solid var(--color-secondary);
+    .table__row:first-of-type .table__item:last-of-type {
+      border-right: 1px solid var(--color-gray-dark-900);
+      border-top-right-radius: var(--border-radius);
+    }
+  }
 }

src/open_inwoner/utils/ckeditor.py

@@ -16,11 +16,29 @@
     ("p", "utrecht-paragraph"),
     ("a", "link link--secondary"),
     ("table", "table table--content"),
+    ("thead", "table__heading"),
+    ("tbody", "table__body"),
+    ("tr", "table__row"),
     ("th", "table__header"),
     ("td", "table__item"),
 ]
 
 
+def convert_first_row_to_th(html_tables):
+    """
+    Converts the first row of all tables from td to th.
+    """
+    for table in html_tables.find_all("table"):
+        first_row = table.find("tr")
+        if first_row:
+            for cell in first_row.find_all("td"):
+                th = html_tables.new_tag("th")
+                th.string = cell.string
+                th.attrs = cell.attrs
+                th["class"] = "table__header"
+                cell.replace_with(th)
+
+
 def get_rendered_content(content: str) -> str:
     """
     Takes object's content as an input and returns the rendered one.
@@ -50,6 +68,8 @@ def get_product_rendered_content(product):
     html = md.convert(content)
     soup = BeautifulSoup(html, "html.parser")
 
+    convert_first_row_to_th(soup)
+
     for tag, class_name in CLASS_ADDERS:
         for element in soup.find_all(tag):
             if element.attrs.get("class") and "cta-button" in element.attrs["class"]: