From 88d630fef466c7e4c2f00ff353f3d04c050af575 Mon Sep 17 00:00:00 2001
From: Garrett Ausfeldt <ausfeldt@gmail.com>
Date: Mon, 12 Oct 2020 13:30:37 -0700
Subject: [PATCH] Add summary to each table of the DataTable for narrator
 context (#238)

The DataTable control creates 3 tables in the DOM, one for the header, one for the body and one for the footer. Because of this when navigating through the tablem it says "leaving table", when it is really the same table. It seems this is not the default and because of the option **dom: "RZlfrtip"**, the DataTable is created this way.

If I remove that setting, it will only create one table, BUT other things break, because there is a lot of custom DOM manipulation assuming the DOM was the way it was before (gross). This make me question if we wanted this on purpose to maybe solve a cross browser scrolling issue.

Instead I decided to leave it as is, until migrating to Microsoft's Fluent UI is prioritized. However I did add a summary attribute to each table, so that when listening to the narrator, it make more sense when leaving one part of the table into another part of the table. While not optimal, it should at least satisfy accessibility concern of it being confusing.
---
 src/Explorer/Tables/Constants.ts                  |  2 ++
 .../Tables/DataTable/DataTableBindingManager.ts   | 15 +++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/Explorer/Tables/Constants.ts b/src/Explorer/Tables/Constants.ts
index a8e65e7cf..919059d12 100644
--- a/src/Explorer/Tables/Constants.ts
+++ b/src/Explorer/Tables/Constants.ts
@@ -71,6 +71,8 @@ export var htmlSelectors = {
   dataTableScrollContainerSelector: ".dataTables_scroll",
   dataTableHeaderTypeSelector: "table thead th",
   dataTablePaginationButtonSelector: ".paginate_button",
+  dataTableHeaderTableSelector: "#storageTable_wrapper .dataTables_scrollHeadInner table",
+  dataTableBodyTableSelector: "#storageTable_wrapper .dataTables_scrollBody table",
   searchInputField: ".search-input",
   uploadDropdownSelector: "#upload-dropdown",
   navigationDropdownSelector: "#navigation-dropdown",
diff --git a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts b/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
index ecbd4dc32..b70251767 100644
--- a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
+++ b/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -143,6 +143,21 @@ function createDataTable(
     fnInitComplete: initializeTable,
     fnDrawCallback: updateSelectionStatus
   });
+
+  (tableEntityListViewModel.table.table(0).container() as Element)
+    .querySelectorAll(Constants.htmlSelectors.dataTableHeaderTableSelector)
+    .forEach(table => {
+      table.setAttribute(
+        "summary",
+        `Header for sorting results for container ${tableEntityListViewModel.queryTablesTab.collection.id()}`
+      );
+    });
+
+  (tableEntityListViewModel.table.table(0).container() as Element)
+    .querySelectorAll(Constants.htmlSelectors.dataTableBodyTableSelector)
+    .forEach(table => {
+      table.setAttribute("summary", `Results for container ${tableEntityListViewModel.queryTablesTab.collection.id()}`);
+    });
 }
 
 function bindColumn(data: any, type: string, full: any) {