Enhance Keyboard Accessibility in Cropper.js

[ChaimTW]

Description:

As per the upcoming WCAG regulations that will be mandatory for all digital products in the European Union starting in 2025, it is essential for our applications to be keyboard accessible to ensure inclusivity for all users, including those with disabilities. However, the current version of Cropper.js lacks keyboard accessibility features.

Requested feature:

1. Tabbable Component: Enable tab navigation into the Cropper.js component for keyboard users, ensuring they can access and interact with its functionalities without relying solely on mouse input.
2. Arrow Key Functionality: Allow users to use arrow keys to navigate and adjust the top, left, bottom, and right boundaries of the cropping area within the Cropper.js component.

Expected outcome:

1. Improved accessibility for users who rely on keyboard navigation.
2. Compliance with WCAG regulations and enhanced inclusivity for all users.

Sources of inspiration:

• The npm package react-image-crop implemented similar functionality in this PR
• For a demo app implementation that meets the WCAG standards you can check this website

Note: I understand the importance of maintaining compatibility and performance while implementing these changes, and I am open to discussing potential implementation strategies or collaborating on this enhancement.

Thank in advance!

[WebMechanic]

I like the demo app implementation. very intuitive !

[fengyuanchen]

Please use Cropper.js v2.0, you can control the cropper selection by keyboard now.

[ChaimTW]

Please use Cropper.js v2.0, you can control the cropper selection by keyboard now.

That is great news @fengyuanchen! Thanks a ton. I will have a look at the 2.0 version soon.