[#387] Added two dimensional table to fix accessibility issue. (#420)

components/00-base/mixins/_table.scss

@@ -14,6 +14,42 @@
 
   @include ct-typography('text-regular');
 
+  thead,
+  tfoot {
+    @include ct-typography('label-regular');
+  }
+
+  tr {
+    th,
+    td {
+      padding: ct-spacing(1.5) ct-spacing(3);
+      vertical-align: $ct-table-cell-vertical-align;
+    }
+  }
+
+  caption {
+    text-align: left;
+    padding: ct-spacing(1.5) 0;
+
+    @include ct-typography('label-large');
+  }
+
+  &#{$root}--caption-after {
+    caption-side: bottom;
+
+    caption {
+      @include ct-typography('text-small');
+    }
+  }
+
+  &:not(.ct-table--data) {
+    @include ct-table-responsive();
+  }
+}
+
+@mixin ct-table-responsive() {
+  $root: &;
+
   @include ct-breakpoint-upto($ct-table-breakpoint) {
     thead,
     tfoot {
@@ -64,43 +100,14 @@
         }
       }
     }
-  }
 
-  thead,
-  tfoot {
-    @include ct-typography('label-regular');
-  }
-
-  tr {
-    th,
-    td {
-      padding: ct-spacing(1.5) ct-spacing();
-      vertical-align: $ct-table-cell-vertical-align;
-
-      @include ct-breakpoint($ct-table-breakpoint) {
-        padding: ct-spacing(1.5) ct-spacing(3);
+    tr {
+      th,
+      td {
+        padding: ct-spacing(1.5) ct-spacing();
       }
     }
   }
-
-  caption {
-    text-align: left;
-    padding: ct-spacing(1.5) 0;
-
-    @include ct-typography('label-large');
-
-    @include ct-breakpoint($ct-table-breakpoint) {
-      padding: ct-spacing(1.5) 0;
-    }
-  }
-
-  &#{$root}--caption-after {
-    caption-side: bottom;
-
-    caption {
-      @include ct-typography('text-small');
-    }
-  }
 }
 
 @mixin ct-table-light() {
@@ -145,6 +152,10 @@
     color: $ct-table-light-caption-color;
   }
 
+  &.ct-table--data {
+    border-top: solid ct-particle(0.125) $ct-table-light-footer-border-color;
+  }
+
   &.ct-table--striped {
     tbody {
       tr:nth-child(odd) {
@@ -208,6 +219,10 @@
     color: $ct-table-dark-caption-color;
   }
 
+  &.ct-table--data {
+    border-top: solid ct-particle(0.125) $ct-table-dark-footer-border-color;
+  }
+
   &.ct-table--striped {
     tbody {
       tr:nth-child(odd) {

components/01-atoms/table/__snapshots__/table.test.js.snap

@@ -14,7 +14,7 @@ exports[`Table Component renders with optional attributes 1`] = `
 
   
   <table
-    class="ct-table ct-theme-dark ct-table--caption-after ct-table--striped custom-class"
+    class="ct-table ct-theme-dark ct-table--caption-after ct-table--striped  custom-class"
     data-test="true"
   >
     
@@ -145,7 +145,7 @@ exports[`Table Component renders with required attributes 1`] = `
 
   
   <table
-    class="ct-table ct-theme-light ct-table--caption-before  "
+    class="ct-table ct-theme-light ct-table--caption-before   "
   >
     
     

components/01-atoms/table/table.js

@@ -20,6 +20,11 @@ CivicThemeTable.prototype.init = function () {
 
   this.addTitles();
 
+  // Check if the table has the class 'ct-table--data'
+  if (this.el.classList.contains('ct-table--data')) {
+    this.addWrapper();
+  }
+
   this.el.setAttribute('data-table', 'true');
 };
 
@@ -32,6 +37,21 @@ CivicThemeTable.prototype.addTitles = function () {
   this.addTheadColumnTitles();
 };
 
+CivicThemeTable.prototype.addWrapper = function () {
+  // Select the target element you want to wrap.
+  const targetElement = this.el;
+  // Create the wrapper element.
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('ct-table--wrapper');
+  // Add attributes to the wrapper
+  wrapper.setAttribute('role', 'region');
+  wrapper.setAttribute('tabindex', '0');
+  // Insert the wrapper before the target element.
+  targetElement.parentNode.insertBefore(wrapper, targetElement);
+  // Move the target element inside the wrapper.
+  wrapper.appendChild(targetElement);
+};
+
 // eslint-disable-next-line func-names
 CivicThemeTable.prototype.addTheadColumnTitles = function () {
   // Determine whether column titles can be added via thead.

components/01-atoms/table/table.scss

@@ -10,4 +10,9 @@
   @include ct-component-theme($root) using($root, $theme) {
     @include ct-table-theme($theme);
   }
+
+  &--wrapper {
+    overflow: auto;
+    max-width: 100vw;
+  }
 }

components/01-atoms/table/table.stories.js

@@ -87,6 +87,7 @@ export const Table = (parentKnobs = {}) => {
     rows: knobBoolean('With rows', true, parentKnobs.with_rows, parentKnobs.knobTab) ? true : null,
     footer: knobBoolean('With footer', true, parentKnobs.with_footer, parentKnobs.knobTab) ? footer : [],
     is_striped: knobBoolean('Striped', true, parentKnobs.is_striped, parentKnobs.knobTab),
+    is_data_table: knobBoolean('Data table', false, parentKnobs.is_data_table, parentKnobs.knobTab),
     caption: knobText('Caption content', 'Table caption Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus.', parentKnobs.caption, parentKnobs.knobTab),
     caption_position: knobRadios(
       'Caption position',

components/01-atoms/table/table.twig

@@ -11,15 +11,17 @@
  * - rows: [array] Array of rows.
  * - footer: [array] Array of footer cells.
  * - is_striped: [boolean] Flag to show as striped.
+ * - is_data_table: [boolean] Flag to show as a data table.
  * - attributes: [string] Additional attributes.
  * - modifier_class: [string] Additional classes.
  */
 #}
 
 {% set striped_class = is_striped ? 'ct-table--%s'|format('striped') : '' %}
+{% set data_table_class = is_data_table ? 'ct-table--%s'|format('data') : '' %}
 {% set caption_position_class = caption_position == 'after' ? 'ct-table--caption-after' : 'ct-table--caption-before' %}
 {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
-{% set modifier_class = '%s %s %s %s'|format(theme_class, caption_position_class, striped_class, modifier_class|default('')) %}
+{% set modifier_class = '%s %s %s %s %s'|format(theme_class, caption_position_class, striped_class, data_table_class, modifier_class|default('')) %}
 
 {% if rows is not empty or header is not empty or footer is not empty or caption is not empty %}
   <table class="ct-table {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>