SVGの子供をFF、IEでフォーカス可能にする

Question

私は、ユーザーがSVGでレンダリングされた図形を選択する必要があるhotSpotMatchingページを作成しようとしています。

これをアクセス可能にするために、私はsvgの子供に焦点を合わせるためにタブキーを使用しようとしています。 ReactJSを使用してJSコードを生成しています。

これは私のrenderメソッドです：

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)} /> 
      ) 
     } 
    } 

私が直面しています問題はFF、このプロパティを無視し、うまくクロムが、IEのtabindex = 0作品です。

子供のタグをアンカータグで囲むとうまくいきますが、それも失敗します。

例えば私は

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

を返すようにしようとしたが、これはFFで、私のサークルコンポーネントがフォーカス可能ことはありません。これを達成する方法を教えてください。

ありがとうございました

Answer 1

私はそれを理解することができませんでした。

私は、ボタンを作成し、オフスクリーンにそれらを移動し、私は私のrenderShapeメソッドを呼び出しますが、「形状強調表示」のクラス名となり、それらに焦点を当てて得たときに、このハック修正

を作成しました。これはsvgシェイプのアウトラインを描きます。

これは完璧な修正ではないので、誰かより良い方法があれば教えてください。