MOBILE-3745 buttons: Add min target size to buttons

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -1,4 +1,4 @@
-<ion-item-divider>
+<ion-item-divider sticky="true">
     <ion-label>
         <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     </ion-label>

src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html

@@ -1,4 +1,4 @@
-<ion-item-divider>
+<ion-item-divider sticky="true">
     <ion-label>
         <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
     </ion-label>

src/addons/mod/quiz/pages/player/player.html

@@ -10,8 +10,9 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError" (click)="showConnectionError($event)"
+            <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
-                [attr.aria-label]="'addon.mod_quiz.connectionerror' | translate" aria-haspopup="dialog">
+                (click)="showConnectionError($event)" [attr.aria-label]="'addon.mod_quiz.connectionerror' | translate"
+                aria-haspopup="dialog">
                 <ion-icon name="fas-exclamation-circle" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
             <ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
@@ -30,7 +31,8 @@
             </core-timer>
         </ion-title>
         <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)" [attr.aria-label]="'core.previous' | translate">
+            <ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
+                [attr.aria-label]="'core.previous' | translate">
                 <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
             <ion-button *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [attr.aria-label]="'core.next' | translate">

src/core/components/send-message-form/core-send-message-form.html

@@ -1,11 +1,9 @@
 <form #messageForm>
     <textarea class="core-send-message-input" [autofocus]="showKeyboard" [placeholder]="placeholder" rows="1" core-auto-rows
-        [(ngModel)]="message" name="message" (onResize)="textareaResized()" (keydown.enter)="enterClicked($event)"
+        [(ngModel)]="message" name="message" (onResize)="textareaResized()" (keyup.enter)="enterClicked($event)"
-        (keydown.control.enter)="enterClicked($event, 'control')" (keydown.meta.enter)="enterClicked($event, 'meta')"></textarea>
+        (keyup.control.enter)="enterClicked($event, 'control')" (keyup.meta.enter)="enterClicked($event, 'meta')"></textarea>
-    <ion-buttons>
+    <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled"
-        <ion-button fill="clear" type="submit" [disabled]="!message || sendDisabled"
+        [attr.aria-label]="'core.send' | translate" [core-suppress-events] (click)="submitForm($event)">
-            [attr.aria-label]="'core.send' | translate" [core-suppress-events] (onClick)="submitForm($event)">
+        <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
-            <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
+    </ion-button>
-        </ion-button>
-    </ion-buttons>
 </form>

src/core/components/send-message-form/send-message-form.scss

@@ -6,28 +6,19 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin-top: 5px;
-    margin-bottom: 5px;
   }
 
   .core-send-message-input {
     appearance: none;
     display: block;
     width: 100%;
-    min-height: 28px;
     border: 0;
     font-family: inherit;
     background: var(--core-send-message-input-background);
     color: var(--core-send-message-input-color);
-    border-radius: 5px;
+    border-radius: 21px;
-    margin: 0 5px;
+    line-height: 20px;
-  }
+    padding: 9px 12px 11px;
-
+    margin: 5px 10px;
-  .core-send-message-button {
-    margin: 0;
-    padding: 0;
-    display: none;
-    min-height: 0;
-    align-self: self-end;
   }
 }

src/core/features/login/pages/sites/sites.html

@@ -7,7 +7,8 @@
         <ion-title>{{ 'core.settings.sites' | translate }}</ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
+            <ion-button fill="clear" *ngIf="sites && sites.length > 0" (click)="toggleDelete()"
+                [attr.aria-label]="'core.delete' | translate">
                 <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
             </ion-button>
             <ion-button router-direction="forward" routerLink="/settings"

src/theme/theme.base.scss

@@ -124,6 +124,27 @@ ion-button.button-small ion-icon.faicon[slot] {
     transform: scaleX(-1);
 }
 
+// Buttons.
+ion-button {
+    min-height: var(--a11y-min-target-size);
+    min-width: var(--a11y-min-target-size);
+}
+
+[role="button"] {
+    cursor: pointer;
+
+    [disabled],
+    [aria-disabled="true"] {
+        cursor: auto;
+    }
+}
+
+.core-iframe-help ion-button {
+    text-transform: none;
+    text-decoration: underline;
+    --color: initial;
+}
+
 // Ionic alert.
 ion-alert.core-alert-network-error .alert-head,
 div.core-iframe-network-error {
@@ -452,6 +473,10 @@ ion-select::part(text) {
     }
 }
 
+textarea {
+    min-height: var(--a11y-min-target-size);
+}
+
 textarea:not([core-auto-rows]) {
     height: 200px;
 }
@@ -468,14 +493,6 @@ ion-back-button.md::part(text) {
     display: none;
 }
 
-[role="button"] {
-    cursor: pointer;
-
-    [disabled],
-    [aria-disabled="true"] {
-        cursor: auto;
-    }
-}
 
 .core-media-adapt-width {
     max-width: 100%;
@@ -488,9 +505,3 @@ img.core-media-adapt-width {
 audio.core-media-adapt-width {
     width: 100%;
 }
-
-.core-iframe-help ion-button {
-    text-transform: none;
-    text-decoration: underline;
-    --color: initial;
-}

src/theme/theme.light.scss

@@ -62,6 +62,9 @@
         @include generate-color($color-name);
     }
 
+    // Accessibility vars.
+    --a11y-min-target-size: 44px;
+
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: 58,58,58;
     --ion-card-color: var(--ion-text-color);
@@ -156,6 +159,7 @@
     ion-item-divider {
         --background: var(--gray-lighter);
         --color: inherit;
+        min-height: calc(var(--a11y-min-target-size) + 8px);
     }
 
     --core-combobox-background: var(--custom-combobox-background, var(--ion-item-background));
@@ -221,4 +225,5 @@
     --core-question-feedback-background-color: var(--yellow-light);
 
     --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
+
 }