MOBILE-4065 calendar: Fix calendar days focus

main
Pau Ferrer Ocaña 2023-02-01 11:06:13 +01:00
parent 7fac6895d9
commit bff59a0e54
4 changed files with 8 additions and 9 deletions

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<ion-slides *ngIf="loaded" (ionSlideWillChange)="slideWillChange()" (ionSlideDidChange)="slideDidChange()" [options]="options"> <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 *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}">
</ng-container> </ng-container>
</ion-slide> </ion-slide>

View File

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