@pie-element/hotspot 11.1.1-next.83 → 11.1.1-next.92

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
@@ -174,6 +175,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 +190,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,8 +104,7 @@ class RectComponent extends React.Component {
       }
     }
 
-    const { hovered } = this.state;
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
       <Group scaleX={scale} scaleY={scale}>
@@ -147,6 +148,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 +166,7 @@ RectComponent.propTypes = {
 RectComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };