fix: set go to beginning button to hidden

[DanielVZ96]

Description

This PR addresses a few accessibility issues when using the xblock with keyboard and Voice Over controls.

When submitting the problem:

• the go-to-beginning button is still visible for Voice Over controls. This is inconsistent with tab key behaviour, so instead of disabling it, we're setting display: none
• the focus stays in the first draggable item, even though the problem is finished. Instead we're going to focus the feedback paragraph.

Supporting information

Link to other information about the change, such as Jira issues, GitHub issues, or Discourse discussions.
Be sure to check they are publicly readable, or if not, repeat the information here.

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.

(Non-Assessment)

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 on the feedback text bellow.

(Assessment)

4. In studio change the problem to be an assessment
5. Try to solve the problem correctly using only the Voice Over keyboard actions.
6. Assert that after dropping each item the focus moves back to the first draggable item
7. After dropping the last item and closing the feedback popup, focus should be on the submit button bellow.
8. Assert that after submitting the problem, the go-to-beginning button is not read by the screen reader.

Private-ref: https://tasks.opencraft.com/browse/BB-8848

[openedx-webhooks]

Thanks for the pull request, @DanielVZ96! 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, @DanielVZ96! 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.

This is currently a draft pull request. When it is ready for our review and all tests are green, click "Ready for Review", or remove "WIP" from the title, as appropriate.

[itsjeyd]

@DanielVZ96 Thanks for these changes! I'll mark them as ready for review once OpenCraft internal review is done and they're ready for upstream review. Let me know.

[Agrendalath]

@DanielVZ96,

I now re-read the feedback while reviewing the PR with the VO and see the following problems mentioned there:

When I am placing items in drop zones, focus is never automatically moved off any of them, once I'm done with them I can press Tab or use VO-right arrow to navigate to the Submit button.

I believe we should move the focus to the first item in the item bank once the item is placed in a drop zone. If no more items are in the item bank, we should move the focus to the submit button.

If you use VO right on the disabled go-to-beginning button, the cursor moves to the Actions group instead of the next Action

From what I understood, the problem here is the inconsistent behavior between the Tab button and the VO-right arrow. Though moving the focus directly to the action button should be a good improvement.

I think you were right about this one - the VO right should move to the next action to match the behavior of the Tab button.

Regarding the "Go to the beginning" - I think it is still useful, but maybe we could use the display: none when it's unavailable (i.e. when there are no more attempts left in the "Assessment" mode). Also, please note that using hidden makes the button visible in Studio, which does not seem to be intended.

[DanielVZ96]

@Agrendalath

I believe we should move the focus to the first item in the item bank once the item is placed in a drop zone.

This PRs covers it because it only focuses on the feedback text once it's available, and that coincides when there are no more items to add.

If no more items are in the item bank, we should move the focus to the submit button.

The problem with this is that there's no submit button for drag and drop. If the focus is moved to the submit button it may skip any other problems after the drag and drop block.

Regarding the "Go to the beginning" - I think it is still useful, but maybe we could use the display: none when it's unavailable (i.e. when there are no more attempts left in the "Assessment" mode). Also, please note that using hidden makes the button visible in Studio, which does not seem to be intended.

good point. will work on that!

Edit: so.. after reviewing this for a bit I noticed that .hidden applies display: none. so we should fine with that last point

/** Builder **/
.xblock--drag-and-drop--editor .hidden {
    display: none !important;
}

[Agrendalath]

@DanielVZ96,

This PRs covers it because it only focuses on the feedback text once it's available, and that coincides when there are no more items to add.

The problem with this is that there's no submit button for drag and drop. If the focus is moved to the submit button it may skip any other problems after the drag and drop block.

These points are incorrect for the "Assessment" mode. You can enable it in the XBlock settings (the "Edit" button) in Studio.

Edit: so.. after reviewing this for a bit I noticed that .hidden applies display: none. so we should fine with that last point

I'm seeing this in Studio:

I think you were right about this one - the VO right should move to the next action to match the behavior of the Tab button.

A quick reminder about this note.

[Agrendalath]

@itsjeyd, I planned to merge this as a maintainer because this is an a11y fix. Will we need another review round for this?

[itsjeyd]

@Agrendalath Ah no, it should be fine to merge without a second review. Sorry for the confusion.

CC @DanielVZ96

[DanielVZ96]

@Agrendalath I updated the PR with the changes you requested!

[Agrendalath]

I think you were right about this one - the VO right should move to the next action to match the behavior of the Tab button.

A quick reminder about this note.

@DanielVZ96, the VO right still moves the focus to the action wrapper instead of the first action button. This is inconsistent with the Tab behavior.

[DanielVZ96]

@Agrendalath I'm actually not that sure about that one. It's due to the role=group and aria label of the actions wrapper div. I'm thinking that maybe that's there for a reason.

[Agrendalath]

@DanielVZ96,

I'm actually not that sure about that one. It's due to the role=group and aria label of the actions wrapper div. I'm thinking that maybe that's there for a reason.

We added this in #280 to match the HTML nodes in the edx-platform's Problem XBlock. This is no longer the case, so we can remove it.

[DanielVZ96]

@Agrendalath done!

[Agrendalath]

@DanielVZ96, thank you; the changes look good to me. I'll wait for the client's final QA before merging this.

[openedx-webhooks]

@DanielVZ96 🎉 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]

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

[Agrendalath]

@itsjeyd, does the GH bot automatically merge the "ready to merge" PRs even when they don't have official approval (green checkmark)? It's fine in this case, but it would be nice to squash the commits first.

[itsjeyd]

@Agrendalath Good question, I'm not sure if it's supposed to 🤔 After reading your comment above it definitely wasn't my intention to trigger a merge 😅

If you're coming to the maintenance working group meeting later, maybe bring up the question there?