Fix Datatable header button labels

apps/dashboard/app/javascript/active_jobs.js

@@ -2,8 +2,7 @@
 
 import oboe from 'oboe';
 import { supportPath } from './config.js';
-import { cssBadgeForState, capitalizeFirstLetter } from './utils.js'
-import { ariaNotify } from './utils.js';
+import { cssBadgeForState, capitalizeFirstLetter, ariaNotify, customizeTableHeaders } from './utils.js'
 import { OODAlertError } from './alert.js';
 
 window.fetch_table_data = fetch_table_data;
@@ -186,6 +185,9 @@ function create_datatable(options){
             options.drawCallback(settings);
           }
         },
+        headerCallback: (thead, _data, _start, _end, _display) => {
+          customizeTableHeaders(thead);
+        },
         columns: [
             {
                 "orderable":        false,

apps/dashboard/app/javascript/files/data_table.js

@@ -3,7 +3,7 @@ import { getGlobusLink, updateGlobusLink } from './globus.js';
 import { downloadEnabled } from '../config.js';
 export { CONTENTID, EVENTNAME };
 import { OODAlertError } from '../alert.js';
-import { toHumanSize, ariaNotify } from '../utils.js';
+import { toHumanSize, ariaNotify, customizeTableHeaders } from '../utils.js';
 
 const EVENTNAME = {
     getJsonResponse: 'getJsonResponse',
@@ -204,6 +204,9 @@ class DataTable {
                 // if you need to omit more columns, use a "selectable" class on the columns you want to support selection
                 selector: 'td:not(:first-child)'
             },
+            headerCallback: (thead, _data, _start, _end, _display) => {
+                customizeTableHeaders(thead);
+            },
             layout: {
                 top1Start: {
                     div: {
@@ -303,8 +306,8 @@ class DataTable {
                 $('#select_all').trigger();
             }
 
-        $(`${CONTENTID}_caption`).text(`Contents of directory ${data.path}`);
-        ariaNotify(`navigated to ${data.path}`);
+            $(`${CONTENTID}_caption`).text(`Contents of directory ${data.path}`);
+            ariaNotify(`navigated to ${data.path}`);
             if (data.page_title) {
                 document.title = data.page_title;
             }

apps/dashboard/app/javascript/path_selector/path_selector_data_table.js

@@ -1,5 +1,5 @@
 import { OODAlertError } from '../alert';
-import { ariaNotify, hide, show } from "../utils";
+import { ariaNotify, customizeTableHeaders, hide, show } from "../utils";
 
 export class PathSelectorTable {
   _table = null;
@@ -55,6 +55,9 @@ export class PathSelectorTable {
           // if you need to omit more columns, use a "selectable" class on the columns you want to support selection
           selector: 'td:not(:first-child)'
       },
+      headerCallback: (thead, _data, _start, _end, _display) => {
+        customizeTableHeaders(thead);
+      },
       // https://datatables.net/reference/option/dom
       // dom: '', dataTables_info nowrap
       //

apps/dashboard/app/javascript/utils.js

@@ -150,6 +150,19 @@ export function pushNotify(message, options = {}) {
   }
 }
 
+// rearrange table header labels so button labels are not part of header
+export function customizeTableHeaders(thead) {
+  $(thead).find('th.dt-orderable-asc').each(function(_index, el) {
+    const sortButton = $(el).find('span.dt-column-order');
+    const ariaLabel = sortButton.attr('aria-label');
+    $(el).attr('aria-label', ariaLabel).attr('tabindex', '0');
+    sortButton.removeAttr('aria-label')
+              .removeAttr('tabindex')
+              .removeAttr('role')
+              .attr('aria-hidden', 'true');
+  });
+}
+
 // Store a boolean value in localStorage
 export function storeBoolean(key, value) {
   localStorage.setItem(key, value ? 'true' : 'false');

apps/dashboard/app/views/files/_files_table.html.erb

@@ -5,13 +5,13 @@
     </ol>
 
     <div role="region" aria-label="Directory contents">
-      <span id="select_all_label" class="sr-only">Select All</span>
+      <span id="select_all_label" class="d-none">Select All</span>
       <table class="table table-striped table-condensed w-100" id="directory-contents">
         <caption id="directory-contents_caption" class="sr-only" aria-live='polite'> <%= "Contents of directory #{@path}" %> </caption>
         <thead>
           <tr>
             <th>
-              <input type="checkbox" id="select_all" class="file-select" aria-labelledby="select_all_label"></input>
+              <input type="checkbox" id="select_all" class="file-select" aria-describedby="select_all_label">
               <span class="sr-only">Select</span>
             </th>
             <th>Type</th>