@vitessce/scatterplot 3.1.1 → 3.1.2

package/dist/{deflate-9421b4b7.js → deflate-ac65438c.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { B as BaseDecoder } from "./index-e6103460.js";
+import { B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{index-e6103460.js → index-8a1f373a.js}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { useLayoutEffect, useEffect, cloneElement, createElement, forwardRef, useState, useRef, useMemo, useImperativeHandle, Children, isValidElement, PureComponent, useCallback } from "react";
+import React__default, { useLayoutEffect, useEffect, cloneElement, createElement, forwardRef, useState, useRef, useMemo, useImperativeHandle, Children, isValidElement, PureComponent, useId, useCallback } from "react";
 import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 function _mergeNamespaces(n2, m2) {
@@ -104707,16 +104707,16 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-d6fe67be.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-083aa612.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-2ee0835f.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-6ec4deb9.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-d5a25f84.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-9421b4b7.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-014bd601.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-16194edf.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-f11362e1.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-09198c7a.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-ac65438c.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-26db2d36.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-a1ea16ed.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-2075fc27.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset5 = 0;
@@ -115435,6 +115435,360 @@ class BitmaskLayer extends XRLayer {
 }
 BitmaskLayer.layerName = "BitmaskLayer";
 BitmaskLayer.defaultProps = defaultProps$1;
+var pluralize = { exports: {} };
+(function(module2, exports2) {
+  (function(root2, pluralize2) {
+    if (typeof commonjsRequire === "function" && true && true) {
+      module2.exports = pluralize2();
+    } else {
+      root2.pluralize = pluralize2();
+    }
+  })(commonjsGlobal, function() {
+    var pluralRules = [];
+    var singularRules = [];
+    var uncountables = {};
+    var irregularPlurals = {};
+    var irregularSingles = {};
+    function sanitizeRule(rule) {
+      if (typeof rule === "string") {
+        return new RegExp("^" + rule + "$", "i");
+      }
+      return rule;
+    }
+    function restoreCase(word, token) {
+      if (word === token)
+        return token;
+      if (word === word.toLowerCase())
+        return token.toLowerCase();
+      if (word === word.toUpperCase())
+        return token.toUpperCase();
+      if (word[0] === word[0].toUpperCase()) {
+        return token.charAt(0).toUpperCase() + token.substr(1).toLowerCase();
+      }
+      return token.toLowerCase();
+    }
+    function interpolate2(str, args) {
+      return str.replace(/\$(\d{1,2})/g, function(match, index2) {
+        return args[index2] || "";
+      });
+    }
+    function replace(word, rule) {
+      return word.replace(rule[0], function(match, index2) {
+        var result = interpolate2(rule[1], arguments);
+        if (match === "") {
+          return restoreCase(word[index2 - 1], result);
+        }
+        return restoreCase(match, result);
+      });
+    }
+    function sanitizeWord(token, word, rules) {
+      if (!token.length || uncountables.hasOwnProperty(token)) {
+        return word;
+      }
+      var len2 = rules.length;
+      while (len2--) {
+        var rule = rules[len2];
+        if (rule[0].test(word))
+          return replace(word, rule);
+      }
+      return word;
+    }
+    function replaceWord(replaceMap, keepMap, rules) {
+      return function(word) {
+        var token = word.toLowerCase();
+        if (keepMap.hasOwnProperty(token)) {
+          return restoreCase(word, token);
+        }
+        if (replaceMap.hasOwnProperty(token)) {
+          return restoreCase(word, replaceMap[token]);
+        }
+        return sanitizeWord(token, word, rules);
+      };
+    }
+    function checkWord(replaceMap, keepMap, rules, bool) {
+      return function(word) {
+        var token = word.toLowerCase();
+        if (keepMap.hasOwnProperty(token))
+          return true;
+        if (replaceMap.hasOwnProperty(token))
+          return false;
+        return sanitizeWord(token, token, rules) === token;
+      };
+    }
+    function pluralize2(word, count2, inclusive) {
+      var pluralized = count2 === 1 ? pluralize2.singular(word) : pluralize2.plural(word);
+      return (inclusive ? count2 + " " : "") + pluralized;
+    }
+    pluralize2.plural = replaceWord(
+      irregularSingles,
+      irregularPlurals,
+      pluralRules
+    );
+    pluralize2.isPlural = checkWord(
+      irregularSingles,
+      irregularPlurals,
+      pluralRules
+    );
+    pluralize2.singular = replaceWord(
+      irregularPlurals,
+      irregularSingles,
+      singularRules
+    );
+    pluralize2.isSingular = checkWord(
+      irregularPlurals,
+      irregularSingles,
+      singularRules
+    );
+    pluralize2.addPluralRule = function(rule, replacement) {
+      pluralRules.push([sanitizeRule(rule), replacement]);
+    };
+    pluralize2.addSingularRule = function(rule, replacement) {
+      singularRules.push([sanitizeRule(rule), replacement]);
+    };
+    pluralize2.addUncountableRule = function(word) {
+      if (typeof word === "string") {
+        uncountables[word.toLowerCase()] = true;
+        return;
+      }
+      pluralize2.addPluralRule(word, "$0");
+      pluralize2.addSingularRule(word, "$0");
+    };
+    pluralize2.addIrregularRule = function(single, plural) {
+      plural = plural.toLowerCase();
+      single = single.toLowerCase();
+      irregularSingles[single] = plural;
+      irregularPlurals[plural] = single;
+    };
+    [
+      // Pronouns.
+      ["I", "we"],
+      ["me", "us"],
+      ["he", "they"],
+      ["she", "they"],
+      ["them", "them"],
+      ["myself", "ourselves"],
+      ["yourself", "yourselves"],
+      ["itself", "themselves"],
+      ["herself", "themselves"],
+      ["himself", "themselves"],
+      ["themself", "themselves"],
+      ["is", "are"],
+      ["was", "were"],
+      ["has", "have"],
+      ["this", "these"],
+      ["that", "those"],
+      // Words ending in with a consonant and `o`.
+      ["echo", "echoes"],
+      ["dingo", "dingoes"],
+      ["volcano", "volcanoes"],
+      ["tornado", "tornadoes"],
+      ["torpedo", "torpedoes"],
+      // Ends with `us`.
+      ["genus", "genera"],
+      ["viscus", "viscera"],
+      // Ends with `ma`.
+      ["stigma", "stigmata"],
+      ["stoma", "stomata"],
+      ["dogma", "dogmata"],
+      ["lemma", "lemmata"],
+      ["schema", "schemata"],
+      ["anathema", "anathemata"],
+      // Other irregular rules.
+      ["ox", "oxen"],
+      ["axe", "axes"],
+      ["die", "dice"],
+      ["yes", "yeses"],
+      ["foot", "feet"],
+      ["eave", "eaves"],
+      ["goose", "geese"],
+      ["tooth", "teeth"],
+      ["quiz", "quizzes"],
+      ["human", "humans"],
+      ["proof", "proofs"],
+      ["carve", "carves"],
+      ["valve", "valves"],
+      ["looey", "looies"],
+      ["thief", "thieves"],
+      ["groove", "grooves"],
+      ["pickaxe", "pickaxes"],
+      ["passerby", "passersby"]
+    ].forEach(function(rule) {
+      return pluralize2.addIrregularRule(rule[0], rule[1]);
+    });
+    [
+      [/s?$/i, "s"],
+      [/[^\u0000-\u007F]$/i, "$0"],
+      [/([^aeiou]ese)$/i, "$1"],
+      [/(ax|test)is$/i, "$1es"],
+      [/(alias|[^aou]us|t[lm]as|gas|ris)$/i, "$1es"],
+      [/(e[mn]u)s?$/i, "$1s"],
+      [/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, "$1"],
+      [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1i"],
+      [/(alumn|alg|vertebr)(?:a|ae)$/i, "$1ae"],
+      [/(seraph|cherub)(?:im)?$/i, "$1im"],
+      [/(her|at|gr)o$/i, "$1oes"],
+      [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, "$1a"],
+      [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, "$1a"],
+      [/sis$/i, "ses"],
+      [/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, "$1$2ves"],
+      [/([^aeiouy]|qu)y$/i, "$1ies"],
+      [/([^ch][ieo][ln])ey$/i, "$1ies"],
+      [/(x|ch|ss|sh|zz)$/i, "$1es"],
+      [/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, "$1ices"],
+      [/\b((?:tit)?m|l)(?:ice|ouse)$/i, "$1ice"],
+      [/(pe)(?:rson|ople)$/i, "$1ople"],
+      [/(child)(?:ren)?$/i, "$1ren"],
+      [/eaux$/i, "$0"],
+      [/m[ae]n$/i, "men"],
+      ["thou", "you"]
+    ].forEach(function(rule) {
+      return pluralize2.addPluralRule(rule[0], rule[1]);
+    });
+    [
+      [/s$/i, ""],
+      [/(ss)$/i, "$1"],
+      [/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, "$1fe"],
+      [/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, "$1f"],
+      [/ies$/i, "y"],
+      [/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, "$1ie"],
+      [/\b(mon|smil)ies$/i, "$1ey"],
+      [/\b((?:tit)?m|l)ice$/i, "$1ouse"],
+      [/(seraph|cherub)im$/i, "$1"],
+      [/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, "$1"],
+      [/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, "$1sis"],
+      [/(movie|twelve|abuse|e[mn]u)s$/i, "$1"],
+      [/(test)(?:is|es)$/i, "$1is"],
+      [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1us"],
+      [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, "$1um"],
+      [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, "$1on"],
+      [/(alumn|alg|vertebr)ae$/i, "$1a"],
+      [/(cod|mur|sil|vert|ind)ices$/i, "$1ex"],
+      [/(matr|append)ices$/i, "$1ix"],
+      [/(pe)(rson|ople)$/i, "$1rson"],
+      [/(child)ren$/i, "$1"],
+      [/(eau)x?$/i, "$1"],
+      [/men$/i, "man"]
+    ].forEach(function(rule) {
+      return pluralize2.addSingularRule(rule[0], rule[1]);
+    });
+    [
+      // Singular words with no plurals.
+      "adulthood",
+      "advice",
+      "agenda",
+      "aid",
+      "aircraft",
+      "alcohol",
+      "ammo",
+      "analytics",
+      "anime",
+      "athletics",
+      "audio",
+      "bison",
+      "blood",
+      "bream",
+      "buffalo",
+      "butter",
+      "carp",
+      "cash",
+      "chassis",
+      "chess",
+      "clothing",
+      "cod",
+      "commerce",
+      "cooperation",
+      "corps",
+      "debris",
+      "diabetes",
+      "digestion",
+      "elk",
+      "energy",
+      "equipment",
+      "excretion",
+      "expertise",
+      "firmware",
+      "flounder",
+      "fun",
+      "gallows",
+      "garbage",
+      "graffiti",
+      "hardware",
+      "headquarters",
+      "health",
+      "herpes",
+      "highjinks",
+      "homework",
+      "housework",
+      "information",
+      "jeans",
+      "justice",
+      "kudos",
+      "labour",
+      "literature",
+      "machinery",
+      "mackerel",
+      "mail",
+      "media",
+      "mews",
+      "moose",
+      "music",
+      "mud",
+      "manga",
+      "news",
+      "only",
+      "personnel",
+      "pike",
+      "plankton",
+      "pliers",
+      "police",
+      "pollution",
+      "premises",
+      "rain",
+      "research",
+      "rice",
+      "salmon",
+      "scissors",
+      "series",
+      "sewage",
+      "shambles",
+      "shrimp",
+      "software",
+      "species",
+      "staff",
+      "swine",
+      "tennis",
+      "traffic",
+      "transportation",
+      "trout",
+      "tuna",
+      "wealth",
+      "welfare",
+      "whiting",
+      "wildebeest",
+      "wildlife",
+      "you",
+      /pok[eé]mon$/i,
+      // Regexes.
+      /[^aeiou]ese$/i,
+      // "chinese", "japanese"
+      /deer$/i,
+      // "deer", "reindeer"
+      /fish$/i,
+      // "fish", "blowfish", "angelfish"
+      /measles$/i,
+      /o[iu]s$/i,
+      // "carnivorous"
+      /pox$/i,
+      // "chickpox", "smallpox"
+      /sheep$/i
+    ].forEach(pluralize2.addUncountableRule);
+    return pluralize2;
+  });
+})(pluralize);
+var pluralizeExports = pluralize.exports;
+const plur = /* @__PURE__ */ getDefaultExportFromCjs(pluralizeExports);
+plur.addPluralRule("glomerulus", "glomeruli");
+plur.addPluralRule("interstitium", "interstitia");
 function fromEntries(iterable) {
   return [...iterable].reduce((obj, { 0: key, 1: val }) => Object.assign(obj, { [key]: val }), {});
 }
@@ -140635,6 +140989,7 @@ function ToolMenu(props2) {
       {
         alt: "click to recenter",
         onClick: () => onRecenterButtonCLick(),
+        "aria-label": "Recenter scatterplot view",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(CenterFocusStrong, {})
       }
     )
@@ -141407,6 +141762,7 @@ function ScatterplotOptions(props2) {
     geneExpressionColormapRange,
     setGeneExpressionColormapRange
   } = props2;
+  const scatterplotOptionsId = useId();
   const observationsLabelNice = capitalize$1(observationsLabel);
   const classes = usePlotOptionsStyles();
   function handleCellRadiusModeChange(event) {
@@ -141454,47 +141810,74 @@ function ScatterplotOptions(props2) {
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [
-        observationsLabelNice,
-        " Set Labels Visible"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Set Labels Visible"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Checkbox$1,
         {
           className: classes.checkbox,
           checked: cellSetLabelsVisible,
           onChange: handleLabelVisibilityChange,
           name: "scatterplot-option-cell-set-labels",
-          color: "default"
+          color: "default",
+          inputProps: {
+            "aria-label": "Show or hide set labels",
+            id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`
+          }
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Tooltips Visible" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "label",
+        {
+          htmlFor: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`,
+          children: "Tooltips Visible"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Checkbox$1,
         {
           className: classes.checkbox,
           checked: tooltipsVisible,
           onChange: handleTooltipsVisibilityChange,
-          name: "scatterplot-option-toltip-visibility",
-          color: "default"
+          name: "scatterplot-option-tooltip-visibility",
+          color: "default",
+          inputProps: {
+            "aria-label": "Show or hide tooltips",
+            id: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`
+          }
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [
-        observationsLabelNice,
-        " Set Label Size"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-label-size-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Set Label Size"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Slider$1,
         {
-          disabled: !cellSetLabelsVisible,
           classes: { root: classes.slider, valueLabel: classes.sliderValueLabel },
+          disabled: !cellSetLabelsVisible,
           value: cellSetLabelSize,
           onChange: handleLabelSizeChange,
-          "aria-labelledby": "cell-set-label-size-slider",
+          "aria-label": "Scatterplot label size slider",
+          id: `scatterplot-set-label-size-${scatterplotOptionsId}`,
           valueLabelDisplay: "auto",
           step: 1,
           min: 8,
@@ -141503,34 +141886,50 @@ function ScatterplotOptions(props2) {
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [
-        observationsLabelNice,
-        " Set Polygons Visible"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Set Polygons Visible"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Checkbox$1,
         {
           className: classes.checkbox,
           checked: cellSetPolygonsVisible,
           onChange: handlePolygonVisibilityChange,
           name: "scatterplot-option-cell-set-polygons",
-          color: "default"
+          color: "default",
+          inputProps: {
+            "aria-label": "Show or hide polygons",
+            id: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`
+          }
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, htmlFor: "cell-radius-mode-select", children: [
-        observationsLabelNice,
-        " Radius Mode"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Radius Mode"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         OptionSelect,
         {
           className: classes.select,
           value: cellRadiusMode,
           onChange: handleCellRadiusModeChange,
           inputProps: {
-            id: "cell-radius-mode-select"
+            id: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`
           },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }),
@@ -141540,18 +141939,25 @@ function ScatterplotOptions(props2) {
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [
-        observationsLabelNice,
-        " Radius"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Radius Size"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Slider$1,
         {
-          disabled: cellRadiusMode !== "manual",
           classes: { root: classes.slider, valueLabel: classes.sliderValueLabel },
+          disabled: cellRadiusMode !== "manual",
           value: cellRadius,
           onChange: handleRadiusChange,
-          "aria-labelledby": "cell-radius-slider",
+          "aria-label": "Scatterplot radius size slider",
+          id: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`,
           valueLabelDisplay: "auto",
           step: 0.01,
           min: 0.01,
@@ -141560,18 +141966,24 @@ function ScatterplotOptions(props2) {
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, htmlFor: "cell-opacity-mode-select", children: [
-        observationsLabelNice,
-        " Opacity Mode"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Opacity Mode"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         OptionSelect,
         {
           className: classes.select,
           value: cellOpacityMode,
           onChange: handleCellOpacityModeChange,
           inputProps: {
-            id: "cell-opacity-mode-select"
+            id: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`
           },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }),
@@ -141581,18 +141993,25 @@ function ScatterplotOptions(props2) {
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [
-        observationsLabelNice,
-        " Opacity"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: `scatterplot-set-opacity-level-${scatterplotOptionsId}`,
+          children: [
+            observationsLabelNice,
+            " Opacity Level"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Slider$1,
         {
-          disabled: cellOpacityMode !== "manual",
           classes: { root: classes.slider, valueLabel: classes.sliderValueLabel },
+          disabled: cellOpacityMode !== "manual",
           value: cellOpacity,
           onChange: handleOpacityChange,
-          "aria-labelledby": "cell-opacity-slider",
+          "aria-label": "Scatterplot opacity level slider",
+          id: `scatterplot-set-opacity-level-${scatterplotOptionsId}`,
           valueLabelDisplay: "auto",
           step: 0.05,
           min: 0,
@@ -141601,29 +142020,45 @@ function ScatterplotOptions(props2) {
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "label",
+        {
+          htmlFor: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`,
+          children: "Gene Expression Colormap"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         OptionSelect,
         {
           className: classes.select,
           value: geneExpressionColormap,
           onChange: handleGeneExpressionColormapChange,
           inputProps: {
-            id: "gene-expression-colormap-select"
+            id: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`
           },
           children: GLSL_COLORMAPS.map((cmap) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap))
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Gene Expression Colormap Range" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "label",
+        {
+          htmlFor: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`,
+          children: "Gene Expression Colormap Range"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Slider$1,
         {
           classes: { root: classes.slider, valueLabel: classes.sliderValueLabel },
           value: geneExpressionColormapRange,
           onChange: handleColormapRangeChangeDebounced,
-          "aria-labelledby": "gene-expression-colormap-range-slider",
+          getAriaLabel: (index2) => {
+            const labelPrefix = index2 === 0 ? "Low value slider" : "High value slider";
+            return `${labelPrefix} for scatterplot gene expression colormap range`;
+          },
+          id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`,
           valueLabelDisplay: "auto",
           step: 5e-3,
           min: 0,

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A, E, S, a, b, f, e, d, c } from "./index-e6103460.js";
+import { A, E, S, a, b, f, e, d, c } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-d5a25f84.js → jpeg-09198c7a.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e6103460.js";
+import { B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-16194edf.js → lerc-a1ea16ed.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-e6103460.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-083aa612.js → lzw-6ec4deb9.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e6103460.js";
+import { B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-014bd601.js → packbits-26db2d36.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e6103460.js";
+import { B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-d6fe67be.js → raw-2ee0835f.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e6103460.js";
+import { B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-f11362e1.js → webimage-2075fc27.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e6103460.js";
+import { B as BaseDecoder } from "./index-8a1f373a.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist-tsc/ScatterplotOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AASA,oEAmQC"}
+{"version":3,"file":"ScatterplotOptions.d.ts","sourceRoot":"","sources":["../src/ScatterplotOptions.js"],"names":[],"mappings":"AASA,oEAgUC"}

package/dist-tsc/ScatterplotOptions.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
+import React, { useCallback, useId } from 'react';
 import { debounce } from 'lodash-es';
 import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
@@ -7,6 +7,7 @@ import { usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, Option
 import { GLSL_COLORMAPS } from '@vitessce/gl';
 export default function ScatterplotOptions(props) {
     const { children, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, } = props;
+    const scatterplotOptionsId = useId();
     const observationsLabelNice = capitalize(observationsLabel);
     const classes = usePlotOptionsStyles();
     function handleCellRadiusModeChange(event) {
@@ -40,17 +41,29 @@ export default function ScatterplotOptions(props) {
         setGeneExpressionColormapRange(value);
     }
     const handleColormapRangeChangeDebounced = useCallback(debounce(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
-    return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Labels Visible"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Tooltips Visible" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, 
+    return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Labels Visible"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default", inputProps: {
+                                'aria-label': 'Show or hide set labels',
+                                id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`,
+                            } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`, children: "Tooltips Visible" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, 
                             /**
                              * We have to use "checked" here, not "value".
                              * The checkbox state is not persisting with value.
                              * For reference, https://v4.mui.com/api/checkbox/
                              */
-                            checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "scatterplot-option-toltip-visibility", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Label Size"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: !cellSetLabelsVisible, classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-labelledby": "cell-set-label-size-slider", valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Polygons Visible"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-radius-mode-select", children: [observationsLabelNice, " Radius Mode"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
-                                id: 'cell-radius-mode-select',
-                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Radius"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: cellRadiusMode !== 'manual', classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellRadius, onChange: handleRadiusChange, "aria-labelledby": "cell-radius-slider", valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-opacity-mode-select", children: [observationsLabelNice, " Opacity Mode"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
-                                id: 'cell-opacity-mode-select',
-                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Opacity"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: cellOpacityMode !== 'manual', classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellOpacity, onChange: handleOpacityChange, "aria-labelledby": "cell-opacity-slider", valueLabelDisplay: "auto", step: 0.05, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
-                                id: 'gene-expression-colormap-select',
-                            }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] })] }));
+                            checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "scatterplot-option-tooltip-visibility", color: "default", inputProps: {
+                                'aria-label': 'Show or hide tooltips',
+                                id: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`,
+                            } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-label-size-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Label Size"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, disabled: !cellSetLabelsVisible, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-label": "Scatterplot label size slider", id: `scatterplot-set-label-size-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Polygons Visible"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default", inputProps: {
+                                'aria-label': 'Show or hide polygons',
+                                id: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`,
+                            } }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Mode"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
+                                id: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`,
+                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Size"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, disabled: cellRadiusMode !== 'manual', value: cellRadius, onChange: handleRadiusChange, "aria-label": "Scatterplot radius size slider", id: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Mode"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
+                                id: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`,
+                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Level"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, disabled: cellOpacityMode !== 'manual', value: cellOpacity, onChange: handleOpacityChange, "aria-label": "Scatterplot opacity level slider", id: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.05, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`, children: "Gene Expression Colormap" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
+                                id: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`,
+                            }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, children: "Gene Expression Colormap Range" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index) => {
+                                const labelPrefix = index === 0 ? 'Low value slider' : 'High value slider';
+                                return `${labelPrefix} for scatterplot gene expression colormap range`;
+                            }, id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] })] }));
 }

package/dist-tsc/shared-spatial-scatterplot/ToolMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolMenu.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/ToolMenu.js"],"names":[],"mappings":"AAsEA,kDAeC;AAED,oDAeC;AAED,0DAsCC"}
+{"version":3,"file":"ToolMenu.d.ts","sourceRoot":"","sources":["../../src/shared-spatial-scatterplot/ToolMenu.js"],"names":[],"mappings":"AAsEA,kDAeC;AAED,oDAeC;AAED,0DAuCC"}

package/dist-tsc/shared-spatial-scatterplot/ToolMenu.js

@@ -79,5 +79,5 @@ export default function ToolMenu(props) {
     const onRecenterButtonCLick = () => {
         recenterOnClick();
     };
-    return (_jsxs("div", { className: classes.tool, children: [visibleTools.pan && (_jsx(IconTool, { alt: "pointer tool", onClick: () => setActiveTool(null), isActive: activeTool === null, children: _jsx(PointerIconSVG, {}) })), visibleTools.selectLasso ? (_jsx(IconTool, { alt: "select lasso", onClick: () => setActiveTool(SELECTION_TYPE.POLYGON), isActive: activeTool === SELECTION_TYPE.POLYGON, children: _jsx(SelectLassoIconSVG, {}) })) : null, _jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), children: _jsx(CenterFocusStrong, {}) })] }));
+    return (_jsxs("div", { className: classes.tool, children: [visibleTools.pan && (_jsx(IconTool, { alt: "pointer tool", onClick: () => setActiveTool(null), isActive: activeTool === null, children: _jsx(PointerIconSVG, {}) })), visibleTools.selectLasso ? (_jsx(IconTool, { alt: "select lasso", onClick: () => setActiveTool(SELECTION_TYPE.POLYGON), isActive: activeTool === SELECTION_TYPE.POLYGON, children: _jsx(SelectLassoIconSVG, {}) })) : null, _jsx(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: _jsx(CenterFocusStrong, {}) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -22,12 +22,12 @@
     "d3-force": "^2.1.1",
     "d3-quadtree": "^1.0.7",
     "lodash-es": "^4.17.21",
-    "@vitessce/constants-internal": "3.1.1",
-    "@vitessce/gl": "3.1.1",
-    "@vitessce/icons": "3.1.1",
-    "@vitessce/tooltip": "3.1.1",
-    "@vitessce/utils": "3.1.1",
-    "@vitessce/vit-s": "3.1.1"
+    "@vitessce/constants-internal": "3.1.2",
+    "@vitessce/gl": "3.1.2",
+    "@vitessce/icons": "3.1.2",
+    "@vitessce/tooltip": "3.1.2",
+    "@vitessce/utils": "3.1.2",
+    "@vitessce/vit-s": "3.1.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/ScatterplotOptions.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useId } from 'react';
 import { debounce } from 'lodash-es';
 import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
@@ -35,6 +35,8 @@ export default function ScatterplotOptions(props) {
     setGeneExpressionColormapRange,
   } = props;
 
+  const scatterplotOptionsId = useId();
+
   const observationsLabelNice = capitalize(observationsLabel);
 
   const classes = usePlotOptionsStyles();
@@ -92,24 +94,36 @@ export default function ScatterplotOptions(props) {
         setCellColorEncoding={setCellColorEncoding}
       />
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          {observationsLabelNice} Set Labels Visible
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-labels-visible-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Set Labels Visible
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Checkbox
             className={classes.checkbox}
             checked={cellSetLabelsVisible}
             onChange={handleLabelVisibilityChange}
             name="scatterplot-option-cell-set-labels"
             color="default"
+            inputProps={{
+              'aria-label': 'Show or hide set labels',
+              id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`,
+            }}
           />
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          Tooltips Visible
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-tooltips-visible-${scatterplotOptionsId}`}
+          >
+            Tooltips Visible
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Checkbox
             className={classes.checkbox}
               /**
@@ -119,22 +133,31 @@ export default function ScatterplotOptions(props) {
                */
             checked={tooltipsVisible}
             onChange={handleTooltipsVisibilityChange}
-            name="scatterplot-option-toltip-visibility"
+            name="scatterplot-option-tooltip-visibility"
             color="default"
+            inputProps={{
+              'aria-label': 'Show or hide tooltips',
+              id: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`,
+            }}
           />
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          {observationsLabelNice} Set Label Size
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-label-size-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Set Label Size
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Slider
-            disabled={!cellSetLabelsVisible}
             classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            disabled={!cellSetLabelsVisible}
             value={cellSetLabelSize}
             onChange={handleLabelSizeChange}
-            aria-labelledby="cell-set-label-size-slider"
+            aria-label="Scatterplot label size slider"
+            id={`scatterplot-set-label-size-${scatterplotOptionsId}`}
             valueLabelDisplay="auto"
             step={1}
             min={8}
@@ -143,30 +166,42 @@ export default function ScatterplotOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          {observationsLabelNice} Set Polygons Visible
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-polygons-visible-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Set Polygons Visible
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Checkbox
             className={classes.checkbox}
             checked={cellSetPolygonsVisible}
             onChange={handlePolygonVisibilityChange}
             name="scatterplot-option-cell-set-polygons"
             color="default"
+            inputProps={{
+              'aria-label': 'Show or hide polygons',
+              id: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`,
+            }}
           />
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell} htmlFor="cell-radius-mode-select">
-          {observationsLabelNice} Radius Mode
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-radius-mode-select-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Radius Mode
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <OptionSelect
             className={classes.select}
             value={cellRadiusMode}
             onChange={handleCellRadiusModeChange}
             inputProps={{
-              id: 'cell-radius-mode-select',
+              id: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`,
             }}
           >
             <option value="auto">Auto</option>
@@ -175,16 +210,21 @@ export default function ScatterplotOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          {observationsLabelNice} Radius
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-radius-size-select-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Radius Size
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Slider
-            disabled={cellRadiusMode !== 'manual'}
             classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            disabled={cellRadiusMode !== 'manual'}
             value={cellRadius}
             onChange={handleRadiusChange}
-            aria-labelledby="cell-radius-slider"
+            aria-label="Scatterplot radius size slider"
+            id={`scatterplot-set-radius-size-select-${scatterplotOptionsId}`}
             valueLabelDisplay="auto"
             step={0.01}
             min={0.01}
@@ -193,16 +233,20 @@ export default function ScatterplotOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell} htmlFor="cell-opacity-mode-select">
-          {observationsLabelNice} Opacity Mode
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-opacity-mode-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Opacity Mode
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <OptionSelect
             className={classes.select}
             value={cellOpacityMode}
             onChange={handleCellOpacityModeChange}
             inputProps={{
-              id: 'cell-opacity-mode-select',
+              id: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`,
             }}
           >
             <option value="auto">Auto</option>
@@ -211,16 +255,21 @@ export default function ScatterplotOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          {observationsLabelNice} Opacity
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-set-opacity-level-${scatterplotOptionsId}`}
+          >
+            {observationsLabelNice} Opacity Level
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Slider
-            disabled={cellOpacityMode !== 'manual'}
             classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
+            disabled={cellOpacityMode !== 'manual'}
             value={cellOpacity}
             onChange={handleOpacityChange}
-            aria-labelledby="cell-opacity-slider"
+            aria-label="Scatterplot opacity level slider"
+            id={`scatterplot-set-opacity-level-${scatterplotOptionsId}`}
             valueLabelDisplay="auto"
             step={0.05}
             min={0.0}
@@ -229,16 +278,20 @@ export default function ScatterplotOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell} htmlFor="gene-expression-colormap-select">
-          Gene Expression Colormap
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-gene-expression-colormap-${scatterplotOptionsId}`}
+          >
+            Gene Expression Colormap
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <OptionSelect
             className={classes.select}
             value={geneExpressionColormap}
             onChange={handleGeneExpressionColormapChange}
             inputProps={{
-              id: 'gene-expression-colormap-select',
+              id: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`,
             }}
           >
             {GLSL_COLORMAPS.map(cmap => (
@@ -248,15 +301,23 @@ export default function ScatterplotOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          Gene Expression Colormap Range
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`}
+          >
+            Gene Expression Colormap Range
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <Slider
             classes={{ root: classes.slider, valueLabel: classes.sliderValueLabel }}
             value={geneExpressionColormapRange}
             onChange={handleColormapRangeChangeDebounced}
-            aria-labelledby="gene-expression-colormap-range-slider"
+            getAriaLabel={(index) => {
+              const labelPrefix = index === 0 ? 'Low value slider' : 'High value slider';
+              return `${labelPrefix} for scatterplot gene expression colormap range`;
+            }}
+            id={`scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`}
             valueLabelDisplay="auto"
             step={0.005}
             min={0.0}

package/src/shared-spatial-scatterplot/ToolMenu.js

@@ -136,6 +136,7 @@ export default function ToolMenu(props) {
       <IconButton
         alt="click to recenter"
         onClick={() => onRecenterButtonCLick()}
+        aria-label="Recenter scatterplot view"
       ><CenterFocusStrong />
       </IconButton>
     </div>