Make reorder buttons keyboard accessible #3372
Conversation
|
Hi @AndreaBarbasso, |
|
@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 |
# Conflicts: # src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html # src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts # src/assets/i18n/en.json5
|
@tdonohue, conflicts have been resolved! |
There was a problem hiding this comment.
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)
|
@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. |
|
Hi @AndreaBarbasso, |
There was a problem hiding this comment.
@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.
# Conflicts: # src/assets/i18n/en.json5
|
@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). |
References
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:
Checklist
mainbranch of code (unless it is a backport or is fixing an issue specific to an older branch).npm run lintnpm run check-circ-deps)package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.