vitessce · ivababukova · Aug 24, 2023 · Jun 30, 2023 · Jun 30, 2023 · Jun 30, 2023
diff --git a/.changeset/wicked-mugs-end.md b/.changeset/wicked-mugs-end.md
@@ -0,0 +1,14 @@
+---
+"@vitessce/scatterplot-embedding": patch
+"@vitessce/scatterplot-gating": patch
+"@vitessce/statistical-plots": patch
+"@vitessce/layer-controller": patch
+"@vitessce/feature-list": patch
+"@vitessce/scatterplot": patch
+"@vitessce/heatmap": patch
+"@vitessce/spatial": patch
+"@vitessce/tooltip": patch
+"@vitessce/vit-s": patch
+---
+
+Improved accessibility of React components
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -46,6 +46,10 @@ rules:
   import/no-duplicates: [2]
   import/extensions: [0] # Using require-extensions instead.
   import/prefer-default-export: [0]
+  jsx-a11y/label-has-associated-control: [ 2, {
+    "depth": 2,
+  }]
+  jsx-a11y/label-has-for: off # This rule is deprecated: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-for.md
 overrides:
   - files: 'sites/docs/src/{pages,theme}/**'
     rules:

diff --git a/packages/view-types/feature-list/src/FeatureListOptions.js b/packages/view-types/feature-list/src/FeatureListOptions.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { OptionsContainer, OptionSelect, usePlotOptionsStyles } from '@vitessce/vit-s';
 import { TableCell, TableRow, Checkbox } from '@material-ui/core';
 import { FEATURELIST_SORT_OPTIONS, ALT_COLNAME } from './constants.js';
@@ -17,6 +17,8 @@ export default function FeatureListOptions(props) {
     primaryColumnName,
   } = props;
 
+  const featureListId = useId();
+
   function handleFeatureListSortChange(event) {
     setFeatureListSort(event.target.value);
   }
