fix(rating): generate correct aria-readonly/disabled attributes (#4586

)

readonly -> `aria-readonly`
disabled -> `aria-disabled`

Previously `aria-disabled` was generated in case of readonly rating and nothing when disabled

src/rating/rating.spec.ts

@@ -451,16 +451,37 @@ describe('ngb-rating', () => {
 			expect(rating.attributes['aria-valuetext']).toBe('Rating: 7 out of 10 stars');
 		});
 
-		it('updates aria-disabled when readonly', () => {
-			const fixture = createTestComponent('<ngb-rating></ngb-rating>');
-			let ratingEl = fixture.debugElement.query(By.directive(NgbRating));
+		it(`updates 'aria-readonly' when readonly`, () => {
+			const fixture = TestBed.createComponent(NgbRating);
+			const { nativeElement, componentInstance: rating } = fixture;
+
+			fixture.detectChanges();
+			expect(nativeElement.getAttribute('aria-readonly')).toBeNull();
+			expect(nativeElement.getAttribute('aria-disabled')).toBeNull();
+
+			// readonly
+			rating.readonly = true;
+			fixture.detectChanges();
+			expect(nativeElement.getAttribute('aria-readonly')).toBe('true');
+			expect(nativeElement.getAttribute('aria-disabled')).toBeNull();
+
+			// readonly and disabled
+			rating.disabled = true;
+			fixture.detectChanges();
+			expect(nativeElement.getAttribute('aria-readonly')).toBeNull();
+			expect(nativeElement.getAttribute('aria-disabled')).toBe('true');
+		});
+
+		it(`updates 'aria-disabled' when disabled`, () => {
+			const fixture = createTestComponent('<ngb-rating [disabled]="disabled" />');
+			let { nativeElement } = fixture.debugElement.query(By.directive(NgbRating));
+
 			fixture.detectChanges();
-			expect(ratingEl.attributes['aria-disabled'] == null).toBeTruthy();
+			expect(nativeElement.getAttribute('aria-disabled')).toBeNull();
 
-			let ratingComp = <NgbRating>ratingEl.componentInstance;
-			ratingComp.readonly = true;
+			fixture.componentInstance.disabled = true;
 			fixture.detectChanges();
-			expect(ratingEl.attributes['aria-disabled']).toBe('true');
+			expect(nativeElement.getAttribute('aria-disabled')).toBe('true');
 		});
 	});
 
@@ -673,7 +694,9 @@ describe('ngb-rating', () => {
 			getStar(element.nativeElement, 3).click();
 			fixture.detectChanges();
 			expect(getState(element.nativeElement)).toEqual([true, true, true, false, false]);
+			expect(element.nativeElement.getAttribute('aria-disabled')).toBeNull();
 			expect(getState(disabledElement.nativeElement)).toEqual([false, false, false, false, false]);
+			expect(disabledElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
 			expect(fixture.componentInstance.model).toEqual(3);
 
 			getStar(disabledElement.nativeElement, 4).click();
@@ -821,6 +844,7 @@ describe('ngb-rating', () => {
 })
 class TestComponent {
 	changed = false;
+	disabled = false;
 	form = new UntypedFormGroup({ rating: new UntypedFormControl(null, Validators.required) });
 	formControl = new FormControl(0);
 	max = 10;

src/rating/rating.ts

@@ -51,7 +51,8 @@ export interface StarTemplateContext {
 		'[attr.aria-valuemax]': 'max',
 		'[attr.aria-valuenow]': 'nextRate',
 		'[attr.aria-valuetext]': 'ariaValueText(nextRate, max)',
-		'[attr.aria-disabled]': 'readonly ? true : null',
+		'[attr.aria-readonly]': 'readonly && !disabled ? true : null',
+		'[attr.aria-disabled]': 'disabled ? true : null',
 		'(blur)': 'handleBlur()',
 		'(keydown)': 'handleKeyDown($event)',
 		'(mouseleave)': 'reset()',
@@ -77,9 +78,13 @@ export interface StarTemplateContext {
 })
 export class NgbRating implements ControlValueAccessor, OnInit, OnChanges {
 	contexts: StarTemplateContext[] = [];
-	disabled = false;
 	nextRate: number;
 
+	/**
+	 * If `true`, the rating can't be changed or focused.
+	 */
+	@Input() disabled = false;
+
 	/**
 	 * The maximal rating that can be given.
 	 */