fix: Safari focus when there are no draggables left

[CefBoud]

Description

This PR addresses an accessibility issue that has been observed only with Safari when relying solely on the keyboard.

The problem boils down to losing focus after the last correct drop happens and there are no more draggable items left in the bank.

The focus is "trapped" within .close-feedback-popup-button which loses visibility after it's closed and the focusFirstDraggable , which is subsequently called, tries to shift focus to the first option, which happens to be an invisible item placeholder that is not focusable because it has no tabindex.

Clicking Tab, Shift+Tab, or ESC has no effect in Safari. With Chrome or Firefox, however, the focus is able to leave the hidden button and jump to the first Zone.

This PR adds a check to ensure the presence of draggable items and otherwise defaults focus to the first Zone in focusFirstDraggable.

Testing instructions

1. Launch LMS & CMS in devstack.
2. Connect to your CMS using Safari
3. Create a drag-and-drop problem. There is no need to edit. The default one (triangle) will do.
4. Try to solve the problem correctly using only the keyboard.
5. After dropping the last item and closing the feedback popup, focus should be lost

Please check the following video. I increased the outlines' width for better clarity.

focus_bug_safari.mov

[openedx-webhooks]

Thanks for the pull request, @CefBoud! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[openedx-webhooks]

Thanks for the pull request, @CefBoud! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[Agrendalath]

👍

• I tested this: tested the described scenario in Safari
• I read through the code
• I checked for accessibility issues
• Includes documentation: n/a
• I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository: n/a

[openedx-webhooks]

@CefBoud 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[openedx-webhooks]

@CefBoud 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.