bring back the div and span inside years view and host bind the role,hidden and valuenow

Author: MPopov

projects/igniteui-angular/src/lib/calendar/calendar.directives.ts

@@ -48,6 +48,21 @@ export class IgxCalendarYearDirective {
         return this.isCurrentYear;
     }
 
+    @HostBinding('attr.role')
+    public get role(): string {
+        return this.isCurrentYear ? 'spinbutton' : null;
+    }
+
+    @HostBinding('attr.arria-hidden')
+    public get aHidden(): boolean {
+        return !this.isCurrentYear;
+    }
+
+    @HostBinding('attr.aria-valuenow')
+    public get valuenow(): number {
+        return this.isCurrentYear ? this.date.getFullYear() : null;
+    }
+
     @HostBinding('attr.tabindex')
     public get tabIndex(): number {
         return this.isCurrentYear ? 0 : -1;

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html

@@ -1,13 +1,13 @@
 <div class="igx-calendar__body">
-    <ul class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)">
-        <li
+    <div class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)">
+        <span
             [attr.aria-label]="formattedYear(year)"
             [igxCalendarYear]="year"
             [date]="date"
             (onYearSelection)="selectYear($event)"
             *ngFor="let year of decade; trackBy: yearTracker">
 
             {{ formattedYear(year) }}
-        </li>
-    </ul>
+        </span>
+    </div>
 </div>