(superset) branch master updated: fix(chart table in dashboard): improve screen reading of table (#26453)

[elizabeth]

This is an automated email from the ASF dual-hosted git repository.

elizabeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 71a950fc80 fix(chart table in dashboard): improve screen reading of 
table (#26453)
71a950fc80 is described below

commit 71a950fc803898393fbe1c0b370aaca438eeb38b
Author: Nico Carlier <133622759+ncar...@users.noreply.github.com>
AuthorDate: Tue Jan 30 08:05:35 2024 +1300

    fix(chart table in dashboard): improve screen reading of table (#26453)
    
    Co-authored-by: Elizabeth Thompson <eschu...@gmail.com>
---
 .../plugin-chart-table/src/DataTable/DataTable.tsx  |  1 +
 .../src/DataTable/hooks/useSticky.tsx               | 21 +++++++++++----------
 .../plugins/plugin-chart-table/src/Styles.tsx       |  7 +++++--
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git 
a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx 
b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
index 6c5123806f..956b066c9a 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, {
   useCallback,
   useRef,
diff --git 
a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
 
b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
index 515370a087..6120e19803 100644
--- 
a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
+++ 
b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
@@ -110,6 +110,7 @@ const fixedTableLayout: CSSProperties = { tableLayout: 
'fixed' };
 /**
  * An HOC for generating sticky header and fixed-height scrollable area
  */
+
 function StickyWrap({
   sticky = {},
   width: maxWidth,
@@ -215,7 +216,8 @@ function StickyWrap({
   let sizerTable: ReactElement | undefined;
   let headerTable: ReactElement | undefined;
   let footerTable: ReactElement | undefined;
-  let bodyTable: ReactElement | undefined;
+  let fullTable: ReactElement | undefined;
+
   if (needSizer) {
     const theadWithRef = React.cloneElement(thead, { ref: theadRef });
     const tfootWithRef = tfoot && React.cloneElement(tfoot, { ref: tfootRef });
@@ -253,6 +255,7 @@ function StickyWrap({
         style={{
           overflow: 'hidden',
         }}
+        aria-hidden="true"
       >
         {React.cloneElement(
           table,
@@ -290,20 +293,18 @@ function StickyWrap({
         scrollFooterRef.current.scrollLeft = e.currentTarget.scrollLeft;
       }
     };
-    bodyTable = (
+
+    fullTable = (
       <div
-        key="body"
+        key="full-table"
         ref={scrollBodyRef}
-        style={{
-          height: bodyHeight,
-          overflow: 'auto',
-        }}
         onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}
       >
         {React.cloneElement(
           table,
           mergeStyleProp(table, fixedTableLayout),
           colgroup,
+          thead,
           tbody,
         )}
       </div>
@@ -315,11 +316,11 @@ function StickyWrap({
       style={{
         width: maxWidth,
         height: sticky.realHeight || maxHeight,
-        overflow: 'hidden',
+        overflow: 'auto',
+        padding: '0',
       }}
     >
-      {headerTable}
-      {bodyTable}
+      {fullTable}
       {footerTable}
       {sizerTable}
     </div>
diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx 
b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index 9219b6f003..e78c953a4a 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -32,10 +32,13 @@ export default styled.div`
     td {
       min-width: 4.3em;
     }
-
     thead > tr > th {
+      position: sticky;
+      top: -1px;
       padding-right: 0;
-      position: relative;
+      z-index: 100;
+      border-bottom: ${theme.gridUnit / 2}px solid
+        ${theme.colors.grayscale.light2};
       background: ${theme.colors.grayscale.light5};
       text-align: left;
     }