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>
<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 @@
"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 @@
<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>

View File

@ -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);

View File

@ -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>

View File

@ -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;