Crop avatar modal : Functionality is inaccessible for Keyboard & screen reader users.

Issue Summary

On project settings page, the functionality to crop the avatar image is not accessible for keyboard & screen reader users.

Steps to Reproduce

1. Navigate to the System dashboard page.
2. Navigate to "Projects" menu in header section.
3. Activate any project link.
4. Activate the "Project settings" link in the left navigation.
5. Activate the "Details" link in main content area.
6. Activate "Select image" link under Avatar Section.
7. Upload an image for the avatar.

Actual Results

While navigating with Keyboard & screen reader, when user upload an image for avatar, the dialog displays functionality to crop the image. Although the image can be cropped using a mouse but the same can’t be done with the Keyboard. Also the screen reader focus doesn’t go inside the crop dialog.

This makes screen reader & keyboard users difficult to access the image crop functionality effectively.

Expected Results

The image crop functionality should be accessible for Keyboard & screen reader users.

The four corners to crop the image should be coded as interactive <button> elements with a descriptive accessible labels.

The instructions on how to use the crop functionality via Keyboard should be provided on the page. For Example

• Use tab key to navigate to the crop buttons.
• Use arrow keys to move crop area.

Also provide a visually hidden ARAI live region which should announce the current position of the crop area when user moves the position.

Screenshot

Workaround

workaround

Bug Ref: 723205