Allow reordering questions using the keyboard

[susnux]

Part 1: Adding missing aria role

Resolves: #1263
divs require a role when aria-label is set (see context in linked issue)

Part 2: Add buttons

Resolves: #317
Added buttons for changing the order. Buttons can be focused and triggered using the keyboard.
This also preserves the drag and drop handling, but also allows using buttons or the keyboard.

The buttons are only shown if hovered / focused, but they are always accessible for screen readers.

If a button is clicked / triggered the focus is kept on the button (the vanishing focus ring in the following video happens only because disabled buttons from @nextcloud/vue do not have a visual focus ring)

vokoscreenNG-2023-02-22_02-26-21.mp4

[jancborchardt]

Very nice enhancement! :) Makes it very obvious and accessible how to reorder, good stuff.

Only one thing: When reordering via these buttons, whether it be via keyboard or mouse click, it would be nice to have a quick animation of the movement using var(--animation-quick) or var(--animation-slow) depending on what looks better. :)

[susnux]

Very nice enhancement! :) Makes it very obvious and accessible how to reorder, good stuff.

Thank you :)

Only one thing: When reordering via these buttons, whether it be via keyboard or mouse click, it would be nice to have a quick animation of the movement using var(--animation-quick) or var(--animation-slow) depending on what looks better. :)

Done. Added the animation, I choose slow because quick for long questions looks too "jumpy".

vokoscreenNG-2023-02-22_15-46-53.mp4

[jancborchardt]

Looks really amazing now @susnux, great work! :)

[Chartman123]

@susnux I get lots of errors in the browser console like this:

[Vue warn]: Invalid prop: type check failed for prop "setReturnFocus". Expected Object, String, Function, Boolean, got HTMLButtonElement 

found in

---> <NcPopover>
       <NcActions>
         <RouterLink>
           <NcListItem>
             <AppNavigationForm> at src/components/AppNavigationForm.vue
               <NcAppNavigation>
                 <NcContent>
                   <Forms> at src/Forms.vue
                     <Root> 2 forms-main.js:134698:21

The lower part of the message varies...

And at least for me the focus ring always stays on the ⬇️ button after clicking on it with the mouse. The ⬆️ button doesn't show the ring.

[susnux]

@Chartman123 the errors should be fixed with nextcloud Vue 7.7.0:
nextcloud-libraries/nextcloud-vue#3803

[Chartman123]

@susnux: With nc-vue 7.7 the errors are gone. But now I found some new ones: canMoveUp and canMoveDown are missing in the view mode and thus throwing errors.

[Vue warn]: Missing required prop: "canMoveUp"

found in

---> <Question> at src/components/Questions/Question.vue
       <QuestionDropdown> at src/components/Questions/QuestionDropdown.vue
         <NcAppContent>
           <Submit> at src/views/Submit.vue
             <NcContent>
               <Forms> at src/Forms.vue
                 <Root>

[susnux]

With nc-vue 7.7 the errors are gone. But now I found some new ones: canMoveUp and canMoveDown are missing in the view mode and thus throwing errors.

@Chartman123 those issues are resolved. And the focus issue is also resolved.

[Chartman123]

With nc-vue 7.7 the errors are gone. But now I found some new ones: canMoveUp and canMoveDown are missing in the view mode and thus throwing errors.

@Chartman123 those issues are resolved. And the focus issue is also resolved.

Nice :) I will check it this evening

[susnux]

• Rebased
• Fixed a11y issues
• Fixed transition for both: Keyboard and mouse sorting

vokoscreenNG-2023-10-17_00-44-37.mp4