@@ -35,16 +37,16 @@ export default function FeatureListOptions(props) {
     <OptionsContainer>
       {children}
       <TableRow>
-        <TableCell className={classes.labelCell} htmlFor="feature-list-sort-option-select">
-          Sort Ordering
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label htmlFor={`feature-list-sort-option-${featureListId}`}>Sort Ordering</label>
         </TableCell>
-        <TableCell>
+        <TableCell variant="body">
           <OptionSelect
             className={classes.select}
             value={featureListSort}
             onChange={handleFeatureListSortChange}
             inputProps={{
-              id: 'feature-list-sort-option-select',
+              id: `feature-list-sort-option-${featureListId}`,
             }}
           >
             {FEATURELIST_SORT_OPTIONS.map(option => (
@@ -56,17 +58,18 @@ export default function FeatureListOptions(props) {
       {hasFeatureLabels ? (
         <>
           <TableRow>
-            <TableCell className={classes.labelCell} htmlFor="feature-list-sort-key-select">
-              Sort Key
+            <TableCell className={classes.labelCell} variant="head" scope="row">
+              <label htmlFor={`feature-list-sort-key-${featureListId}`}>Sort Key</label>
             </TableCell>
-            <TableCell>
+            <TableCell variant="body">
               <OptionSelect
                 className={classes.select}
                 disabled={featureListSort === 'original'}
                 value={featureListSortKey}
                 onChange={handleFeatureListSortKeyChange}
                 inputProps={{
-                  id: 'feature-list-sort-key-select',
+                  'aria-label': 'Select the feature list sort key',
+                  id: `feature-list-sort-key-${featureListId}`,
                 }}
               >
                 {hasFeatureLabels ? (
@@ -81,16 +84,20 @@ export default function FeatureListOptions(props) {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell className={classes.labelCell}>
-              Show Alternate IDs
+            <TableCell className={classes.labelCell} variant="head" scope="row">
+              <label htmlFor={`feature-list-show-alternative-ids-${featureListId}`}>Show Alternate IDs</label>
             </TableCell>
-            <TableCell className={classes.inputCell}>
+            <TableCell className={classes.inputCell} variant="body">
               <Checkbox
                 className={classes.tableCheckbox}
                 checked={showFeatureTable}
                 onChange={handleShowTableChange}
                 name="feature-list-show-table"
                 color="default"
+                inputProps={{
+                  'aria-label': 'Show or hide alternative feature ids',
+                  id: `feature-list-show-alternative-ids-${featureListId}`,
+                }}
               />
             </TableCell>
           </TableRow>

diff --git a/packages/view-types/heatmap/src/HeatmapOptions.js b/packages/view-types/heatmap/src/HeatmapOptions.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 { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
@@ -15,6 +15,7 @@ export default function HeatmapOptions(props) {
   } = props;
 
   const classes = usePlotOptionsStyles();
+  const heatmapOptionsId = useId();
 
   function handleGeneExpressionColormapChange(event) {
     setGeneExpressionColormap(event.target.value);
@@ -35,16 +36,17 @@ export default function HeatmapOptions(props) {
   return (
     <OptionsContainer>
       <TableRow>
-        <TableCell className={classes.labelCell} htmlFor="gene-expression-colormap-select">
-          Gene Expression Colormap
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label htmlFor={`heatmap-gene-expression-colormap-${heatmapOptionsId}`}>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',
+              'aria-label': 'Select gene expression colormap',
+              id: `heatmap-gene-expression-colormap-${heatmapOptionsId}`,
             }}
           >
             {GLSL_COLORMAPS.map(cmap => (
@@ -54,34 +56,47 @@ export default function HeatmapOptions(props) {
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          Tooltips Visible
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`heatmap-gene-expression-colormap-tooltip-visibility-${heatmapOptionsId}`}
+          >
+            Tooltips Visible
+          </label>
         </TableCell>
-        <TableCell className={classes.inputCell}>
+        <TableCell className={classes.inputCell} variant="body">
           <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/
-               */
+            /**
+             * 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="gene-expression-colormap-option-toltip-visibility"
+            name="heatmap-gene-expression-colormap-tooltip-visibility"
             color="default"
+            inputProps={{
+              'aria-label': 'Show or hide tooltips',
+              id: `heatmap-gene-expression-colormap-tooltip-visibility-${heatmapOptionsId}`,
+            }}
           />
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell className={classes.labelCell}>
-          Gene Expression Colormap Range
+        <TableCell className={classes.labelCell} variant="head" scope="row">
+          <label
+            htmlFor={`heatmap-gene-expression-colormap-range-${heatmapOptionsId}`}
+          >
+            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 => (index === 0 ? 'Low value colormap range slider' : 'High value colormap range slider')}
+            id={`heatmap-gene-expression-colormap-range-${heatmapOptionsId}`}
             valueLabelDisplay="auto"
             step={0.005}
             min={0.0}

diff --git a/packages/view-types/layer-controller/src/BitmaskChannelController.js b/packages/view-types/layer-controller/src/BitmaskChannelController.js
@@ -51,7 +51,11 @@ function BitmaskChannelController({
         />
       </Grid>
       <Grid item xs={1}>
-        <IconButton onClick={handleChannelRemove} style={{ padding: '6px 6px 6px 0px' }}>
+        <IconButton
+          onClick={handleChannelRemove}
+          style={{ padding: '6px 6px 6px 0px' }}
+          aria-label="Remove channel"
+        >
           <RemoveCircleIcon />
         </IconButton>
       </Grid>

diff --git a/packages/view-types/layer-controller/src/ChannelOptions.js b/packages/view-types/layer-controller/src/ChannelOptions.js
@@ -44,14 +44,25 @@ function ChannelOptions({ handlePropertyChange, handleChannelRemove, handleIQRUp
       setOpen={setOpen}
       buttonIcon={<MoreVertIcon fontSize="small" />}
       buttonClassName={classes.menuButton}
+      aria-label="Open channel options menu"
     >
-      <MenuItem dense disableGutters onClick={handleRemove}>
+      <MenuItem dense disableGutters onClick={handleRemove} aria-label="Click to remove channel">
         <MuiSpan>Remove</MuiSpan>
       </MenuItem>
-      <MenuItem dense disableGutters onClick={handleIQRUpdate}>
+      <MenuItem
+        dense
+        disableGutters
+        onClick={handleIQRUpdate}
+        aria-label="Click to use IQR for channel"
+      >
         <MuiSpan>Use IQR</MuiSpan>
       </MenuItem>
-      <MenuItem dense disableGutters className={classes.colors}>
+      <MenuItem
+        dense
+        disableGutters
+        className={classes.colors}
+        aria-label="Click to select color for channel"
+      >
         <ColorPalette handleChange={handleColorSelect} />
       </MenuItem>
     </PopperMenu>

diff --git a/packages/view-types/layer-controller/src/ColorPalette.js b/packages/view-types/layer-controller/src/ColorPalette.js
@@ -27,12 +27,13 @@ const useStyles = makeStyles(theme => ({
 const ColorPalette = ({ handleChange }) => {
   const classes = useStyles();
   return (
-    <div className={classes.paletteContainer} aria-label="color-swatch">
+    <div className={classes.paletteContainer} aria-label="Color swatch">
       {VIEWER_PALETTE.map(color => (
         <IconButton
           className={classes.button}
           key={color}
           onClick={() => handleChange(color)}
+          aria-label={`Change color to ${color}`}
         >
           <LensIcon
             fontSize="small"

diff --git a/packages/view-types/layer-controller/src/ImageAddButton.js b/packages/view-types/layer-controller/src/ImageAddButton.js
@@ -37,6 +37,7 @@ function ImageAddButton({ imageOptions, handleImageAdd }) {
       buttonIcon={<ImageAddIcon />}
       buttonClassName={classes.addButton}
       placement="bottom-start"
+      aria-label="Add image menu"
     >
       {imageOptions.map((imgData, i) => (
         <MenuItem dense key={imgData.name} onClick={() => handleAdd(i)}>

diff --git a/packages/view-types/layer-controller/src/LayerController.js b/packages/view-types/layer-controller/src/LayerController.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useId } from 'react';
 import { viv } from '@vitessce/gl';
 import {
   GLOBAL_LABELS, getSourceFromLoader, isRgb,
@@ -127,6 +127,7 @@ export default function LayerController(props) {
     return undefined;
   }, [channels]);
 
+  const layerControlsId = useId();
   const firstSelection = channels[0]?.selection || {};
 
   const { data, channels: channelOptions } = loader;
@@ -476,6 +477,7 @@ export default function LayerController(props) {
       }
       TransitionProps={{ enter: false }}
       expanded={!disabled && isExpanded}
+      id={`layer-controls-accordion-${layerControlsId}`}
     >
       <AccordionSummary
         classes={{
@@ -486,10 +488,12 @@ export default function LayerController(props) {
         }}
         expandIcon={<ExpandMoreIcon role="presentation" />}
         aria-controls={`layer-${name}-controls`}
+        aria-expanded={isExpanded}
       >
         <Grid container direction="column" m={1} justifyContent="center">
           <Grid item classes={{ item: overflowEllipsisGridClasses.item }}>
             <Button
+              aria-label="Toggle layer visibility"
               onClick={(e) => {
                 if (!disabled) {
                   // Needed to prevent affecting the expansion panel from changing
@@ -530,7 +534,7 @@ export default function LayerController(props) {
                   value={opacity}
                   onChange={(e, v) => setOpacity(v)}
                   valueLabelDisplay="auto"
-                  getAriaLabel={() => 'opacity slider'}
+                  aria-label={`Adjust opacity for layer ${name}`}
                   min={0}
                   max={1}
                   step={0.01}
@@ -541,17 +545,21 @@ export default function LayerController(props) {
           )}
         </Grid>
       </AccordionSummary>
-      <AccordionDetails classes={{ root: accordionClasses.accordionDetailsRoot }}>
+      <AccordionDetails
+        classes={{ root: accordionClasses.accordionDetailsRoot }}
+        id={`layer-${name}-controls`}
+      >
         {useVolumeTabs ? (
           <>
             <Tabs
               value={tab}
               onChange={handleTabChange}
-              aria-label="simple tabs example"
+              aria-label="Change the layer tab type"
               style={{ height: '24px', minHeight: '24px' }}
             >
               <Tab
                 label="Channels"
+                aria-label="Channels tab"
                 style={{
                   fontSize: '.75rem',
                   bottom: 12,
@@ -562,6 +570,7 @@ export default function LayerController(props) {
               />
               <Tab
                 label="Volume"
+                aria-label="Volume tab"
                 style={{
                   fontSize: '.75rem',
                   bottom: 12,