ENH Use li for multi links

client/src/components/LinkField/LinkField.js

@@ -389,12 +389,14 @@ const LinkField = ({
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
         >
-          <SortableContext
-            items={linkIDs}
-            strategy={verticalListSortingStrategy}
-          >
-            {links}
-          </SortableContext>
+          <ul className="link-picker__list">
+            <SortableContext
+              items={linkIDs}
+              strategy={verticalListSortingStrategy}
+            >
+              {links}
+            </SortableContext>
+          </ul>
         </DndContext>
       </div>
     }
@@ -476,6 +478,7 @@ const LinkField = ({
           isKeyboardEditing={isKeyboardEditing}
         /> }
       {sortableLinks()}
+      { /* This <LinkModalContainer> is only used for editing EXISTING links */ }
       { renderModal && <LinkModalContainer
           types={types}
           typeKey={data[editingID]?.typeKey}

client/src/components/LinkField/LinkField.scss

@@ -31,3 +31,4 @@
     box-shadow: none;
   }
 }
+

client/src/components/LinkPicker/LinkPicker.js

@@ -69,6 +69,7 @@ const LinkPicker = ({
         onSelect={handleSelect}
         onKeyDownEdit={onKeyDownEdit}
       />
+      { /* This <LinkModalContainer> is only used for editing NEW links */ }
       { shouldOpenModal && <LinkModalContainer
           types={types}
           typeKey={typeKey}

client/src/components/LinkPicker/LinkPicker.scss

@@ -140,6 +140,10 @@
   }
 }
 
+.link-picker__list {
+  padding-left: 0;
+}
+
 .link-picker__drag-handle {
   left: 5px;
   position: absolute;

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import classnames from 'classnames';
 import i18n from 'i18n';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { LinkFieldContext } from 'components/LinkField/LinkField';
 import { Button } from 'reactstrap';
@@ -61,6 +61,7 @@ const LinkPickerTitle = ({
     transform,
     transition,
   } = useSortable({id});
+  const [dragHandleToggled, setDragHandleToggled] = useState(false);
 
   const handleButtonKeyDown = (event) => {
     // Prevent the triggering the parent's keyboard sorting handler
@@ -82,13 +83,11 @@ const LinkPickerTitle = ({
     event.preventDefault();
   };
 
-  const handleIconKeyDown = (event) => {
+  const handleDragHandleKeyDown = (event) => {
     if (!['Enter', 'Space'].includes(event.code)) {
       return;
     }
-    const el = event.target;
-    const newVal = el.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
-    el.setAttribute('aria-pressed', newVal);
+    setDragHandleToggled(!dragHandleToggled);
   };
 
   const style = {
@@ -119,7 +118,8 @@ const LinkPickerTitle = ({
   // add this to the drag handle instead
   delete attributes.tabIndex;
   const idAttr = `link-picker__link-${id}`;
-  return <div
+  const Tag = isMulti ? 'li' : 'div';
+  return <Tag
     className={className}
     ref={setNodeRef}
     style={style}
@@ -130,10 +130,10 @@ const LinkPickerTitle = ({
     { (isMulti && !readonly && !disabled) && <div className="link-picker__drag-handle"
         tabIndex="0"
         role="button"
-        aria-pressed="false"
+        aria-pressed={dragHandleToggled ? 'true' : 'false'}
         aria-controls={idAttr}
         aria-label="Sort Links"
-        onKeyDown={handleIconKeyDown}
+        onKeyDown={handleDragHandleKeyDown}
     >
       <i
         className="font-icon-drag-handle"
@@ -173,7 +173,7 @@ const LinkPickerTitle = ({
         >{deleteText}</span>
       }
     </Button>
-  </div>
+  </Tag>
 };
 
 LinkPickerTitle.propTypes = {