MOBILE-2963 message: Improve accessibility in messaging

main
Dani Palou 2019-04-26 09:02:17 +02:00
parent df20087b92
commit a43f0bb5fc
7 changed files with 15 additions and 9 deletions

View File

@ -177,6 +177,7 @@
"addon.messages.contactname": "local_moodlemobileapp",
"addon.messages.contactrequestsent": "message",
"addon.messages.contacts": "message",
"addon.messages.conversationactions": "message",
"addon.messages.decline": "message",
"addon.messages.deleteallconfirm": "message",
"addon.messages.deleteallselfconfirm": "message",
@ -198,6 +199,7 @@
"addon.messages.messagepreferences": "message",
"addon.messages.messages": "message",
"addon.messages.muteconversation": "message",
"addon.messages.mutedconversation": "message",
"addon.messages.newmessage": "message",
"addon.messages.newmessages": "local_moodlemobileapp",
"addon.messages.nocontactrequests": "message",

View File

@ -16,6 +16,7 @@
"contactname": "Contact name",
"contactrequestsent": "Contact request sent",
"contacts": "Contacts",
"conversationactions": "Conversation actions menu",
"decline": "Decline",
"deleteallconfirm": "Are you sure you would like to delete this entire conversation? This will not delete it for other conversation participants.",
"deleteallselfconfirm": "Are you sure you would like to delete this entire personal conversation?",
@ -37,6 +38,7 @@
"messagepreferences": "Message preferences",
"messages": "Messages",
"muteconversation": "Mute",
"mutedconversation": "Muted conversation",
"newmessage": "New message",
"newmessages": "New messages",
"nocontactrequests": "No contact requests",

View File

@ -1,16 +1,16 @@
<ion-header>
<ion-navbar core-back-button>
<ion-title>
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt="" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation" [siteId]="siteId || null">
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" [alt]="title" onError="this.src='assets/img/group-avatar.png'" core-external-content role="presentation" [siteId]="siteId || null">
<ion-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" core-user-avatar [user]="otherMember" [linkProfile]="false" [checkOnline]="otherMember.showonlinestatus" item-start (click)="showInfo && viewInfo()"></ion-avatar>
<core-format-text [text]="title" (click)="showInfo && !isGroup && viewInfo()"></core-format-text>
<core-icon *ngIf="conversation && conversation.isfavourite" name="fa-star"></core-icon>
<core-icon *ngIf="conversation && conversation.ismuted" name="volume-off"></core-icon>
<core-icon *ngIf="conversation && conversation.isfavourite" name="fa-star" [label]="'core.favourites' | translate"></core-icon>
<core-icon *ngIf="conversation && conversation.ismuted" name="volume-off" [label]="'addon.messages.mutedconversation' | translate"></core-icon>
</ion-title>
<ion-buttons end></ion-buttons>
</ion-navbar>
<core-navbar-buttons end>
<core-context-menu>
<core-context-menu [aria-label]="'addon.messages.conversationactions' | translate">
<core-context-menu-item [hidden]="isSelf || !showInfo || isGroup" [priority]="1000" [content]="'addon.messages.info' | translate" (action)="viewInfo()" iconAction="information-circle"></core-context-menu-item>
<core-context-menu-item [hidden]="isSelf || !showInfo || !isGroup" [priority]="1000" [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" iconAction="information-circle"></core-context-menu-item>
<core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800" [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' : 'addon.messages.addtofavourites') | translate" (action)="changeFavourite($event)" [closeOnClick]="false" [iconAction]="favouriteIcon"></core-context-menu-item>

View File

@ -101,7 +101,7 @@
<h2>
<core-format-text [text]="conversation.name"></core-format-text>
<core-icon name="fa-ban" *ngIf="conversation.isblocked" [label]="'addon.messages.contactblocked' | translate"></core-icon>
<core-icon *ngIf="conversation.ismuted" name="volume-off"></core-icon>
<core-icon *ngIf="conversation.ismuted" name="volume-off" [label]="'addon.messages.mutedconversation' | translate"></core-icon>
</h2>
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
<ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge>

View File

@ -177,6 +177,7 @@
"addon.messages.contactname": "Contact name",
"addon.messages.contactrequestsent": "Contact request sent",
"addon.messages.contacts": "Contacts",
"addon.messages.conversationactions": "Conversation actions menu",
"addon.messages.decline": "Decline",
"addon.messages.deleteallconfirm": "Are you sure you would like to delete this entire conversation? This will not delete it for other conversation participants.",
"addon.messages.deleteallselfconfirm": "Are you sure you would like to delete this entire personal conversation?",
@ -198,6 +199,7 @@
"addon.messages.messagepreferences": "Message preferences",
"addon.messages.messages": "Messages",
"addon.messages.muteconversation": "Mute",
"addon.messages.mutedconversation": "Muted conversation",
"addon.messages.newmessage": "New message",
"addon.messages.newmessages": "New messages",
"addon.messages.nocontactrequests": "No contact requests",

View File

@ -31,10 +31,10 @@ import { Subject } from 'rxjs';
})
export class CoreContextMenuComponent implements OnInit, OnDestroy {
@Input() icon?: string; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
@Input() title?: string; // Aria label and text to be shown on the top of the popover.
@Input() title?: string; // Text to be shown on the top of the popover.
@Input('aria-label') ariaLabel?: string; // Aria label to be shown on the top of the popover.
hideMenu = true; // It will be unhidden when items are added.
ariaLabel: string;
expanded = false;
protected items: CoreContextMenuItemComponent[] = [];
protected itemsMovedToParent: CoreContextMenuItemComponent[] = [];
@ -70,7 +70,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
*/
ngOnInit(): void {
this.icon = this.icon || 'more';
this.ariaLabel = this.title || this.translate.instant('core.info');
this.ariaLabel = this.ariaLabel || this.title || this.translate.instant('core.info');
}
/**

View File

@ -1,6 +1,6 @@
<ion-list [id]="uniqueId" role="menu">
<ion-list-header *ngIf="title">{{title}}</ion-list-header>
<a ion-item text-wrap *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden" [attr.detail-none]="!item.href || item.iconAction" role="menuitem" [attr.aria-controls]="uniqueId">
<a ion-item text-wrap *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden" [attr.detail-none]="!item.href || item.iconAction" role="menuitem">
<core-icon *ngIf="item.iconDescription" [name]="item.iconDescription" [label]="item.ariaDescription" item-start></core-icon>
<core-format-text [clean]="true" [text]="item.content"></core-format-text>
<core-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction" item-end></core-icon>