Settings | Custom fields | Edit: Drag and drop to support Custom field display order

As a librarian
I want to set the display order for fields that appear on a record
So that the fields display in context.

Implementation Resources to review

• Consider using library https://github.com/atlassian/react-beautiful-dnd for Drag and Drop
• OR review Core functional implementation of drag and drop for requests https://issues.folio.org/browse/STCOM-585
• OR consider reviewing this page - https://www.smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering/
• OR https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
• OR https://www.nngroup.com/articles/drag-drop/

Requirements

• Allow user to set custom field display order using drag and drop
• Hover text on the drag and drop icon should be [Change custom field order]
  • Use tooltip component to show hover text - https://ux.folio.org/storybook/?selectedKind=Tooltip&selectedStory=Basic%20Usage&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel
• Upon clicking on the drag and drop icon OR placing cursor on any part of the custom field including the accordion and clicking mouse then highlight the custom field and move the custom field up or down the custom fields list.
• Show a Drag and drop - drop zone
  • Drag and drop drop zone should look similar to the Instance record on this mockup - https://drive.google.com/file/d/1x55r1tOHNLZBRsgymnP1P3ANZn4UUMHq/view?usp=sharing
• Upon releasing the cursor/move snap the custom field into its new position
• Ensure drag and drop implementation is accessible
• Screenreader must indicate to user that s/he can change custom field display order and when that change has taken place
• A user can select multiple custom fields to change order if s/he selected multiple custom fields at the same time (Nice to have requirement)

Screenshot

Screenshot when user has focus on the custom field and the field is highlighted to reflect it is enabled for drag and drop

Drag and drop drop zone should look similar to the Instance record on this mockup - https://drive.google.com/file/d/1x55r1tOHNLZBRsgymnP1P3ANZn4UUMHq/view?usp=sharing

Acceptance Criteria

Given I am on the Edit Custom Fields list
When I have more than one custom field
Then I should be able to set the custom field display order by drag and drop

Given I am on the Edit Custom Fields list
AND I am using my keyboard only to navigate
When I tab to the drag and drop icon and the focus is now on the icon
Then I should be able to use the up and down arrows to change custom field display order

Given I am on the Edit Custom Fields list
AND I am using my keyboard only to navigate
AND a screenreader to read the page
When I tab to the drag and drop icon and the focus is now on the icon
Then I should be able to use the up and down arrows to change custom field display order
AND the screenreader should provide information that indicates that s/he can change the order
AND when the order has changed

Given I have changed the custom field display order via Settings > Users > Custom fields
When I go to a User record
Then the revised display order should be reflected on Create/Edit/View User record

Given I have created a custom field called Major
AND I have collapsed its custom field settings
When I click my cursor on the Major accordion AND hold
Then enable the custom field to be drag and dropped

Given I have created a custom field called Major
AND I have expanded its custom field settings
When I click my cursor on any part of the custom field AND hold
Then enable the custom field to be drag and dropped

Given the custom field Major has been enabled to be dragged and dropped
When I move the custom field to another position
Then display a drop zone to indicate where I can move the custom field

Given I have moved the custom field Major to another position
When I release my cursor/mouse
Then Major should snap into its new position