fix(carousel): move 'aria-activedescendant' attribute to indicators (n…

…g-bootstrap#4524)

Moves the aria-activedescendant attribute from the root element to
the '.carousel-indicators' element which has a compatible 'tablist'
role.

Fixes ng-bootstrap#4416

src/carousel/carousel.spec.ts

@@ -23,7 +23,7 @@ const getArrowElements = (el: HTMLElement) =>
 function expectActiveSlides(nativeEl: HTMLDivElement, active: boolean[]) {
 	const slideElms = getSlideElements(nativeEl);
 	const indicatorElms = getIndicatorElements(nativeEl);
-	const carouselElm = nativeEl.querySelector('ngb-carousel');
+	const indicatorContainerElm = nativeEl.querySelector('.carousel-indicators');
 
 	expect(slideElms.length).toBe(active.length);
 	expect(indicatorElms.length).toBe(active.length);
@@ -33,7 +33,7 @@ function expectActiveSlides(nativeEl: HTMLDivElement, active: boolean[]) {
 			expect(slideElms[i]).toHaveCssClass('active');
 			expect(indicatorElms[i]).toHaveCssClass('active');
 			expect(indicatorElms[i].getAttribute('aria-selected')).toBe('true');
-			expect(carouselElm!.getAttribute('aria-activedescendant')).toBe(slideElms[i].id);
+			expect(indicatorContainerElm!.getAttribute('aria-activedescendant')).toBe(slideElms[i].id);
 		} else {
 			expect(slideElms[i]).not.toHaveCssClass('active');
 			expect(indicatorElms[i]).not.toHaveCssClass('active');

src/carousel/carousel.ts

@@ -79,10 +79,14 @@ export class NgbSlide {
 		'(mouseleave)': 'mouseHover = false',
 		'(focusin)': 'focused = true',
 		'(focusout)': 'focused = false',
-		'[attr.aria-activedescendant]': `'slide-' + activeId`,
 	},
 	template: `
-		<div class="carousel-indicators" [class.visually-hidden]="!showNavigationIndicators" role="tablist">
+		<div
+			class="carousel-indicators"
+			[class.visually-hidden]="!showNavigationIndicators"
+			role="tablist"
+			[attr.aria-activedescendant]="'slide-' + activeId"
+		>
 			<button
 				type="button"
 				data-bs-target