MOBILE-4065 calendar: Fix calendar days focus

Author: crazyserver

src/addons/calendar/components/calendar/addon-calendar-calendar.html

@@ -33,7 +33,7 @@ <h2 id="addon-calendar-monthname">
         </ion-grid>
 
         <core-swipe-slides [manager]="manager">
-            <ng-template let-month="item">
+            <ng-template let-month="item" let-activeView="active">
                 <!-- Calendar view. -->
                 <ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
                     <div role="rowgroup">
@@ -57,9 +57,9 @@ <h2 id="addon-calendar-monthname">
                                     "today": month.isCurrentMonth && day.istoday,
                                     "weekend": day.isweekend,
                                     "duration_finish": day.haslastdayofevent
-                                }' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0"
-                                (ariaButtonClick)="dayClicked(day.mday)">
-                                <p class="addon-calendar-day-number" role="button">
+                                }' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell"
+                                (ariaButtonClick)="dayClicked(day.mday)" [tabindex]="activeView ? 0 : -1">
+                                <p class="addon-calendar-day-number">
                                     <span aria-hidden="true">{{ day.mday }}</span>
                                     <span class="sr-only">{{ day.periodName | translate }}</span>
                                 </p>
@@ -72,8 +72,8 @@ <h2 id="addon-calendar-monthname">
                                 <div class="ion-hide-md-down addon-calendar-day-events" *ngIf="day.filteredEvents">
                                     <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
                                         <div *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
-                                            [class.addon-calendar-event-past]="event.ispast" role="button" tabindex="0"
-                                            (ariaButtonClick)="eventClicked(event, $event)">
+                                            [class.addon-calendar-event-past]="event.ispast" (ariaButtonClick)="eventClicked(event, $event)"
+                                            [tabindex]="activeView ? 0 : -1">
                                             <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
                                             <ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
                                                 [attr.aria-label]="'core.notsent' | translate"></ion-icon>

src/addons/calendar/components/calendar/calendar.scss

@@ -25,7 +25,6 @@
         @include border-end(1px, solid var(--addon-calendar-border-color));
         overflow: hidden;
         min-height: 60px;
-        cursor: pointer;
 
         &:first-child {
             @include padding-horizontal(10px, null);

src/core/components/swipe-slides/swipe-slides.html

@@ -1,5 +1,5 @@
 <ion-slides *ngIf="loaded" (ionSlideWillChange)="slideWillChange()" (ionSlideDidChange)="slideDidChange()" [options]="options">
-    <ion-slide *ngFor="let item of items; index as index">
+    <ion-slide *ngFor="let item of items; index as index" [attr.aria-hidden]="!isActive(index)">
         <ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}">
         </ng-container>
     </ion-slide>

src/theme/theme.base.scss

@@ -1581,7 +1581,7 @@ ion-item.item {
     outline: none;
 }
 
-textarea, button, select, input, a {
+textarea, button, select, input, a, .clickable {
     &:focus {
         @include core-focus-style();
         outline: none;