EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3753 a11y: Use ion-items on item-divider with clicks

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-11 11:52:57 +02:00
parent 7353bfac79
commit 064a60ca49
9 changed files with 84 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/addons/messages/pages/group-conversations/group-conversations.html
View File

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

17
src/addons/mod/forum/components/edit-post/edit-post.html
View File

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

16
src/addons/mod/forum/components/post/post.html
View File

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

18
src/addons/mod/forum/pages/new-discussion/new-discussion.html
View File

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

5
src/core/features/block/components/only-title-block/core-block-only-title.html
View File

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

4
src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
View File

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

10
src/theme/theme.base.scss
View File

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

4
src/theme/theme.dark.scss
View File

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

5
src/theme/theme.light.scss
View File

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