MOBILE-3947 chore: Remove Ionic warnings about legacy form controls

crazyserver · Dec 1, 2023 · e6f2d38 · e6f2d38
1 parent 22b7da0
commit e6f2d38
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 18 deletions.
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -161,7 +161,8 @@ <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.co
             <div class="flex-row ion-justify-content-between">
                 <p class="item-heading">
                     <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" />
-                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" [title]="'addon.messages.contactblocked' | translate" />
+                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
+                        [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                     <ion-icon *ngIf="conversation.ismuted" name="fas-volume-xmark"
                         [title]="'addon.messages.mutedconversation' | translate" />
                 </p>

diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.html b/src/core/features/search/components/global-search-filters/global-search-filters.html
@@ -23,16 +23,14 @@ <h1>{{ 'core.search.filterheader' | translate }}</h1>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label>{{ 'core.search.allcategories' | translate }}</ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="allSearchAreaCategories" [indeterminate]="allSearchAreaCategories === null"
-                    (ionChange)="allSearchAreaCategoriesUpdated()" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="allSearchAreaCategories"
+                    [indeterminate]="allSearchAreaCategories === null" (ionChange)="allSearchAreaCategoriesUpdated()">{{
+                    'core.search.allcategories' | translate }}</ion-checkbox>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let searchAreaCategory of searchAreaCategories">
-                <ion-label>
-                    <core-format-text [text]="searchAreaCategory.name" />
-                </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="searchAreaCategory.checked"
-                    (ionChange)="onSearchAreaCategoryInputChanged(searchAreaCategory)" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="searchAreaCategory.checked"
+                    (ionChange)="onSearchAreaCategoryInputChanged(searchAreaCategory)"><core-format-text
+                        [text]="searchAreaCategory.name" /></ion-checkbox>
             </ion-item>
         </ng-container>
         <ng-container *ngIf="!hideCourses && courses.length > 0">
@@ -43,14 +41,13 @@ <h1>{{ 'core.search.filterheader' | translate }}</h1>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label>{{ 'core.search.allcourses' | translate }}</ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="allCourses" [indeterminate]="allCourses === null" (ionChange)="allCoursesUpdated()" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="allCourses" [indeterminate]="allCourses === null"
+                    (ionChange)="allCoursesUpdated()">
+                    {{ 'core.search.allcourses' | translate }}</ion-checkbox>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let course of courses">
-                <ion-label>
-                    <core-format-text [text]="course.shortname" />
-                </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="course.checked" (ionChange)="onCourseInputChanged(course)" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="course.checked"
+                    (ionChange)="onCourseInputChanged(course)"><core-format-text [text]="course.shortname" /></ion-checkbox>
             </ion-item>
         </ng-container>
     </ion-list>

diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
@@ -1,8 +1,8 @@
 <form (ngSubmit)="submitForm($event)" role="search" #searchForm>
     <ion-item class="search-box">
-        <ion-label class="sr-only">{{ placeholder }}</ion-label>
-        <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
-            [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)" />
+        <ion-input [attr.aria-label]="placeholder" type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder"
+            [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"
+            (ionFocus)="focus($event)" />
         <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
             [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
             <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
@@ -1984,3 +1984,14 @@ ion-item.item-label-stacked ion-datetime-button {
     margin-bottom: 8px;
     align-self: self-end;
 }
+
+ion-checkbox,
+ion-radio,
+ion-select,
+ion-toggle,
+ion-textarea,
+ion-input {
+    &:not([label]):not([aria-label]) {
+        background: red !important;
+    }
+}