Merge pull request #1010 from nwanduka/toolbar-icons-name-change

Added aria-label to toolbar icons
camicroscope · Jul 21, 2024 · 1841845 · 1841845
2 parents 1ba9413 + 6dafdf6
commit 1841845
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/apps/viewer/init.js b/apps/viewer/init.js
@@ -447,6 +447,7 @@ async function initUIcomponents() {
       title: 'Home',
       type: 'btn', // btn/check/dropdown
       value: 'home',
+      ariaLabel: 'Home',
       callback: goHome,
     });
   }
@@ -456,6 +457,7 @@ async function initUIcomponents() {
     icon: 'create', // material icons' name
     title: 'Draw',
     type: 'multistates',
+    ariaLabel: 'Draw',
     callback: draw,
   });
 
@@ -465,6 +467,7 @@ async function initUIcomponents() {
     title: 'Preset Labels',
     type: 'check',
     value: 'prelabels',
+    ariaLabel: 'Preset labels',
     callback: drawLabel,
   });
 
@@ -475,6 +478,7 @@ async function initUIcomponents() {
     title: 'Magnifier',
     type: 'dropdown',
     value: 'magn',
+    ariaLabel: 'Magnifier',
     dropdownList: [
       {
         value: 0.5,
@@ -500,17 +504,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,
@@ -523,6 +530,7 @@ async function initUIcomponents() {
     title: 'Download Selection',
     type: 'check',
     value: 'download',
+    ariaLabel: 'Download selection',
     callback: toggleDownloadSelection,
   });
   // enhance
@@ -532,27 +540,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,
@@ -565,6 +578,7 @@ async function initUIcomponents() {
       title: 'Share View',
       type: 'btn',
       value: 'share',
+      ariaLabel: 'Share',
       callback: shareURL,
     });
   }
@@ -575,6 +589,7 @@ async function initUIcomponents() {
     title: 'Side By Side Viewer',
     value: 'dbviewers',
     type: 'check',
+    ariaLabel: 'Side by side viewer',
     callback: toggleViewerMode,
   });
   // heatmap
@@ -584,6 +599,7 @@ async function initUIcomponents() {
     title: 'Heat Map',
     value: 'heatmap',
     type: 'btn',
+    ariaLabel: 'Heat map',
     callback: openHeatmap,
   });
   subToolsOpt.push({
@@ -592,6 +608,7 @@ async function initUIcomponents() {
     title: 'Labeling',
     value: 'labeling',
     type: 'btn',
+    ariaLabel: 'Labeling',
     callback: function() {
       window.location.href = `../labeling/labeling.html${window.location.search}`;
     },
@@ -602,6 +619,7 @@ async function initUIcomponents() {
     type: 'btn',
     value: 'rect',
     title: 'Segment',
+    ariaLabel: 'Segment',
     callback: function() {
       if (window.location.search.length > 0) {
         window.location.href =
@@ -617,6 +635,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;
@@ -635,6 +654,7 @@ async function initUIcomponents() {
       title: 'Download Marks',
       type: 'btn',
       value: 'download',
+      ariaLabel: 'Download marks',
       callback: Store.prototype.DownloadMarksToFile,
     });
     subToolsOpt.push({
@@ -643,6 +663,7 @@ async function initUIcomponents() {
       title: 'Load Marks',
       type: 'btn',
       value: 'upload',
+      ariaLabel: 'Load marks',
       callback: Store.prototype.LoadMarksFromFile,
     });
   }
@@ -656,6 +677,7 @@ async function initUIcomponents() {
       title: 'has reviewed',
       type: 'btn',
       value: 'review',
+      ariaLabel: 'Has reviewed',
       callback: updateSlideView,
     });
   }
@@ -666,6 +688,7 @@ async function initUIcomponents() {
     title: 'Slide Capture',
     type: 'btn',
     value: 'slCap',
+    ariaLabel: 'Slide capture',
     callback: captureSlide,
   });
   subToolsOpt.push({
@@ -674,6 +697,7 @@ async function initUIcomponents() {
     title: 'Tutorial',
     value: 'tutorial',
     type: 'btn',
+    ariaLabel: 'Tutorial',
     callback: function() {
       tour.init();
       tour.start(true);

diff --git 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',
       },
     ],
   };
@@ -211,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, {
@@ -273,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';
@@ -330,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;
@@ -383,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) {
@@ -510,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) {