From 99499f305fb4d67c856d6aa63ae039db8b81ec36 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:09:05 +0100 Subject: [PATCH 1/3] added aria-label to toolbar icons --- apps/viewer/init.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/apps/viewer/init.js b/apps/viewer/init.js index 94f89c2b0..cbfa11398 100644 --- a/apps/viewer/init.js +++ b/apps/viewer/init.js @@ -438,6 +438,7 @@ async function initUIcomponents() { title: 'Home', type: 'btn', // btn/check/dropdown value: 'home', + ariaLabel: 'Home', callback: goHome, }); } @@ -447,6 +448,7 @@ async function initUIcomponents() { icon: 'create', // material icons' name title: 'Draw', type: 'multistates', + ariaLabel: 'Draw', callback: draw, }); @@ -456,6 +458,7 @@ async function initUIcomponents() { title: 'Preset Labels', type: 'check', value: 'prelabels', + ariaLabel: 'Preset labels', callback: drawLabel, }); @@ -466,6 +469,7 @@ async function initUIcomponents() { title: 'Magnifier', type: 'dropdown', value: 'magn', + ariaLabel: 'Magnifier', dropdownList: [ { value: 0.5, @@ -491,17 +495,20 @@ async function initUIcomponents() { title: 'Measurement', type: 'dropdown', value: 'measure', + ariaLabel: 'Measurement', dropdownList: [ { value: 'straight', title: 'straight', icon: 'straighten', + ariaLabel: 'straight', checked: true, }, { value: 'coordinate', title: 'coordinate', icon: 'square_foot', + ariaLabel: 'coordinate', }, ], callback: toggleMeasurement, @@ -514,6 +521,7 @@ async function initUIcomponents() { title: 'Download Selection', type: 'check', value: 'download', + ariaLabel: 'Download selection', callback: toggleDownloadSelection, }); // enhance @@ -523,27 +531,32 @@ async function initUIcomponents() { title: 'Enhance', type: 'dropdown', value: 'Enhance', + ariaLabel: 'Enhance', dropdownList: [ { value: 'Histogram Eq', title: 'Histogram Equalization', icon: 'leaderboard', + ariaLabel: 'Histogram equalization', checked: true, }, { value: 'Edge', title: 'Edge', icon: 'show_chart', + ariaLabel: 'Edge', }, { value: 'Sharpen', title: 'Sharpen', icon: 'change_history', + ariaLabel: 'Sharpen', }, { value: 'Custom', title: 'Custom', icon: 'api', + ariaLabel: 'Custom', }, ], callback: enhance, @@ -556,6 +569,7 @@ async function initUIcomponents() { title: 'Share View', type: 'btn', value: 'share', + ariaLabel: 'Share', callback: shareURL, }); } @@ -566,6 +580,7 @@ async function initUIcomponents() { title: 'Side By Side Viewer', value: 'dbviewers', type: 'check', + ariaLabel: 'Side by side viewer', callback: toggleViewerMode, }); // heatmap @@ -575,6 +590,7 @@ async function initUIcomponents() { title: 'Heat Map', value: 'heatmap', type: 'btn', + ariaLabel: 'Heat map', callback: openHeatmap, }); subToolsOpt.push({ @@ -583,6 +599,7 @@ async function initUIcomponents() { title: 'Labeling', value: 'labeling', type: 'btn', + ariaLabel: 'Labeling', callback: function() { window.location.href = `../labeling/labeling.html${window.location.search}`; }, @@ -593,6 +610,7 @@ async function initUIcomponents() { type: 'btn', value: 'rect', title: 'Segment', + ariaLabel: 'Segment', callback: function() { if (window.location.search.length > 0) { window.location.href = @@ -608,6 +626,7 @@ async function initUIcomponents() { type: 'btn', value: 'rect', title: 'Predict', + ariaLabel: 'Predict', callback: function() { if (window.location.search.length > 0) { window.location.href = '../model/model.html' + window.location.search; @@ -626,6 +645,7 @@ async function initUIcomponents() { title: 'Download Marks', type: 'btn', value: 'download', + ariaLabel: 'Download marks', callback: Store.prototype.DownloadMarksToFile, }); subToolsOpt.push({ @@ -634,6 +654,7 @@ async function initUIcomponents() { title: 'Load Marks', type: 'btn', value: 'upload', + ariaLabel: 'Load marks', callback: Store.prototype.LoadMarksFromFile, }); } @@ -647,6 +668,7 @@ async function initUIcomponents() { title: 'has reviewed', type: 'btn', value: 'review', + ariaLabel: 'Has reviewed', callback: updateSlideView, }); } @@ -657,6 +679,7 @@ async function initUIcomponents() { title: 'Slide Capture', type: 'btn', value: 'slCap', + ariaLabel: 'Slide capture', callback: captureSlide, }); subToolsOpt.push({ @@ -665,6 +688,7 @@ async function initUIcomponents() { title: 'Tutorial', value: 'tutorial', type: 'btn', + ariaLabel: 'Tutorial', callback: function() { tour.init(); tour.start(true); From ab77a40fb0f934962ff79d80b22566df4ec80d39 Mon Sep 17 00:00:00 2001 From: Victoria Nduka <122698422+nwanduka@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:56:33 +0100 Subject: [PATCH 2/3] Update toolbar.js --- components/toolbar/toolbar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js index b0b69a891..1820c2e0a 100644 --- a/components/toolbar/toolbar.js +++ b/components/toolbar/toolbar.js @@ -84,12 +84,14 @@ function CaToolbar(options) { title: 'Applications', type: 'check', value: 'apps', + ariaLabel: 'Applications', }, { icon: 'view_list', title: 'Layers', type: 'check', value: 'layers', + ariaLabel: 'Layers', }, ], }; From 6dafdf62178f34384c4819c5cc96a1fb24d4fa36 Mon Sep 17 00:00:00 2001 From: Birm Date: Fri, 19 Jul 2024 11:07:59 -0400 Subject: [PATCH 3/3] render toolbar ariaLabel --- components/toolbar/toolbar.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js index 1820c2e0a..798778eac 100644 --- a/components/toolbar/toolbar.js +++ b/components/toolbar/toolbar.js @@ -213,6 +213,7 @@ CaToolbar.prototype.__createCheck = function(options) { icon.classList.add('material-icons'); icon.classList.add('md-24'); icon.textContent = options.icon; + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.htmlFor = id; if (options.title) { tippy(icon, { @@ -275,6 +276,7 @@ CaToolbar.prototype.__createRadio = function(options) { if (options.icon) { icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.textContent = options.icon; } else { let _fitContent = 'fit-content'; @@ -332,6 +334,7 @@ CaToolbar.prototype.__createMultiStateBtns = function(options) { icon.id = randomId(); // create a timestamp id icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.classList.add(0); icon.dataset.state = 0; icon.textContent = options.icon; @@ -385,6 +388,7 @@ CaToolbar.prototype.__createMultiDropDown = function(options) { const icon = document.createElement('label'); icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.textContent = options.icon; icon.htmlFor = id; if (options.title) { @@ -512,6 +516,7 @@ CaToolbar.prototype.__createDropDown = function(options) { const icon = document.createElement('label'); icon.classList.add('material-icons'); icon.classList.add('md-24'); + if (options.ariaLabel) icon.ariaLabel = options.ariaLabel; icon.textContent = options.icon; icon.htmlFor = id; if (options.title) {