<div class="gmail_quote"><font face="arial,helvetica,sans-serif">Hi everybody, <br clear="all"></font><div><span style="border-collapse:separate;color:rgb(0, 0, 0);font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;font-size:medium"><span style="font-size:small"><div>


<br></div><div>I have implemented the key board accessibility feature for the CropperUI component. For now, it works as follows: </div><div><br></div><div>When the user starts cropping, he is presented with a bounding box inside the canvas. The canvas is tabbable. The user can use tab to select the canvas and then activate it. After activation, the user can use the tab key to switch between different resize handles of the bounding box and then resize them using the keyboard arrow keys. The following screen shots should make it more clear: </div>


<div><br></div><div><img src="cid:ii_131b46c98b6199f8" alt="image.png" title="image.png" width="420" height="235"><br></div><div><img src="cid:ii_131b475d0269785e" alt="image.png" title="image.png" width="420" height="254"><br>


</div><div><br></div><div><br></div><div>The question that arises here is, since the tab key is used for switching between the selection handles (after the canvas is activated), the user can't tab to other components on the screen using keyboard. I haven't been able to decide on which solution would the best for this? Would it be better to have some other key to switch between the selection handles? Or is it better to have a special key (e.g. escape) to shift the focus out of canvas and switch back to original keyboard handlers? </div>

<div><br></div><div>I look forward to hearing suggestions about the keyboard accessibility. I am open to hearing new ideas about additional keyboard shortcuts as well. </div><div><br></div><div>Thanks.</div><div><br></div>

<div> --</div>
Regards<br><font color="#888888"><div style="font-family:arial">Pulkit</div></font></span></span>
</div>
</div><br>