Make submission reorder buttons keyboard accessible

[AndreaBarbasso]

References

• Fixes [Deque Analysis] Reorder buttons in Submission forms are not keyboard accessible (Critical Issue) #1271

Description

Added keyboard controls for drag and drop functionality on submission forms. The functionality follows the indications found here.

Instructions for Reviewers

This PR can be tested by going in any submission form with repeatable fields.
Tabbing until the first drag element, an Aria assertive message is added to the live region, giving the user some instructions on how to reorder elements.
Elements can be reordered by pressing spacebar (activating the "drag" action), moving the item with the arrow keys, and then dropping the item again with the spacebar.
The Aria assertive message is always updated with info on the element being dragged and its current position.

List of changes in this PR:

• Added keyboard controls to drag and drop elements;
• Added Aria messages to the Live region.

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using npm run lint
• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• My PR aligns with Accessibility guidelines if it makes changes to the user interface.
• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[github-actions]

Hi @AndreaBarbasso,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[tdonohue]

@AndreaBarbasso : Could you resolve the merge conflict in this PR, so that we might consider this for inclusion in 8.1 / 7.6.3? Thanks

[AndreaBarbasso]

@tdonohue, conflicts have been resolved!

[artlowel]

Thanks @AndreaBarbasso!

The code looks good, although you are missing some tests according to the coverage check

It works well for the most part. However, if you press escape after selecting something and moving it, I'd expect the selected row to jump back to the place it started. Currently it doesn't. Pressing escape after moving does the same thing as pressing spacebar.

I'd also always show the handles. It's a bit strange now that they pop into existence if you tab to them. It's even stranger that if you press the arrow keys when you have a handle selected without pressing space first, it looks like you're reordering but you're not. Always showing the handles would also solve that issue

In general I think it would be a good idea to make it more obvious when something is selected. I'd give the entire form-row a background color rather than changing the font-style of the text inside the input (I'd leave that untouched)

[AndreaBarbasso]

@artlowel, I implemented the changes you requested, the last one (using a background-color instead of italicizing text) has been done by applying such background-color to the input instead of the entire form-row for aesthetic reasons.

[github-actions]

Hi @AndreaBarbasso,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[tdonohue]

@AndreaBarbasso : This looks great overall & works. Overall, I'm +1

However, along with the spacebar, I'd like us to add the "Enter" key as another way to select the row. That way this reorder feature works the same as the reordering of Bitstreams on the "Edit Item > Bitstreams" screen (see #3464). (I initially tried to test this by pressing "Enter" and was surprised when I couldn't get it to work. I then realized that it only responds to spacebar)

This PR also has a very minor code conflict in en.json5 that needs to be resolved before merger.

[AndreaBarbasso]

@tdonohue, I updated the PR! Merge conflicts have been resolved, and now the drag and drop can be toggled with the Enter key (in addition to the spacebar).

[artlowel]

Thanks @AndreaBarbasso!

[tdonohue]

👍 Thanks @AndreaBarbasso ! This looks great to me now too. I retested and verified that you can also use the "Enter" key to select/deselect items for keyboard drag & drop reorder

[dspace-bot]

Backport failed for dspace-7_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-7_x
git worktree add -d .worktree/backport-3372-to-dspace-7_x origin/dspace-7_x
cd .worktree/backport-3372-to-dspace-7_x
git switch --create backport-3372-to-dspace-7_x
git cherry-pick -x 1e4e8453a884d184459ca904f9cb085f53064ba2 eccf1d05c2a6268953809835220aea358774c4ad 8620552700bc6478afebc3164da455e8529317f9 4fb7f8941800729877c214b013f9c6a64c820eb1 614dc3196b2920990559a4c5d63e437019e4daaf 058ca8b65ac857a004489dcb7e20509e82ccc909

[dspace-bot]

Backport failed for dspace-8_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-8_x
git worktree add -d .worktree/backport-3372-to-dspace-8_x origin/dspace-8_x
cd .worktree/backport-3372-to-dspace-8_x
git switch --create backport-3372-to-dspace-8_x
git cherry-pick -x 1e4e8453a884d184459ca904f9cb085f53064ba2 eccf1d05c2a6268953809835220aea358774c4ad 8620552700bc6478afebc3164da455e8529317f9 4fb7f8941800729877c214b013f9c6a64c820eb1 614dc3196b2920990559a4c5d63e437019e4daaf 058ca8b65ac857a004489dcb7e20509e82ccc909

[tdonohue]

@AndreaBarbasso : I was able to successfully port this to 8.x in #3927. However, my direct port to 7.x was unsuccessful (see #3928) because it appears this isn't as easy to adapt to that release. (I've closed that PR because it doesn't work)

Would you be able to look into a way to port this to 7.x for the 7.6.3 release? I'm not sure if I'll have time myself to adapt this to 7.x simply because I'm helping test several other PRs. But, I'd love to see this also make it into 7.6.3