diff --git a/apps/dashboard/app/javascript/active_jobs.js b/apps/dashboard/app/javascript/active_jobs.js index f0986864f3..4f7cc980ff 100644 --- a/apps/dashboard/app/javascript/active_jobs.js +++ b/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, diff --git a/apps/dashboard/app/javascript/files/data_table.js b/apps/dashboard/app/javascript/files/data_table.js index dadde2daf4..404be69599 100644 --- a/apps/dashboard/app/javascript/files/data_table.js +++ b/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; } diff --git a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js b/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js index eee7ddb2e6..7719072732 100644 --- a/apps/dashboard/app/javascript/path_selector/path_selector_data_table.js +++ b/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 // diff --git a/apps/dashboard/app/javascript/utils.js b/apps/dashboard/app/javascript/utils.js index 39790781b4..7936b713a2 100644 --- a/apps/dashboard/app/javascript/utils.js +++ b/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'); diff --git a/apps/dashboard/app/views/files/_files_table.html.erb b/apps/dashboard/app/views/files/_files_table.html.erb index 2565ed55a3..0f53051526 100755 --- a/apps/dashboard/app/views/files/_files_table.html.erb +++ b/apps/dashboard/app/views/files/_files_table.html.erb @@ -5,13 +5,13 @@
- Select All + Select All
<%= "Contents of directory #{@path}" %>
- + Select Type