From 5c8b9ba0b20710066a7eab9a67d82c9176dbf8eb Mon Sep 17 00:00:00 2001 From: ankurjuneja Date: Fri, 29 May 2026 14:10:21 -0700 Subject: [PATCH 1/2] Fix accessibility issues suggested by WAVE --- .../view/precursorConflictResolutionView.jsp | 8 +++--- webapp/TargetedMS/css/qcTrendPlotReport.css | 1 + webapp/TargetedMS/js/QCTrendPlotPanel.js | 28 +++++++++---------- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp b/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp index 90a66ebdc..da8490867 100644 --- a/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp +++ b/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp @@ -119,12 +119,12 @@ $(document).ready(function () { { row.child.hide(); tr.removeClass('shown'); - $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/plus.gif")%>"); + $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/minus.gif")%>"); } else { row.child.show(); tr.addClass('shown'); - $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/minus.gif")%>"); + $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/plus.gif")%>"); } if(!srcTd.hasClass('content_loaded')) @@ -271,7 +271,7 @@ function toggleCheckboxSelection(element) - "/> + " alt="Expand row details"/> @@ -291,7 +291,7 @@ function toggleCheckboxSelection(element) - "/> + " alt="Expand row details"/> diff --git a/webapp/TargetedMS/css/qcTrendPlotReport.css b/webapp/TargetedMS/css/qcTrendPlotReport.css index b4434fed4..595b33192 100644 --- a/webapp/TargetedMS/css/qcTrendPlotReport.css +++ b/webapp/TargetedMS/css/qcTrendPlotReport.css @@ -70,6 +70,7 @@ font-size: 18px; padding: 0 8px; border: solid #c0c0c0 1px; + background: none; } .qc-paging-prev { border-right-width: 0; diff --git a/webapp/TargetedMS/js/QCTrendPlotPanel.js b/webapp/TargetedMS/js/QCTrendPlotPanel.js index 55ae8f4e2..5aed7c05f 100644 --- a/webapp/TargetedMS/js/QCTrendPlotPanel.js +++ b/webapp/TargetedMS/js/QCTrendPlotPanel.js @@ -1020,8 +1020,8 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { columns: 2, vertical: false, items: [ - { boxLabel: 'per replicate', id: 'x-axis-grouping-replicate', name: 'xAxisGrouping', inputValue: 'replicate', checked: this.groupedX === false }, - { boxLabel: 'per date', id: 'x-axis-grouping-date', name: 'xAxisGrouping', inputValue: 'date', checked: this.groupedX === true } + { boxLabel: 'per replicate', id: 'x-axis-grouping-replicate', name: 'xAxisGrouping', inputValue: 'replicate', checked: this.groupedX === false, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'X-axis grouping: per replicate'}); } } }, + { boxLabel: 'per date', id: 'x-axis-grouping-date', name: 'xAxisGrouping', inputValue: 'date', checked: this.groupedX === true, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'X-axis grouping: per date'}); } } } ], listeners: { scope: this, @@ -1050,8 +1050,8 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { columns: 2, vertical: false, items: [ - { boxLabel: 'per precursor', name: 'showPlots', id: 'plots-per-precursor', inputValue: 'per-precursor', checked: this.singlePlot === false }, - { boxLabel: 'combined', name: 'showPlots', id: 'plots-combined', inputValue: 'combined', checked: this.singlePlot === true } + { boxLabel: 'per precursor', name: 'showPlots', id: 'plots-per-precursor', inputValue: 'per-precursor', checked: this.singlePlot === false, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Plots: per precursor'}); } } }, + { boxLabel: 'combined', name: 'showPlots', id: 'plots-combined', inputValue: 'combined', checked: this.singlePlot === true, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Plots: combined'}); } } } ], listeners: { scope: this, @@ -1081,8 +1081,8 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { columns: 2, vertical: false, items: [ - { boxLabel: 'show', id: 'excluded-replicates-show', name: 'excludedSamples', inputValue: 'show', checked: this.showExcluded === true }, - { boxLabel: 'hide', id: 'excluded-replicates-hide', name: 'excludedSamples', inputValue: 'hide', checked: this.showExcluded === false } + { boxLabel: 'show', id: 'excluded-replicates-show', name: 'excludedSamples', inputValue: 'show', checked: this.showExcluded === true, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Excluded replicates: show'}); } } }, + { boxLabel: 'hide', id: 'excluded-replicates-hide', name: 'excludedSamples', inputValue: 'hide', checked: this.showExcluded === false, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Excluded replicates: hide'}); } } } ], listeners: { scope: this, @@ -1110,8 +1110,8 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { columns: 2, vertical: false, items: [ - { boxLabel: 'show', id: 'excluded-precursors-show', name: 'excludedPrecursors', inputValue: 'show', checked: this.showExcludedPrecursors === true }, - { boxLabel: 'hide', id: 'excluded-precursors-hide', name: 'excludedPrecursors', inputValue: 'hide', checked: this.showExcludedPrecursors === false } + { boxLabel: 'show', id: 'excluded-precursors-show', name: 'excludedPrecursors', inputValue: 'show', checked: this.showExcludedPrecursors === true, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Excluded precursors: show'}); } } }, + { boxLabel: 'hide', id: 'excluded-precursors-hide', name: 'excludedPrecursors', inputValue: 'hide', checked: this.showExcludedPrecursors === false, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Excluded precursors: hide'}); } } } ], listeners: { scope: this, @@ -1144,8 +1144,8 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { columns: 2, vertical: false, items: [ - { boxLabel: 'always show', id: 'reference-guide-set-show', name: 'referenceGuideSets', inputValue: 'show', checked: this.showReferenceGS === true }, - { boxLabel: 'when in date range', id: 'reference-guide-set-hide', name: 'referenceGuideSets', inputValue: 'hide', checked: this.showReferenceGS === false } + { boxLabel: 'always show', id: 'reference-guide-set-show', name: 'referenceGuideSets', inputValue: 'show', checked: this.showReferenceGS === true, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Reference guide sets: always show'}); } } }, + { boxLabel: 'when in date range', id: 'reference-guide-set-hide', name: 'referenceGuideSets', inputValue: 'hide', checked: this.showReferenceGS === false, listeners: { afterrender: function(r) { r.inputEl.set({'aria-label': 'Reference guide sets: when in date range'}); } } } ], listeners: { scope: this, @@ -1283,11 +1283,11 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { getPaginationBtns: function(numOfPrecursors) { var btnHtml = ''; - btnHtml += ''; + btnHtml += ''; - btnHtml += ''; + btnHtml += ''; return btnHtml; }, From ecb1d3afbf3cc01953c2b50737fc21bb531b842f Mon Sep 17 00:00:00 2001 From: ankurjuneja Date: Mon, 1 Jun 2026 09:54:15 -0700 Subject: [PATCH 2/2] code review comment --- .../targetedms/view/precursorConflictResolutionView.jsp | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp b/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp index da8490867..caa2fcb10 100644 --- a/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp +++ b/src/org/labkey/targetedms/view/precursorConflictResolutionView.jsp @@ -119,12 +119,12 @@ $(document).ready(function () { { row.child.hide(); tr.removeClass('shown'); - $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/minus.gif")%>"); + $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/plus.gif")%>").attr('alt', 'Expand row details'); } else { row.child.show(); tr.addClass('shown'); - $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/plus.gif")%>"); + $("." + cls).children('img').attr('src', "<%=getWebappURL("_images/minus.gif")%>").attr('alt', 'Collapse row details'); } if(!srcTd.hasClass('content_loaded')) @@ -271,7 +271,7 @@ function toggleCheckboxSelection(element) - " alt="Expand row details"/> + " alt="Expand row details"/> @@ -291,7 +291,7 @@ function toggleCheckboxSelection(element) - " alt="Expand row details"/> + " alt="Expand row details"/>