diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html
index 2233c1bd16..a6b90b23aa 100644
--- a/src/app/shared/form/chips/chips.component.html
+++ b/src/app/shared/form/chips/chips.component.html
@@ -1,5 +1,5 @@
 <div [className]="'float-left w-100 ' + wrapperClass">
-  <ul class="nav nav-pills d-flex flex-column flex-sm-row" [sortablejs]="chips.getChips()" [sortablejsOptions]="options">
+  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" [sortablejs]="chips.getChips()" [sortablejsOptions]="options">
     <ng-container *ngFor="let c of chips.getChips(); let i = index">
       <ng-template #tipContent>
         <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
@@ -7,7 +7,7 @@
         </p>
       </ng-template>
 
-      <li class="nav-item mr-2 mb-1"
+      <div role="listitem" class="nav-item mr-2 mb-1"
           #t="ngbTooltip"
           triggers="manual"
           [ngbTooltip]="tipContent"
@@ -40,10 +40,10 @@
             <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ml-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i>
           </span>
         </a>
-      </li>
+      </div>
     </ng-container>
     <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">
       <ng-content ></ng-content>
     </div>
-  </ul>
+  </div>
 </div>
diff --git a/src/app/shared/form/chips/chips.component.spec.ts b/src/app/shared/form/chips/chips.component.spec.ts
index 2b8a469bd1..050950ed4d 100644
--- a/src/app/shared/form/chips/chips.component.spec.ts
+++ b/src/app/shared/form/chips/chips.component.spec.ts
@@ -122,7 +122,7 @@ describe('ChipsComponent test suite', () => {
     }));
 
     it('should save chips item index when drag and drop start', fakeAsync(() => {
-      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const de = chipsFixture.debugElement.query(By.css('div.nav-item'));
 
       de.triggerEventHandler('dragstart', null);
 
@@ -131,7 +131,7 @@ describe('ChipsComponent test suite', () => {
 
     it('should update chips item order when drag and drop end', fakeAsync(() => {
       spyOn(chipsComp.chips, 'updateOrder');
-      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const de = chipsFixture.debugElement.query(By.css('div.nav-item'));
 
       de.triggerEventHandler('dragend', null);
 
@@ -158,7 +158,7 @@ describe('ChipsComponent test suite', () => {
     });
 
     it('should show icon for every field that has a configured icon', () => {
-      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const de = chipsFixture.debugElement.query(By.css('div.nav-item'));
       const icons = de.queryAll(By.css('i.fas'));
 
       expect(icons.length).toBe(4);
@@ -166,7 +166,7 @@ describe('ChipsComponent test suite', () => {
     });
 
     it('should show tooltip on mouse over an icon', () => {
-      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const de = chipsFixture.debugElement.query(By.css('div.nav-item'));
       const icons = de.queryAll(By.css('i.fas'));
 
       icons[0].triggerEventHandler('mouseover', null);