@pie-element/hotspot 11.1.7 → 11.2.0

package/src/hotspot/circle.jsx

@@ -50,6 +50,7 @@ class CircleComponent extends React.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       x,
       y,
       evaluateText,
@@ -88,20 +89,10 @@ class CircleComponent extends React.Component {
       }
     }
 
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale}>
-        {useHoveredStyle && (
-          <Rect
-            x={x - radius}
-            y={y - radius}
-            width={radius * 2}
-            height={radius * 2}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-          />
-        )}
+      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Circle
           radius={radius}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
@@ -110,11 +101,20 @@ class CircleComponent extends React.Component {
           draggable={false}
           stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
           x={x}
           y={y}
         />
+        {useHoveredStyle && (
+          <Rect
+            x={x - radius}
+            y={y - radius}
+            width={radius * 2}
+            height={radius * 2}
+            stroke={hoverOutlineColor}
+            strokeWidth={strokeWidth}
+            listening={false}
+          />
+        )}
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
@@ -128,6 +128,7 @@ CircleComponent.propTypes = {
   isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   isEvaluateMode: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
@@ -145,6 +146,7 @@ CircleComponent.propTypes = {
 CircleComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };

package/src/hotspot/container.jsx

@@ -14,8 +14,19 @@ const BaseContainer = styled('div')(({ theme }) => ({
   background: theme.palette.common.white,
   border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
   width: 'fit-content',
+  maxWidth: '100%',
+  overflowX: 'auto',
 }));
 
+const HiddenFocusable = styled('span')({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+});
+
 const ImageContainer = styled('div')({
   position: 'relative',
   width: 'fit-content',
@@ -34,6 +45,13 @@ const StyledStage = styled(Stage)({
 });
 
 export class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focusedShapeId: null,
+    };
+  }
+
   isSelected(shape) {
     const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];
     return !!selectedShape;
@@ -57,6 +75,44 @@ export class Container extends React.Component {
     return null;
   };
 
+  getAllShapesSorted = () => {
+    const { shapes: { rectangles = [], polygons = [], circles = [] } } = this.props;
+    const allShapes = [
+      ...rectangles.map((s) => ({ ...s, type: 'rectangle' })),
+      ...polygons.map((s) => ({ ...s, type: 'polygon' })),
+      ...circles.map((s) => ({ ...s, type: 'circle' })),
+    ];
+    allShapes.sort((a, b) => String(a.id).localeCompare(String(b.id), undefined, { numeric: true }));
+
+    return allShapes;
+  };
+
+  handleShapeFocus = (shapeId) => {
+    this.setState({ focusedShapeId: shapeId });
+  };
+
+  handleShapeBlur = () => {
+    this.setState({ focusedShapeId: null });
+  };
+
+  handleShapeKeyDown = (e, shapeId) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+
+      const { onSelectChoice, disabled } = this.props;
+
+      if (!disabled) {
+        const shape = this.getAllShapesSorted().find((s) => s.id === shapeId);
+
+        if (shape) {
+          const selected = this.isSelected(shape);
+
+          onSelectChoice({ id: shapeId, selected: !selected, selector: 'Keyboard' });
+        }
+      }
+    }
+  };
+
   render() {
     const {
       dimensions: { width: withProp, height: heightProp },
@@ -74,9 +130,13 @@ export class Container extends React.Component {
       showCorrect,
     } = this.props;
 
+    const { focusedShapeId } = this.state;
+
     const width = withProp * SCALE;
     const height = heightProp * SCALE;
 
+    const sortedShapes = this.getAllShapesSorted();
+
     return (
       <BaseContainer style={{ padding: strokeWidth / 2 }}>
         {imageUrl ? (
@@ -125,6 +185,7 @@ export class Container extends React.Component {
                   strokeWidth={strokeWidth}
                   markAsCorrect={markAsCorrect}
                   showCorrectEnabled={showCorrect}
+                  focused={focusedShapeId === shape.id}
                 />
               );
             })}
@@ -153,6 +214,7 @@ export class Container extends React.Component {
                   selectedHotspotColor={selectedHotspotColor}
                   hoverOutlineColor={hoverOutlineColor}
                   showCorrectEnabled={showCorrect}
+                  focused={focusedShapeId === polygon.id}
                 />
               );
             })}
