diff --git a/src/app/pages/extra-components/calendar/calendar-aria-label.directive.ts b/src/app/pages/extra-components/calendar/calendar-aria-label.directive.ts new file mode 100644 index 00000000..8b17192f --- /dev/null +++ b/src/app/pages/extra-components/calendar/calendar-aria-label.directive.ts @@ -0,0 +1,30 @@ +import { + AfterViewInit, + Directive, + ElementRef, + Renderer2, +} from '@angular/core'; + +@Directive({ + selector: '[ngxCalendarAriaLabel]', // apply only to nb-calendar with this attribute +}) +export class CalendarAriaLabelDirective implements AfterViewInit { + constructor(private el: ElementRef, private renderer: Renderer2) {} + + ngAfterViewInit() { + setTimeout(() => { + const nativeElement = this.el.nativeElement; + + const prevBtn = nativeElement.querySelector('.prev-month'); + const nextBtn = nativeElement.querySelector('.next-month'); + + if (prevBtn) { + this.renderer.setAttribute(prevBtn, 'aria-label', 'Go to previous month'); + } + + if (nextBtn) { + this.renderer.setAttribute(nextBtn, 'aria-label', 'Go to next month'); + } + }, 0); + } +}