@vitessce/vit-s 3.1.1 → 3.1.2

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React$6 from "react";
-import React__default, { Children, isValidElement, cloneElement as cloneElement$1, useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, createContext as createContext$1, createElement, useContext, useMemo, useCallback, useState } from "react";
+import React__default, { Children, isValidElement, cloneElement as cloneElement$1, useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, createContext as createContext$1, createElement, useContext, useMemo, useCallback, useState, useId } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -24493,6 +24493,363 @@ var z = /* @__PURE__ */ Object.freeze({
   quotelessJson,
   ZodError
 });
+function commonjsRequire(path) {
+  throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+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 interpolate(str, args) {
+      return str.replace(/\$(\d{1,2})/g, function(match, index) {
+        return args[index] || "";
+      });
+    }
+    function replace(word, rule) {
+      return word.replace(rule[0], function(match, index) {
+        var result = interpolate(rule[1], arguments);
+        if (match === "") {
+          return restoreCase(word[index - 1], result);
+        }
+        return restoreCase(match, result);
+      });
+    }
+    function sanitizeWord(token, word, rules) {
+      if (!token.length || uncountables.hasOwnProperty(token)) {
+        return word;
+      }
+      var len = rules.length;
+      while (len--) {
+        var rule = rules[len];
+        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, count, inclusive) {
+      var pluralized = count === 1 ? pluralize2.singular(word) : pluralize2.plural(word);
+      return (inclusive ? count + " " : "") + 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 }), {});
 }
@@ -34851,10 +35208,10 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
   CoordinationType$1.EMBEDDING_OBS_OPACITY
 ];
 const note = "This file is autogenerated by .changeset/post-changelog.mjs.";
-const version = "3.1.1";
-const date = "2023-08-02";
+const version = "3.1.2";
+const date = "2023-08-31";
 const branch = "changeset-release/main";
-const hash = "0dbc5e39";
+const hash = "21819ea1";
 const META_VERSION = {
   note,
   version,
@@ -43189,11 +43546,22 @@ const useStyles$3 = makeStyles(() => ({
     position: "absolute",
     width: "100%",
     height: "100%"
+  },
+  visuallyHidden: {
+    position: "absolute",
+    height: "1px",
+    width: "1px",
+    overflow: "hidden",
+    clip: "rect(1px, 1px, 1px, 1px)",
+    whiteSpace: "nowrap"
   }
 }));
 function LoadingIndicator() {
   const classes = useStyles$3();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.loadingIndicatorBackdrop, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.loadingIndicatorContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress$1, {}) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.loadingIndicatorBackdrop, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.loadingIndicatorContainer, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress$1, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.visuallyHidden, children: "Loading..." })
