fix: SITES-37686 Insert New Component Panel Not Keyboard Accessible in List Items (#399)

Co-authored-by: Lucian Stoian <lucians@ENSRO0414.local>

Author: StoianLucian

coral-base-list/src/scripts/BaseList.js

@@ -130,6 +130,7 @@ const BaseList = (superClass) => class extends superClass {
     }
 
     const items = this._getSelectableItems();
+    items.forEach((item, i) => this.setIndex(item, i === 0 ? 0 : -1));
     items[0].focus();
   }
 
@@ -140,6 +141,9 @@ const BaseList = (superClass) => class extends superClass {
     }
 
     const items = this._getSelectableItems();
+    items.forEach((item, i) =>
+      this.setIndex(item, i === items.length - 1 ? 0 : -1)
+    );
     items[items.length - 1].focus();
   }
 
@@ -159,8 +163,11 @@ const BaseList = (superClass) => class extends superClass {
     }
 
     if (index < items.length - 1) {
+      this.setIndex(target, -1);
+      this.setIndex(items[index + 1], 0);
       items[index + 1].focus();
     } else {
+      items.forEach((item, i) => this.setIndex(item, i === 0 ? 0 : -1));
       items[0].focus();
     }
   }
@@ -181,8 +188,13 @@ const BaseList = (superClass) => class extends superClass {
     }
 
     if (index > 0) {
+      this.setIndex(target, -1);
+      this.setIndex(items[index - 1], 0);
       items[index - 1].focus();
     } else {
+      items.forEach((item, i) =>
+        this.setIndex(item, i === items[length - 1] ? 0 : -1)
+      );
       items[items.length - 1].focus();
     }
   }
@@ -203,6 +215,12 @@ const BaseList = (superClass) => class extends superClass {
     }
   }
 
+  setIndex(element, value) {
+    if (element instanceof HTMLElement) {
+      element.setAttribute("tabindex", value);
+    }
+  }
+
   /**
    Returns {@link BaseList} interaction options.