From 064a60ca499daef9b031983e593da9a6efcdb4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 May 2021 11:52:57 +0200
Subject: [PATCH] MOBILE-3753 a11y: Use ion-items on item-divider with clicks

---
 .../group-conversations.html                  | 51 ++++++++++++++-----
 .../forum/components/edit-post/edit-post.html | 17 +++++--
 .../mod/forum/components/post/post.html       | 16 ++++--
 .../pages/new-discussion/new-discussion.html  | 18 +++++--
 .../core-block-only-title.html                |  5 +-
 .../core-siteplugins-only-title-block.html    |  4 +-
 src/theme/theme.base.scss                     | 10 ----
 src/theme/theme.dark.scss                     |  4 +-
 src/theme/theme.light.scss                    |  5 +-
 9 files changed, 84 insertions(+), 46 deletions(-)

diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 518656e04..bbcea3e60 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -32,15 +32,24 @@
                     <ion-badge *ngIf="contactRequestsCount > 0" slot="end">{{contactRequestsCount}}</ion-badge>
                 </ion-item>
                 <!-- Favourite conversations. -->
-                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(favourites)" sticky="true"
+                <ion-item
+                    button
+                    class="ion-text-wrap core-expandable divider"
+                    (click)="toggle(favourites)"
+                    sticky="true"
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="favourites.expanded" role="heading button">
+                    [attr.aria-expanded]="favourites.expanded"
+                    aria-controls="addon-messages-groupconversations-favourite"
+                    role="heading"
+                    detail="false"
+                >
                     <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2></ion-label>
                     <ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
-                </ion-item-divider>
-                <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist>
+                </ion-item>
+                <div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist
+                    id="addon-messages-groupconversations-favourite">
                     <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}">
                     </ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
@@ -55,15 +64,24 @@
                 </ion-item>
 
                 <!-- Group conversations. -->
-                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(group)" sticky="true"
+                <ion-item
+                    button
+                    class="divider ion-text-wrap core-expandable"
+                    (click)="toggle(group)"
+                    sticky="true"
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="group.expanded" role="heading button">
+                    [attr.aria-expanded]="group.expanded"
+                    aria-controls="addon-messages-groupconversations-group"
+                    role="heading"
+                    detail="false"
+                >
                     <ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2></ion-label>
                     <ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
-                </ion-item-divider>
-                <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist>
+                </ion-item>
+                <div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist
+                    id="addon-messages-groupconversations-group">
                     <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}">
                     </ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
@@ -77,17 +95,26 @@
                     <ion-label><ion-spinner></ion-spinner></ion-label>
                 </ion-item>
 
-                <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggle(individual)" sticky="true"
+                <ion-item
+                    button
+                    class="divider ion-text-wrap core-expandable"
+                    (click)="toggle(individual)"
+                    sticky="true"
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
-                    [attr.aria-expanded]="individual.expanded" role="heading button">
+                    [attr.aria-expanded]="individual.expanded"
+                    aria-controls="addon-messages-groupconversations-individual"
+                    role="heading"
+                    detail="false"
+                >
                     <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
                     <ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
-                </ion-item-divider>
-                <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist>
+                </ion-item>
+                <div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist
+                    id="addon-messages-groupconversations-individual">
                     <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}">
                     </ng-container>
                     <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
diff --git a/src/addons/mod/forum/components/edit-post/edit-post.html b/src/addons/mod/forum/components/edit-post/edit-post.html
index 4543b75f4..812574c03 100644
--- a/src/addons/mod/forum/components/edit-post/edit-post.html
+++ b/src/addons/mod/forum/components/edit-post/edit-post.html
@@ -25,18 +25,25 @@
                 (contentChanged)="onMessageChange($event)">
             </core-rich-text-editor>
         </ion-item>