+  ] }) });
 }
 const useStyles$2 = makeStyles(() => ({
   paper: {
@@ -43213,7 +43581,8 @@ function PopperMenu(props) {
     setOpen,
     children: children2,
     buttonClassName,
-    placement = "bottom-end"
+    placement = "bottom-end",
+    "aria-label": ariaLabel
   } = props;
   const classes = useStyles$2();
   const anchorRef = useRef();
@@ -43231,8 +43600,10 @@ function PopperMenu(props) {
       {
         "aria-describedby": id,
         onClick: handleClick,
+        onTouchEnd: handleClick,
         size: "small",
         className: buttonClassName,
+        "aria-label": ariaLabel,
         children: buttonIcon
       }
     ),
@@ -43298,6 +43669,7 @@ function PlotOptions(props) {
       buttonIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsIconWithArrow, { open }),
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
+      "aria-label": "Open plot options menu",
       children: options
     }
   ) : null;
@@ -43320,7 +43692,8 @@ function DownloadOptions(props) {
       buttonIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(CloudDownloadIconWithArrow, { open }),
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
-      children: urls.map(({ url, name }) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem$1, { dense: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Link$1, { underline: "none", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: [
+      "aria-label": "Open download options menu",
+      children: urls.map(({ url, name }) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem$1, { dense: true, getArialLabel: () => `Click to download ${name}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Link$1, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: [
         "Download ",
         name
       ] }) }, `${url}_${name}`))
@@ -43337,6 +43710,7 @@ function ClosePaneButton(props) {
       size: "small",
       className: classes.iconButton,
       title: "close",
+      "aria-label": "Close panel button",
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {})
     }
   );
@@ -43357,10 +43731,10 @@ function TitleInfo(props) {
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
     /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.title, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.titleLeft, children: title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.titleInfo, title: info, children: info }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.titleButtons, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.title, role: "banner", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             PlotOptions,
             {
@@ -43393,6 +43767,8 @@ function TitleInfo(props) {
               [classes.noScrollCard]: !isScroll && !isSpatial
             }
           ),
+          "aria-busy": !isReady,
+          role: "main",
           children: [
             !isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIndicator, {}),
             children2
@@ -43989,7 +44365,8 @@ function OptionSelect(props) {
       classes: {
         root: classes.optionSelectRoot,
         ...classesProp
-      }
+      },
+      "aria-label": "Select an option"
     }
   );
 }
@@ -44000,23 +44377,30 @@ function CellColorEncodingOption(props) {
     setCellColorEncoding
   } = props;
   const classes = useStyles();
+  const cellColorEncodingId = useId();
   const observationsLabelNice = capitalize(observationsLabel);
   function handleColorEncodingChange(event) {
     setCellColorEncoding(event.target.value);
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow$1, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, htmlFor: "cell-color-encoding-select", children: [
-      observationsLabelNice,
-      " Color Encoding"
-    ] }),
-    /* @__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: `cell-color-encoding-select-${cellColorEncodingId}`,
+        children: [
+          observationsLabelNice,
+          " Color Encoding"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       OptionSelect,
       {
         className: classes.select,
         value: cellColorEncoding,
         onChange: handleColorEncodingChange,
         inputProps: {
-          id: "cell-color-encoding-select"
+          id: `cell-color-encoding-select-${cellColorEncodingId}`
         },
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "cellSetSelection", children: "Cell Sets" }),
@@ -44031,7 +44415,15 @@ function OptionsContainer(props) {
     children: children2
   } = props;
   const classes = useStyles();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.box, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableContainer$1, { className: classes.tableContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, { className: classes.table, size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody$1, { children: children2 }) }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { className: classes.box, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableContainer$1, { className: classes.tableContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Table$1,
+    {
+      className: classes.table,
+      size: "small",
+      "aria-label": "Menu of options available for the view",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody$1, { children: children2 })
+    }
+  ) }) });
 }
 export {
   AbstractLoader,

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../src/LoadingIndicator.js"],"names":[],"mappings":"AAuBA,wDASC"}
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../src/LoadingIndicator.js"],"names":[],"mappings":"AA+BA,wDAUC"}

package/dist-tsc/LoadingIndicator.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { makeStyles, CircularProgress } from '@material-ui/core';
 const useStyles = makeStyles(() => ({
@@ -19,8 +19,16 @@ const useStyles = makeStyles(() => ({
         width: '100%',
         height: '100%',
     },
+    visuallyHidden: {
+        position: 'absolute',
+        height: '1px',
+        width: '1px',
+        overflow: 'hidden',
+        clip: 'rect(1px, 1px, 1px, 1px)',
+        whiteSpace: 'nowrap',
+    },
 }));
 export default function LoadingIndicator() {
     const classes = useStyles();
-    return (_jsx("div", { className: classes.loadingIndicatorBackdrop, children: _jsx("div", { className: classes.loadingIndicatorContainer, children: _jsx(CircularProgress, {}) }) }));
+    return (_jsx("div", { className: classes.loadingIndicatorBackdrop, children: _jsxs("div", { className: classes.loadingIndicatorContainer, role: "status", "aria-live": "polite", children: [_jsx(CircularProgress, {}), _jsx("span", { className: classes.visuallyHidden, children: "Loading..." })] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAuHA,mDA+CC"}
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AA0HA,mDAiDC"}

package/dist-tsc/TitleInfo.js

@@ -43,7 +43,7 @@ function PlotOptions(props) {
     const { options } = props;
     const [open, setOpen] = useState(false);
     const classes = useStyles();
-    return (options ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(SettingsIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", children: options })) : null);
+    return (options ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(SettingsIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open plot options menu", children: options })) : null);
 }
 function CloudDownloadIconWithArrow({ open }) {
     return (_jsxs(_Fragment, { children: [_jsx(CloudDownloadIcon, {}), open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }));
@@ -52,23 +52,23 @@ function DownloadOptions(props) {
     const { urls } = props;
     const [open, setOpen] = useState(false);
     const classes = useStyles();
-    return (urls && urls.length ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(CloudDownloadIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", children: urls.map(({ url, name }) => (_jsx(MenuItem, { dense: true, children: _jsxs(Link, { underline: "none", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: ["Download ", name] }) }, `${url}_${name}`))) })) : null);
+    return (urls && urls.length ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(CloudDownloadIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open download options menu", children: urls.map(({ url, name }) => (_jsx(MenuItem, { dense: true, getArialLabel: () => `Click to download ${name}`, children: _jsxs(Link, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: ["Download ", name] }) }, `${url}_${name}`))) })) : null);
 }
 function ClosePaneButton(props) {
     const { removeGridComponent } = props;
     const classes = useStyles();
-    return (_jsx(IconButton, { onClick: removeGridComponent, size: "small", className: classes.iconButton, title: "close", children: _jsx(CloseIcon, {}) }));
+    return (_jsx(IconButton, { onClick: removeGridComponent, size: "small", className: classes.iconButton, title: "close", "aria-label": "Close panel button", children: _jsx(CloseIcon, {}) }));
 }
 export function TitleInfo(props) {
     const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, } = props;
     const classes = useTitleStyles();
     return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleLeft, children: title }), _jsx("div", { className: classes.titleInfo, title: info, children: info }), _jsxs("div", { className: classes.titleButtons, children: [_jsx(PlotOptions, { options: options }), _jsx(DownloadOptions, { urls: urls }), _jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
+    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), _jsx(DownloadOptions, { urls: urls }), _jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
                     [classes.scrollCard]: isScroll,
                     [classes.spatialCard]: isSpatial,
                     [classes.noScrollCard]: !isScroll && !isSpatial,
-                }), children: [!isReady && _jsx(LoadingIndicator, {}), children] })] })
+                }), "aria-busy": !isReady, role: "main", children: [!isReady && _jsx(LoadingIndicator, {}), children] })] })
     // "pl-2" only matters when the window is very narrow.
     );
 }

package/dist-tsc/shared-mui/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AAwBA,oDAwDC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AAwBA,oDA2DC"}

package/dist-tsc/shared-mui/components.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles(() => ({
     },
 }));
 export function PopperMenu(props) {
-    const { buttonIcon, open, setOpen, children, buttonClassName, placement = 'bottom-end', } = props;
+    const { buttonIcon, open, setOpen, children, buttonClassName, placement = 'bottom-end', 'aria-label': ariaLabel, } = props;
     const classes = useStyles();
     const anchorRef = useRef();
     const handleClick = () => {
@@ -25,5 +25,5 @@ export function PopperMenu(props) {
     };
     const id = open ? 'v-popover-menu' : undefined;
     const getTooltipContainer = useVitessceContainer(anchorRef);
-    return (_jsxs("div", { ref: anchorRef, className: classes.container, children: [_jsx(IconButton, { "aria-describedby": id, onClick: handleClick, size: "small", className: buttonClassName, children: buttonIcon }), _jsx(Popper, { id: id, open: open, anchorEl: anchorRef && anchorRef.current, container: getTooltipContainer, onClose: handleClose, placement: placement, transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Fade, { ...TransitionProps, timeout: 100, children: _jsx(Paper, { elevation: 4, className: classes.paper, children: _jsx(MenuList, { children: children }) }) }) })) })] }));
+    return (_jsxs("div", { ref: anchorRef, className: classes.container, children: [_jsx(IconButton, { "aria-describedby": id, onClick: handleClick, onTouchEnd: handleClick, size: "small", className: buttonClassName, "aria-label": ariaLabel, children: buttonIcon }), _jsx(Popper, { id: id, open: open, anchorEl: anchorRef && anchorRef.current, container: getTooltipContainer, onClose: handleClose, placement: placement, transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Fade, { ...TransitionProps, timeout: 100, children: _jsx(Paper, { elevation: 4, className: classes.paper, children: _jsx(MenuList, { children: children }) }) }) })) })] }));
 }

package/dist-tsc/shared-plot-options/CellColorEncodingOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellColorEncodingOption.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/CellColorEncodingOption.js"],"names":[],"mappings":"AAMA,yEAmCC"}
+{"version":3,"file":"CellColorEncodingOption.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/CellColorEncodingOption.js"],"names":[],"mappings":"AAMA,yEAyCC"}

package/dist-tsc/shared-plot-options/CellColorEncodingOption.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useId } from 'react';
 import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';
@@ -7,11 +7,12 @@ import { useStyles } from './styles.js';
 export default function CellColorEncodingOption(props) {
     const { observationsLabel, cellColorEncoding, setCellColorEncoding, } = props;
     const classes = useStyles();
+    const cellColorEncodingId = useId();
     const observationsLabelNice = capitalize(observationsLabel);
     function handleColorEncodingChange(event) {
         setCellColorEncoding(event.target.value);
     }
-    return (_jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-color-encoding-select", children: [observationsLabelNice, " Color Encoding"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellColorEncoding, onChange: handleColorEncodingChange, inputProps: {
-                        id: 'cell-color-encoding-select',
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `cell-color-encoding-select-${cellColorEncodingId}`, children: [observationsLabelNice, " Color Encoding"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: cellColorEncoding, onChange: handleColorEncodingChange, inputProps: {
+                        id: `cell-color-encoding-select-${cellColorEncodingId}`,
                     }, children: [_jsx("option", { value: "cellSetSelection", children: "Cell Sets" }), _jsx("option", { value: "geneSelection", children: "Gene Expression" })] }) })] }));
 }

package/dist-tsc/shared-plot-options/OptionSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionSelect.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionSelect.js"],"names":[],"mappings":"AAIA,8DAcC"}
+{"version":3,"file":"OptionSelect.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionSelect.js"],"names":[],"mappings":"AAIA,8DAeC"}

package/dist-tsc/shared-plot-options/OptionSelect.js

@@ -8,5 +8,5 @@ export default function OptionSelect(props) {
     return (_jsx(Select, { native: true, disableUnderline: true, ...props, classes: {
             root: classes.optionSelectRoot,
             ...classesProp,
-        } }));
+        }, "aria-label": "Select an option" }));
 }

package/dist-tsc/shared-plot-options/OptionsContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsContainer.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionsContainer.js"],"names":[],"mappings":"AAIA,kEAkBC"}
+{"version":3,"file":"OptionsContainer.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionsContainer.js"],"names":[],"mappings":"AAIA,kEAsBC"}

package/dist-tsc/shared-plot-options/OptionsContainer.js

@@ -5,5 +5,5 @@ import { useStyles } from './styles.js';
 export default function OptionsContainer(props) {
     const { children, } = props;
     const classes = useStyles();
-    return (_jsx(Box, { className: classes.box, children: _jsx(TableContainer, { className: classes.tableContainer, children: _jsx(Table, { className: classes.table, size: "small", children: _jsx(TableBody, { children: children }) }) }) }));
+    return (_jsx(Box, { className: classes.box, children: _jsx(TableContainer, { className: classes.tableContainer, children: _jsx(Table, { className: classes.table, size: "small", "aria-label": "Menu of options available for the view", children: _jsx(TableBody, { children: children }) }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -28,10 +28,10 @@
     "react-grid-layout-with-lodash": "^1.3.5",
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
-    "@vitessce/constants-internal": "3.1.1",
-    "@vitessce/plugins": "3.1.1",
-    "@vitessce/schemas": "3.1.1",
-    "@vitessce/utils": "3.1.1"
+    "@vitessce/constants-internal": "3.1.2",
+    "@vitessce/plugins": "3.1.2",
+    "@vitessce/schemas": "3.1.2",
+    "@vitessce/utils": "3.1.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/LoadingIndicator.js

@@ -19,14 +19,23 @@ const useStyles = makeStyles(() => ({
     width: '100%',
     height: '100%',
   },
+  visuallyHidden: {
+    position: 'absolute',
+    height: '1px',
+    width: '1px',
+    overflow: 'hidden',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    whiteSpace: 'nowrap',
+  },
 }));
 
 export default function LoadingIndicator() {
   const classes = useStyles();
   return (
     <div className={classes.loadingIndicatorBackdrop}>
-      <div className={classes.loadingIndicatorContainer}>
+      <div className={classes.loadingIndicatorContainer} role="status" aria-live="polite">
         <CircularProgress />
+        <span className={classes.visuallyHidden}>Loading...</span>
       </div>
     </div>
   );

package/src/TitleInfo.js

@@ -64,6 +64,7 @@ function PlotOptions(props) {
       buttonIcon={<SettingsIconWithArrow open={open} />}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
+      aria-label="Open plot options menu"
     >
       {options}
     </PopperMenu>
@@ -90,10 +91,11 @@ function DownloadOptions(props) {
       buttonIcon={<CloudDownloadIconWithArrow open={open} />}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
+      aria-label="Open download options menu"
     >
       {urls.map(({ url, name }) => (
-        <MenuItem dense key={`${url}_${name}`}>
-          <Link underline="none" href={url} target="_blank" rel="noopener" className={classes.downloadLink}>
+        <MenuItem dense key={`${url}_${name}`} getArialLabel={() => `Click to download ${name}`}>
+          <Link underline="always" href={url} target="_blank" rel="noopener" className={classes.downloadLink}>
             Download {name}
           </Link>
         </MenuItem>
@@ -111,6 +113,7 @@ function ClosePaneButton(props) {
       size="small"
       className={classes.iconButton}
       title="close"
+      aria-label="Close panel button"
     >
       <CloseIcon />
     </IconButton>
@@ -128,14 +131,14 @@ export function TitleInfo(props) {
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
     <>
-      <div className={classes.title}>
-        <div className={classes.titleLeft}>
+      <div className={classes.title} role="banner">
+        <div className={classes.titleLeft} role="heading" aria-level="1">
           {title}
         </div>
-        <div className={classes.titleInfo} title={info}>
+        <div className={classes.titleInfo} title={info} role="note">
           {info}
         </div>
-        <div className={classes.titleButtons}>
+        <div className={classes.titleButtons} role="toolbar" aria-label="Plot options and controls">
           <PlotOptions
             options={options}
           />
@@ -157,6 +160,8 @@ export function TitleInfo(props) {
             [classes.noScrollCard]: !isScroll && !isSpatial,
           },
         )}
+        aria-busy={!isReady}
+        role="main"
       >
         { !isReady && <LoadingIndicator /> }
         {children}

package/src/shared-mui/components.js

@@ -30,6 +30,7 @@ export function PopperMenu(props) {
     children,
     buttonClassName,
     placement = 'bottom-end',
+    'aria-label': ariaLabel,
   } = props;
   const classes = useStyles();
 
@@ -52,8 +53,10 @@ export function PopperMenu(props) {
       <IconButton
         aria-describedby={id}
         onClick={handleClick}
+        onTouchEnd={handleClick}
         size="small"
         className={buttonClassName}
+        aria-label={ariaLabel}
       >
         {buttonIcon}
       </IconButton>

package/src/shared-plot-options/CellColorEncodingOption.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';
@@ -13,6 +13,8 @@ export default function CellColorEncodingOption(props) {
 
   const classes = useStyles();
 
+  const cellColorEncodingId = useId();
+
   const observationsLabelNice = capitalize(observationsLabel);
 
   function handleColorEncodingChange(event) {
@@ -21,16 +23,20 @@ export default function CellColorEncodingOption(props) {
 
   return (
     <TableRow>
-      <TableCell className={classes.labelCell} htmlFor="cell-color-encoding-select">
-        {observationsLabelNice} Color Encoding
+      <TableCell className={classes.labelCell} variant="head" scope="row">
+        <label
+          htmlFor={`cell-color-encoding-select-${cellColorEncodingId}`}
+        >
+          {observationsLabelNice} Color Encoding
+        </label>
       </TableCell>
-      <TableCell className={classes.inputCell}>
+      <TableCell className={classes.inputCell} variant="body">
         <OptionSelect
           className={classes.select}
           value={cellColorEncoding}
           onChange={handleColorEncodingChange}
           inputProps={{
-            id: 'cell-color-encoding-select',
+            id: `cell-color-encoding-select-${cellColorEncodingId}`,
           }}
         >
           <option value="cellSetSelection">Cell Sets</option>

package/src/shared-plot-options/OptionSelect.js

@@ -14,6 +14,7 @@ export default function OptionSelect(props) {
         root: classes.optionSelectRoot,
         ...classesProp,
       }}
+      aria-label="Select an option"
     />
   );
 }

package/src/shared-plot-options/OptionsContainer.js

@@ -12,7 +12,11 @@ export default function OptionsContainer(props) {
   return (
     <Box className={classes.box}>
       <TableContainer className={classes.tableContainer}>
-        <Table className={classes.table} size="small">
+        <Table
+          className={classes.table}
+          size="small"
+          aria-label="Menu of options available for the view"
+        >
           <TableBody>
             {children}
           </TableBody>