fix(table): correct SR table headings, adjust spacing

Author: teenwolfblitzer

packages/sage-assets/lib/stylesheets/components/_table.scss

@@ -38,6 +38,7 @@ $-table-overflow-indicator-gradient: linear-gradient(
 // Responsive stacked table
 $-table-stack-row-padding-block: rem(18px);
 $-table-stack-row-padding-inline: rem(20px);
+$-table-stack-row-margin-block: rem(15); // UXD TODO: confirm size with design
 $-table-stack-cell-max-children: 4;
 
 // Other
@@ -359,6 +360,10 @@ $-table-avatar-width: rem(32px);
 }
 
 @media screen and (max-width: sage-breakpoint(sm-max)) {
+  .sage-table-wrapper__overflow--stack::after {
+    opacity: 0;
+  }
+
   .sage-table--stack {
     thead tr {
       @include visually-hidden;
@@ -376,13 +381,10 @@ $-table-avatar-width: rem(32px);
 
     tbody tr {
       padding: #{$-table-stack-row-padding-block} #{$-table-stack-row-padding-inline};
+      margin-bottom: #{$-table-stack-row-margin-block};
       position: relative;
       border: sage-border(default);
       border-radius: sage-border(radius);
-
-      & + & {
-        margin-top: #{$-table-stack-row-padding-block};
-      }
     }
 
     tbody td {
@@ -411,20 +413,8 @@ $-table-avatar-width: rem(32px);
     }
 
     .sage-table-cell--avatar,
-    .sage-table--has-menu-options td:last-child::before {
+    &.sage-table--has-menu-options td:last-child::before {
       display: none;
     }
   }
 }
-
-@media screen and (min-width: sage-breakpoint(md-min)) {
-  .sage-table td::before {
-    display: none;
-  }
-
-  .sage-table--has-leading-input {
-    tbody td:first-child {
-      width: rem(44px);
-    }
-  }
-}

packages/sage-system/lib/table.js

@@ -49,8 +49,11 @@ Sage.table = (function() {
     tables.forEach(table => {
       const headers = table.querySelectorAll('.sage-table__header');
       const rows = table.querySelectorAll('tbody tr');
+      const tableWrapper = table.parentElement;
       const tableHeadings = [];
 
+      tableWrapper.classList.add("sage-table-wrapper__overflow--stack");
+
       // populate an array with each table's headers
       headers.forEach(header => {
         const label = header.textContent.trim();
@@ -102,6 +105,7 @@ Sage.table = (function() {
 
   function addTableAria() {
     const tableItems = [
+      { items: 'thead th', role: 'columnheader' },
       { items: 'tbody', role: 'rowgroup' },
       { items: 'tbody tr', role: 'row' },
       { items: 'tbody td', role: 'cell' },