From d1f5ad89b7f2705bac9ef17747436c892e55bb96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 26 Oct 2021 16:23:09 +0200
Subject: [PATCH] MOBILE-3899 core: Fix some animations and a11y

---
 .../core-button-with-spinner.html                 |  4 ++--
 .../download-refresh/core-download-refresh.html   | 15 +++++++--------
 src/core/components/loading/core-loading.html     |  4 ++--
 .../settings/pages/space-usage/space-usage.html   |  2 +-
 .../pages/synchronization/synchronization.html    |  6 +++---
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/core/components/button-with-spinner/core-button-with-spinner.html b/src/core/components/button-with-spinner/core-button-with-spinner.html
index 303eb0b3c..da739883f 100644
--- a/src/core/components/button-with-spinner/core-button-with-spinner.html
+++ b/src/core/components/button-with-spinner/core-button-with-spinner.html
@@ -1,6 +1,6 @@
-<div *ngIf="!loading" [@coreShowHideAnimation]>
+<div *ngIf="!loading" @coreShowHideAnimation>
     <ng-content></ng-content>
 </div>
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="loadingLabel | translate"></ion-spinner>
+<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="loadingLabel | translate"></ion-spinner>
diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index 9c984e977..9ba3490a9 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -1,25 +1,24 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
-    <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark"
-        [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size">
+    <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark" @coreShowHideAnimation
+        [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size">
         <ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" color="dark" [@coreShowHideAnimation]
+        (click)="download($event, true)" color="dark" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate" [size]="size">
         <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Downloaded status icon. -->
-    <ion-icon *ngIf="status == statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal"
-        color="success" name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate"
-        role="status"></ion-icon>
+    <ion-icon *ngIf="status == statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" color="success"
+        name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status"></ion-icon>
 
-    <ion-spinner *ngIf="status === statusDownloading" [@coreShowHideAnimation]
+    <ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner>
 </ng-container>
 
 <!-- Spinner. -->
-<ion-spinner *ngIf="loading" [@coreShowHideAnimation] [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+<ion-spinner *ngIf="loading" @coreShowHideAnimation [attr.aria-label]="'core.loading' | translate"></ion-spinner>
diff --git a/src/core/components/loading/core-loading.html b/src/core/components/loading/core-loading.html
index 1c91e812e..569682040 100644
--- a/src/core/components/loading/core-loading.html
+++ b/src/core/components/loading/core-loading.html
@@ -1,8 +1,8 @@
-<div class="core-loading-container" *ngIf="!hideUntil" role="status" [@coreShowHideAnimation]>
+<div class="core-loading-container" *ngIf="!hideUntil" role="status" @coreShowHideAnimation>
     <ion-spinner color="primary" aria-hidden="true"></ion-spinner>
     <p class="core-loading-message" *ngIf="message" role="status">{{message}}</p>
 </div>
-<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" [@coreShowHideAnimation]
+<div #content class="core-loading-content" [id]="uniqueId" [attr.aria-busy]="!hideUntil" @coreShowHideAnimation
     [class.opacity-hide]="!hideUntil">
     <ng-content *ngIf="loaded">
     </ng-content>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index 865cc082e..aa17b099a 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -19,7 +19,7 @@
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list>
-            <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'">
+            <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId">
                 <ion-label class="ion-text-wrap">
                     <p class="item-heading">
                         <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index 1808a9cc7..625d67b88 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -31,7 +31,7 @@
                     <h2>{{ 'core.settings.sites' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
-            <ion-item *ngFor="let site of sites" [attr.aria-current]="site.id == currentSiteId ? 'page' : 'false'" class="ion-text-wrap">
+            <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId" class="ion-text-wrap">
                 <ion-label>
                     <p class="item-heading">
                         <core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text>
@@ -40,8 +40,8 @@
                     <p>{{ site.siteUrl }}</p>
                 </ion-label>
                 <core-button-with-spinner [loading]="isSynchronizing(site.id)" slot="end">
-                    <ion-button fill="clear"  (click)="synchronize(site.id)"
-                        [title]="site.siteName" [attr.aria-label]="'core.settings.synchronizenow' | translate">
+                    <ion-button fill="clear" (click)="synchronize(site.id)" [title]="site.siteName"
+                        [attr.aria-label]="'core.settings.synchronizenow' | translate">
                         <ion-icon name="fas-sync-alt" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </core-button-with-spinner>