-        <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()" role="heading button"
-            [attr.aria-expanded]="advanced" [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
+        <ion-item
+            button class="divider ion-text-wrap core-expandable"
+            (click)="toggleAdvanced()"
+            role="heading"
+            detail="false"
+            [attr.aria-expanded]="advanced"
+            aria-controls="addon-mod-forum-advanced"
+            [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
+        >
             <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
             <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
             <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
-        </ion-item-divider>
-        <ng-container *ngIf="advanced">
+        </ion-item>
+        <div *ngIf="advanced" id="addon-mod-forum-advanced">
             <core-attachments *ngIf="forum.id && forum.maxattachments > 0"
                 [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [allowOffline]="true" [files]="replyData.files"
                 [component]="component" [componentId]="forum.cmid">
             </core-attachments>
-        </ng-container>
+        </div>
         <ion-grid>
             <ion-row>
                 <ion-col>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 6e99172ef..e149dba0d 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -122,20 +122,26 @@
             <ion-checkbox slot="end" [(ngModel)]="replyData.isprivatereply" name="isprivatereply"></ion-checkbox>
         </ion-item>
         <ng-container *ngIf="forum.id && forum.maxattachments > 0">
-            <ion-item-divider class="core-expandable ion-text-wrap" (click)="toggleAdvanced()" [attr.aria-expanded]="advanced"
-                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') |translate" role="button">
+            <ion-item
+                button
+                class="divider core-expandable ion-text-wrap"
+                (click)="toggleAdvanced()" detail="false"
+                [attr.aria-expanded]="advanced"
+                [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
+                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
+            >
                 <ion-label>
                     <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
-            </ion-item-divider>
-            <ng-container *ngIf="advanced">
+            </ion-item>
+            <div *ngIf="advanced" [id]="'addon-forum-reply-edit-form-advanced-' + uniqueId">
                 <core-attachments
                     [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments"
                     [component]="component" [componentId]="forum.cmid" [allowOffline]="true">
                 </core-attachments>
-            </ng-container>
+            </div>
         </ng-container>
         <ion-grid>
             <ion-row>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index f28a931a9..999ed8eae 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -31,13 +31,21 @@
                     (contentChanged)="onMessageChange($event)">
                 </core-rich-text-editor>
             </ion-item>
-            <ion-item-divider class="ion-text-wrap core-expandable" (click)="toggleAdvanced()" [attr.aria-expanded]="advanced"
-                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') |translate" role="heading button">
+            <ion-item
+                button
+                class="divider ion-text-wrap core-expandable"
+                (click)="toggleAdvanced()"
+                detail="false"
+                [attr.aria-expanded]="advanced"
+                [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
+                role="heading"
+                aria-controls="addon-mod-forum-new-discussion-advanced"
+            >
                 <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
-            </ion-item-divider>
-            <ng-container *ngIf="advanced">
+            </ion-item>
+            <div *ngIf="advanced" id="addon-mod-forum-new-discussion-advanced">
                 <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups">
                     <ion-label>{{ 'addon.mod_forum.posttomygroups' | translate }}</ion-label>
                     <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups"></ion-toggle>
@@ -61,7 +69,7 @@
                     [files]="newDiscussion.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments"
                     [component]="component" [componentId]="forum.cmid" [allowOffline]="true">
                 </core-attachments>
-            </ng-container>
+            </div>
             <ion-item>
                 <ion-label>
                     <ion-row>
diff --git a/src/core/features/block/components/only-title-block/core-block-only-title.html b/src/core/features/block/components/only-title-block/core-block-only-title.html
index 4230b25ec..cfdeb1a04 100644
--- a/src/core/features/block/components/only-title-block/core-block-only-title.html
+++ b/src/core/features/block/components/only-title-block/core-block-only-title.html
@@ -1,4 +1,3 @@
-<ion-item-divider class="ion-text-wrap" (click)="gotoBlock()" role="button">
+<ion-item button class="ion-text-wrap divider" (click)="gotoBlock()" detail="true">
     <ion-label><h2>{{ title | translate }}</h2></ion-label>
-    <ion-icon class="item-detail-icon" name="chevron-forward-outline" slot="end" flip-rtl aria-hidden="true"></ion-icon>
-</ion-item-divider>
+</ion-item>
diff --git a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
index 1a4a3a63c..04564f703 100644
--- a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
+++ b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
@@ -1,5 +1,5 @@
-<ion-item-divider class="ion-text-wrap" detail="true" (click)="gotoBlock()" role="button">
+<ion-item button class="divider ion-text-wrap" detail="true" (click)="gotoBlock()" detail="true">
     <ion-label>
         <h2>{{ title | translate }}</h2>
     </ion-label>
-</ion-item-divider>
+</ion-item>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 7069ba7aa..d10a8615f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -185,16 +185,6 @@ ion-alert.core-nohead {
     }
 }
 
-// Ionic item divider.
-ion-item-divider {
-    .item-detail-icon {
-        color: var(--ion-item-detail-icon-color);
-        font-size: var(--ion-item-detail-icon-font-size);
-        opacity: var(--ion-item-detail-icon-opacity);
-        padding-inline-end: 16px;
-    }
-}
-
 // Ionic list.
 ion-list.list-md {
     padding: 0;
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 25b8887cc..ef871c0e6 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -67,8 +67,8 @@
     }
 
     --ion-item-background: #{$ion-item-background-dark};
-    --ion-item-detail-icon-color: var(--white);
-    ion-item-divider {
+    --ion-item-detail-icon-: var(--white);
+    ion-item-divider, ion-item.divider {
         --background: var(--black);
         --color: var(--white);
     }
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 5ffcbe996..8bd13bd09 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -172,10 +172,11 @@
     }
 
     --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
-    ion-item-divider {
+    ion-item-divider, ion-item.divider {
         --background: var(--gray-lighter);
         --color: inherit;
-        min-height: var(--item-divider-min-height);
+        --min-height: var(--item-divider-min-height);
+        min-height: var(--min-height);
     }
 
     --core-combobox-background: var(--ion-item-background);