u

src/components/tiles/BackTile.jsx

@@ -1,7 +1,13 @@
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { Tile } from './Tile';
+import { Tile, tileBaseSx } from './Tile';
 
+/**
+ * BackTile renders as a <div> (Box) instead of <button> (ButtonBase)
+ * so it is not affected by body.tree-dragging button { pointer-events: none }
+ * and can serve as a Droppable dropzone.
+ */
 export class BackTile extends Tile {
   renderIcon() {
     return <ArrowBackIcon color="action" sx={{ fontSize: 36 }} />;
@@ -15,4 +21,31 @@ export class BackTile extends Tile {
       </Typography>
     );
   }
+
+  render() {
+    const { sx, onClick: _onClick, label: _label, ...rest } = this.props;
+    return (
+      <Box
+        component="div"
+        role="button"
+        tabIndex={0}
+        onClick={this.handleClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.handleClick();
+          }
+        }}
+        {...rest}
+        sx={{
+          ...tileBaseSx,
+          position: 'relative',
+          ...sx,
+        }}
+      >
+        {this.renderIcon()}
+        {this.renderLabel()}
+      </Box>
+    );
+  }
 }