Question

我正在尝试创建一个hotSpotMatching页面，用户必须选择通过SVG呈现的形状。

为了使这个可访问我试图使用tab键来关注我的svg孩子。我正在使用ReactJS生成我的JS代码。

这是我的渲染方法：

renderShape(shape) {
        let className = (shape.selected ? 'shape-selected' : 'shape-unselected');
        let svgWidth = this.state.width;
        let svgHeight = this.state.height;
        let shapeKeyDownCallback = this.toggleShapeSelection(shape);
        if (shape.hotSpotShapeType === 'CIRCLE') {
            /* CIRCLE */
            let cX = Math.round(shape.point.x * svgWidth);
            let cY = Math.round(shape.point.y * svgHeight);
            let cRadius = Math.round(shape.radius * svgWidth);

            return (
                <circle cx={cX} cy={cY} r={cRadius} className={className} aria-selected={shape.selected} tabIndex="0" onClick={this.toggleShapeSelection(shape)} onKeyDown={this.handleShapeKeyDown(shapeKeyDownCallback)} />
            )

        } else if (shape.hotSpotShapeType === 'RECTANGLE') {
            /* RECTANGLE */
            let rectX = Math.round(shape.upperLeft.x * svgWidth);
            let rectY = Math.round(shape.upperLeft.y * svgHeight);
            let rectWidth = Math.round(shape.lowerRight.x * svgWidth) - Math.round(shape.upperLeft.x * svgWidth);
            let rectHeight = Math.round(shape.lowerRight.y * svgHeight) - Math.round(shape.upperLeft.y * svgHeight);

            return (
                <rect x={rectX} y={rectY} width={rectWidth} height={rectHeight} className={className} aria-selected={shape.selected} tabIndex="0" onClick={this.toggleShapeSelection(shape)} onKeyDown={this.handleShapeKeyDown(shapeKeyDownCallback)} />
            )

        } else if (shape.hotSpotShapeType === 'POLYGON') {
            /* POLYGON */
            let polygonPoints = shape.points.map((point) =>
                Math.round(point.x * svgWidth) + ',' + Math.round(point.y * svgHeight)
            ).join(' ');

            return (
                <polygon points={polygonPoints} className={className} aria-selected={shape.selected} tabIndex="0" onClick={this.toggleShapeSelection(shape)} onKeyDown={this.handleShapeKeyDown(shapeKeyDownCallback)} />
            )
        }
    }

我面临的问题是tabindex = 0在Chrome中运行良好，但IE，FF忽略此属性。

我读到如果我用锚标签包围我的孩子标签它会起作用但是也会失败。

例如我试图返回

<a href="www.example.com" className="svg-link">
  <circle> .... </circle>
</a>

但是这并没有使我的圆圈组件可以在FF中聚焦。请让我知道如何实现这一目标。

由于

Answer 1

经过几天的搜索，我无法理解。

我创建了这个黑客修复

我创建了按钮并将它们移出屏幕，当我专注于它们时，我会调用我的renderShape方法，但是className为'shape-highlighted'。这将只是在svg形状上绘制一个轮廓。

这不是完美的解决办法，所以如果有人有更好的方法，请告诉我。

让SVG儿童专注于FF，IE

1 个答案: