From 64ee5ff6b4be9428cb493811fe6f30912e40b8b1 Mon Sep 17 00:00:00 2001 From: LiNk-NY Date: Tue, 4 Aug 2026 10:09:30 -0400 Subject: [PATCH 1/3] add accessibility navigation in browse mode assisted-by: gemini 3.6 flash assisted-by: claude 5 sonnet medium --- assets/js/bioc_views.js | 35 +++++++++++++++++++++++------- assets/style/components/tables.css | 3 ++- assets/style/pages/packages.css | 12 ++++++++++ 3 files changed, 41 insertions(+), 9 deletions(-) diff --git a/assets/js/bioc_views.js b/assets/js/bioc_views.js index c3238de08..6746f95e9 100644 --- a/assets/js/bioc_views.js +++ b/assets/js/bioc_views.js @@ -38,10 +38,10 @@ var displayPackages = function (packageList, nodeName) { html += "\n" + "" + - "" + - "" + - "" + - "" + + "" + + "" + + "" + + "" + "\n"; var tableData = ""; @@ -80,17 +80,36 @@ var displayPackages = function (packageList, nodeName) { }; jQuery("#packages").html(html); jQuery("#biocViews_package_table").dataTable({ - sScrollX: "100%", aLengthMenu: [ - [-1, 10, 25, 50, 100], - ["All", 10, 25, 50, 100], + [50, 100, 250, -1], + [50, 100, 250, "All"], ], - iDisplayLength: -1, + iDisplayLength: 50, aoColumns: [null, null, null, { sType: "numWithNull" }], aaSorting: [[3, "asc"]], oLanguage: { sSearch: "Search table:", }, + fnDrawCallback: function () { + var table = jQuery("#biocViews_package_table"); + table.find("tbody") + .removeAttr("role") + .removeAttr("aria-live") + .removeAttr("aria-relevant"); + + table.find("th").each(function () { + var th = jQuery(this); + th.removeAttr("tabindex").removeAttr("aria-label"); + + if (th.hasClass("sorting_asc")) { + th.attr("aria-sort", "ascending"); + } else if (th.hasClass("sorting_desc")) { + th.attr("aria-sort", "descending"); + } else if (th.hasClass("sorting")) { + th.attr("aria-sort", "none"); + } + }); + }, }); }; diff --git a/assets/style/components/tables.css b/assets/style/components/tables.css index 250f2c681..3897c95ba 100644 --- a/assets/style/components/tables.css +++ b/assets/style/components/tables.css @@ -14,9 +14,10 @@ table.full-width { width: 100%; } +#biocViews_package_table thead th, .dataTables_scrollHead { background: var(--neutral-n75); - padding-top: 10px; + padding: 0.75rem 0.5rem; } tr:first-of-type *:first-child { diff --git a/assets/style/pages/packages.css b/assets/style/pages/packages.css index 850a6315a..8ad1d4c24 100644 --- a/assets/style/pages/packages.css +++ b/assets/style/pages/packages.css @@ -45,6 +45,18 @@ summary.package-details { border-radius: 0.5rem; } +#biocViews_package_table th button.sort-btn { + background: none; + border: none; + color: inherit; + font: inherit; + padding: 0; + margin: 0; + cursor: pointer; + text-align: inherit; + width: 100%; +} + .packages-subnav { background: linear-gradient(white, white) padding-box, var(--gradient-brand) border-box; From 8d2d8f5a878d20006951b4bb9cf71a661ca4b09a Mon Sep 17 00:00:00 2001 From: LiNk-NY Date: Wed, 5 Aug 2026 09:27:15 -0700 Subject: [PATCH 2/3] remove tabindex for non-interactive static text table assisted-by: claude sonnet 5 medium --- assets/js/bioc_views.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/js/bioc_views.js b/assets/js/bioc_views.js index 6746f95e9..298cc6dc7 100644 --- a/assets/js/bioc_views.js +++ b/assets/js/bioc_views.js @@ -36,7 +36,7 @@ var displayPackages = function (packageList, nodeName) { }; html += - "
PackageMaintainerTitleRank
\n" + + "
\n" + "" + "" + "" + @@ -51,14 +51,14 @@ var displayPackages = function (packageList, nodeName) { var url = getHostUrl() + "/" + map[category] + "/html/" + pkg + ".html"; //tableData += '\n'; tableData += '\n'; - tableData += '\t\n"; + tableData += '\t\n"; var cleanMaintainer = packageInfo[pkg]["Maintainer"].replace( / *<[^>]*>/g, "" ); - tableData += '\t\n"; - tableData += '\t\n"; - tableData += '\t\n"; + tableData += '\t\n"; + tableData += '\t\n"; + tableData += '\t\n"; tableData += "\n"; } html += tableData; From 621e56b7ab0aa934bed4bc1edb4ced457ba71225 Mon Sep 17 00:00:00 2001 From: LiNk-NY Date: Wed, 5 Aug 2026 09:28:07 -0700 Subject: [PATCH 3/3] remove auto added role="grid" attribute assisted-by: claude sonnet 5 medium --- assets/js/bioc_views.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/assets/js/bioc_views.js b/assets/js/bioc_views.js index 298cc6dc7..b6d12b170 100644 --- a/assets/js/bioc_views.js +++ b/assets/js/bioc_views.js @@ -90,8 +90,22 @@ var displayPackages = function (packageList, nodeName) { oLanguage: { sSearch: "Search table:", }, + fnInitComplete: function () { + // DataTables automatically stamps role="grid" onto the wrapper div + // it generates. That conflicts with the role="table"/"row"/ + // "columnheader" semantics already set on the markup above, and + // makes screen readers like Orca treat this as an interactive grid + // widget (expecting arrow-key grid navigation) instead of a normal, + // browsable table. Remove it so native table navigation works. + jQuery("#biocViews_package_table") + .closest(".dataTables_wrapper") + .removeAttr("role"); + }, fnDrawCallback: function () { var table = jQuery("#biocViews_package_table"); + table + .closest(".dataTables_wrapper") + .removeAttr("role"); table.find("tbody") .removeAttr("role") .removeAttr("aria-live")
' + pkg + "' + pkg + "' + cleanMaintainer + "' + packageInfo[pkg]["Title"] + "' + packageInfo[pkg]["Rank"] + "' + cleanMaintainer + "' + packageInfo[pkg]["Title"] + "' + packageInfo[pkg]["Rank"] + "