random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Garrett Ausfeldt 2020-10-12 13:30:37 -07:00 committed by GitHub
parent 5ffa746adb
commit 88d630fef4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/Tables/Constants.ts
View File

@ -71,6 +71,8 @@ export var htmlSelectors = {
dataTableScrollContainerSelector: ".dataTables_scroll", dataTableScrollContainerSelector: ".dataTables_scroll",
dataTableHeaderTypeSelector: "table thead th", dataTableHeaderTypeSelector: "table thead th",
dataTablePaginationButtonSelector: ".paginate_button", dataTablePaginationButtonSelector: ".paginate_button",
dataTableHeaderTableSelector: "#storageTable_wrapper .dataTables_scrollHeadInner table",
dataTableBodyTableSelector: "#storageTable_wrapper .dataTables_scrollBody table",
searchInputField: ".search-input", searchInputField: ".search-input",
uploadDropdownSelector: "#upload-dropdown", uploadDropdownSelector: "#upload-dropdown",
navigationDropdownSelector: "#navigation-dropdown", navigationDropdownSelector: "#navigation-dropdown",

15
src/Explorer/Tables/DataTable/DataTableBindingManager.ts
View File

@ -143,6 +143,21 @@ function createDataTable(
fnInitComplete: initializeTable, fnInitComplete: initializeTable,
fnDrawCallback: updateSelectionStatus 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) { function bindColumn(data: any, type: string, full: any) {