search

ValentinH / react-easy-crop

A React component to crop images/videos with easy interactions
https://valentinh.github.io/react-easy-crop/
MIT License
2.34k stars 167 forks source link

Keyboard Support for Crop Area Movement #569

Closed JGuardiola95 closed 7 hours ago

JGuardiola95 commented 1 month ago

Is your feature request related to a problem? Please describe. It is not exactly a problem, but currently the Cropper component lacks built-in keyboard accessibility. This makes it difficult for users who rely on keyboard navigation to adjust the crop area.

Describe the solution you'd like I would like to see built-in support for keyboard interactions within react-easy-crop. Specifically, I’d like users to be able to:

Focus on the crop area using keyboard navigation. Move the crop area incrementally using arrow keys (e.g., by 1px or a customizable amount per key press).

Describe alternatives you've considered I've implemented keyboard accessibility manually using a combination of DOM manipulation and event listeners. This involves adding a tabindex to the crop area and attaching keydown event handlers to adjust the crop position. However, this doesn't feel right, since this doesn't trigger the onCropChange, onInteractionStart, etc functions.

Examples: I haven't dig deeper in https://www.npmjs.com/package/react-image-crop implementation, but they have fully keyboard accessibility.

Thanks for the amazing work you’ve done on this library! :)

ValentinH commented 1 month ago

Thanks for the issue.

I'm open to review a pull request adding keyboard support. I'm wondering what keys should be used to zoom in and out though? What about rotation? Padding seems easy to implement and could be a good first step 👍

JGuardiola95 commented 1 month ago

Just opened a PR that handles the crop area movement for now. Please let me know if there's anything else you'd like me to address. Regarding zoom, we could use something like +/-, and for rotation, perhaps Ctrl + Arrow keys would work well 🤔