@@ -183,11 +245,29 @@ export class Container extends React.Component {
                   selectedHotspotColor={selectedHotspotColor}
                   hoverOutlineColor={hoverOutlineColor}
                   showCorrectEnabled={showCorrect}
+                  focused={focusedShapeId === shape.id}
                 />
               );
             })}
           </Layer>
         </StyledStage>
+
+        {sortedShapes.map((shape) => {
+          const selected = this.isSelected(shape);
+
+          return (
+            <HiddenFocusable
+              key={`focus-${shape.id}`}
+              tabIndex={disabled ? -1 : 0}
+              role="button"
+              aria-label={shape.ariaLabel || ''}
+              aria-pressed={selected}
+              onFocus={() => this.handleShapeFocus(shape.id)}
+              onBlur={this.handleShapeBlur}
+              onKeyDown={(e) => this.handleShapeKeyDown(e, shape.id)}
+            />
+          );
+        })}
       </BaseContainer>
     );
   }

package/src/hotspot/polygon.jsx

@@ -68,6 +68,7 @@ class PolygonComponent extends React.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       points,
       evaluateText,
       strokeWidth,
@@ -120,7 +121,7 @@ class PolygonComponent extends React.Component {
         iconSrc = faWrong;
       }
     }
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates
     const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates
@@ -136,31 +137,30 @@ class PolygonComponent extends React.Component {
     const rectHeight = maxY - minY;
 
     return (
-      <Group scaleX={scale} scaleY={scale}>
-        {useHoveredStyle && (
-          <Rect
-            x={rectX}
-            y={rectY}
-            width={rectWidth}
-            height={rectHeight}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-          />
-        )}
+      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         <Line
           points={pointsParsed}
           closed={true}
-          fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}
+          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable={false}
           stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
-          cursor='pointer'
-          position='relative'
+          cursor="pointer"
+          position="relative"
         />
+        {useHoveredStyle && (
+          <Rect
+            x={rectX}
+            y={rectY}
+            width={rectWidth}
+            height={rectHeight}
+            stroke={hoverOutlineColor}
+            strokeWidth={strokeWidth}
+            listening={false}
+          />
+        )}
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
@@ -174,6 +174,7 @@ PolygonComponent.propTypes = {
   isEvaluateMode: PropTypes.bool.isRequired,
   hoverOutlineColor: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   points: PropTypes.array.isRequired,
@@ -188,6 +189,7 @@ PolygonComponent.propTypes = {
 
 PolygonComponent.defaultProps = {
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };

package/src/hotspot/rectangle.jsx

@@ -51,6 +51,7 @@ class RectComponent extends React.Component {
       isEvaluateMode,
       outlineColor,
       selected,
+      focused,
       width,
       x,
       y,
@@ -60,6 +61,7 @@ class RectComponent extends React.Component {
       markAsCorrect,
       showCorrectEnabled,
     } = this.props;
+    const { hovered } = this.state;
 
     const outlineColorParsed = isEvaluateMode
       ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
@@ -102,22 +104,10 @@ class RectComponent extends React.Component {
       }
     }
 
-    const { hovered } = this.state;
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale}>
-        {useHoveredStyle && (
-          <Rect
-            x={x}
-            y={y}
-            width={width}
-            height={height}
-            stroke={selected ? 'transparent' : hoverOutlineColor}
-            strokeWidth={strokeWidth}
-            listening={false}
-          />
-        )}
+      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Rect
           x={x}
           y={y}
@@ -129,10 +119,19 @@ class RectComponent extends React.Component {
           draggable={false}
           stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
           strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
           cursor="pointer"
         />
+        {useHoveredStyle && (
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            stroke={hoverOutlineColor}
+            strokeWidth={strokeWidth}
+            listening={false}
+          />
+        )}
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
@@ -147,6 +146,7 @@ RectComponent.propTypes = {
   isEvaluateMode: PropTypes.bool.isRequired,
   hoverOutlineColor: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   selected: PropTypes.bool.isRequired,
@@ -164,6 +164,7 @@ RectComponent.propTypes = {
 RectComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };