fix(progressbar): add aria attributes in parent and text-bg-color c…

…lass when no `textType` (#4461)
ng-bootstrap · Jan 9, 2023 · 54bf804 · 54bf804
1 parent 8ac01c2
commit 54bf804
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/src/progressbar/progressbar.spec.ts b/src/progressbar/progressbar.spec.ts
@@ -10,19 +10,23 @@ const createTestComponent = (html: string) =>
 	createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
 function getAriaLabel(nativeEl): string {
-	return getProgressbar(nativeEl).getAttribute('aria-label') || '';
+	return getProgress(nativeEl).getAttribute('aria-label') || '';
 }
 
 function getBarWidth(nativeEl): string {
 	return getProgressbar(nativeEl).style.width;
 }
 
 function getBarHeight(nativeEl): string {
-	return nativeEl.querySelector('.progress').style.height;
+	return getProgress(nativeEl).style.height;
 }
 
 function getBarValue(nativeEl): number {
-	return parseInt(getProgressbar(nativeEl).getAttribute('aria-valuenow')!, 10);
+	return parseInt(getProgress(nativeEl).getAttribute('aria-valuenow')!, 10);
+}
+
+function getProgress(nativeEl: Element): HTMLElement {
+	return nativeEl.querySelector('.progress') as HTMLElement;
 }
 
 function getProgressbar(nativeEl: Element): HTMLElement {
@@ -175,15 +179,15 @@ describe('ngb-progressbar', () => {
 			const html = '<ngb-progressbar [value]="value" [type]="type"></ngb-progressbar>';
 			const fixture = createTestComponent(html);
 
-			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-warning');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-bg-warning');
 
 			fixture.componentInstance.type = 'info';
 			fixture.detectChanges();
-			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-info');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-bg-info');
 
 			fixture.componentInstance.type = 'dark';
 			fixture.detectChanges();
-			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-dark');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-bg-dark');
 		});
 
 		it('accepts a custom text type', () => {
@@ -197,6 +201,21 @@ describe('ngb-progressbar', () => {
 			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-info');
 		});
 
+		it('accepts a custom type and text type', () => {
+			const html = '<ngb-progressbar [value]="value" [type]="type" [textType]="textType"></ngb-progressbar>';
+			const fixture = createTestComponent(html);
+
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-light');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-warning');
+
+			fixture.componentInstance.type = 'danger';
+			fixture.componentInstance.textType = 'info';
+			fixture.detectChanges();
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-danger');
+			expect(getProgressbar(fixture.nativeElement)).not.toHaveCssClass('text-bg-danger');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-info');
+		});
+
 		it('accepts animated as normal attr', () => {
 			const html = '<ngb-progressbar [value]="value" [animated]="animated"></ngb-progressbar>';
 			const fixture = createTestComponent(html);
@@ -231,21 +250,21 @@ describe('ngb-progressbar', () => {
 			const html = '<ngb-progressbar [value]="value" [type]="type" [striped]="true"></ngb-progressbar>';
 			const fixture = createTestComponent(html);
 
-			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-warning');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-bg-warning');
 			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-bar-striped');
 
 			fixture.componentInstance.type = 'success';
 			fixture.detectChanges();
-			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-success');
+			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-bg-success');
 			expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-bar-striped');
 		});
 
 		it('sets the min and max values as aria attributes', () => {
 			const html = '<ngb-progressbar [value]="130" [max]="150"></ngb-progressbar>';
 			const fixture = createTestComponent(html);
 
-			expect(getProgressbar(fixture.nativeElement).getAttribute('aria-valuemin')).toBe('0');
-			expect(getProgressbar(fixture.nativeElement).getAttribute('aria-valuemax')).toBe('150');
+			expect(getProgress(fixture.nativeElement).getAttribute('aria-valuemin')).toBe('0');
+			expect(getProgress(fixture.nativeElement).getAttribute('aria-valuemax')).toBe('150');
 		});
 
 		it('should display the progress-bar label', () => {

diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts
@@ -12,17 +12,22 @@ import { NgIf, PercentPipe } from '@angular/common';
 	imports: [NgIf, PercentPipe],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
-	host: { class: 'progress' },
+	host: {
+		class: 'progress',
+		role: 'progressbar',
+		'[attr.aria-valuenow]': 'getValue()',
+		'aria-valuemin': '0',
+		'[attr.aria-valuemax]': 'max',
+		'[attr.aria-label]': 'ariaLabel',
+	},
 	template: `
 		<div
-			class="progress-bar{{ type ? ' bg-' + type : '' }}{{ textType ? ' text-' + textType : '' }}
-    {{ animated ? ' progress-bar-animated' : '' }}{{ striped ? ' progress-bar-striped' : '' }}"
-			role="progressbar"
+			class="progress-bar{{ type ? (textType ? ' bg-' + type : ' text-bg-' + type) : '' }}{{
+				textType ? ' text-' + textType : ''
+			}}"
+			[class.progress-bar-animated]="animated"
+			[class.progress-bar-striped]="striped"
 			[style.width.%]="getPercentValue()"
-			[attr.aria-valuenow]="getValue()"
-			aria-valuemin="0"
-			[attr.aria-valuemax]="max"
-			[attr.aria-label]="ariaLabel"
 		>
 			<span *ngIf="showValue" i18n="@@ngb.progressbar.value">{{ getValue() / max | percent }}</span
 			><ng-content></ng-content>