ul and li replaced to role list and listitem

This commit is contained in:
cris
2023-02-09 20:53:28 +00:00
parent 8acf7c565b
commit e4e973bbef
2 changed files with 8 additions and 8 deletions

View File

@@ -1,5 +1,5 @@
<div [className]="'float-left w-100 ' + wrapperClass"> <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-container *ngFor="let c of chips.getChips(); let i = index">
<ng-template #tipContent> <ng-template #tipContent>
<p class="text-left p-0 m-0" *ngFor="let tip of tipText"> <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
@@ -7,7 +7,7 @@
</p> </p>
</ng-template> </ng-template>
<li class="nav-item mr-2 mb-1" <div role="listitem" class="nav-item mr-2 mb-1"
#t="ngbTooltip" #t="ngbTooltip"
triggers="manual" triggers="manual"
[ngbTooltip]="tipContent" [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> <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> </span>
</a> </a>
</li> </div>
</ng-container> </ng-container>
<div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1"> <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">
<ng-content ></ng-content> <ng-content ></ng-content>
</div> </div>
</ul> </div>
</div> </div>

View File

@@ -122,7 +122,7 @@ describe('ChipsComponent test suite', () => {
})); }));
it('should save chips item index when drag and drop start', fakeAsync(() => { 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); de.triggerEventHandler('dragstart', null);
@@ -131,7 +131,7 @@ describe('ChipsComponent test suite', () => {
it('should update chips item order when drag and drop end', fakeAsync(() => { it('should update chips item order when drag and drop end', fakeAsync(() => {
spyOn(chipsComp.chips, 'updateOrder'); 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); de.triggerEventHandler('dragend', null);
@@ -158,7 +158,7 @@ describe('ChipsComponent test suite', () => {
}); });
it('should show icon for every field that has a configured icon', () => { 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')); const icons = de.queryAll(By.css('i.fas'));
expect(icons.length).toBe(4); expect(icons.length).toBe(4);
@@ -166,7 +166,7 @@ describe('ChipsComponent test suite', () => {
}); });
it('should show tooltip on mouse over an icon', () => { 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')); const icons = de.queryAll(By.css('i.fas'));
icons[0].triggerEventHandler('mouseover', null); icons[0].triggerEventHandler('mouseover', null);