Merge pull request #339 from deckgo/accessibility

feat: improve avatars accessbility

Author: peterpeterparker

studio/src/app/components/core/app-avatar/app-avatar.tsx

@@ -9,15 +9,16 @@ import {Component, Prop, h} from '@stencil/core';
 export class AppAvatar {
 
     @Prop() src: string;
+    @Prop() ariaLabel: string;
 
     render() {
         if (this.src) {
             return <ion-avatar>
-                <img src={this.src}/>
+                <img src={this.src} alt={this.ariaLabel}/>
             </ion-avatar>
         } else {
             return <ion-avatar>
-                <ion-icon name="person" md="md-person" ios="md-person"></ion-icon>
+                <ion-icon name="person" md="md-person" ios="md-person" aria-label={this.ariaLabel}></ion-icon>
             </ion-avatar>
         }
     }

studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx

@@ -107,7 +107,7 @@ export class AppNavigationActions {
 
     private renderLoggedIn() {
         if (Utils.isLoggedIn(this.authUser) && this.photoUrlLoaded) {
-            return <a class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)}>
+            return <a class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)} aria-label="Open menu">
                 <app-avatar src={this.photoUrl}></app-avatar>
             </a>;
         } else {

studio/src/app/components/core/app-user-info/app-user-info.tsx

@@ -79,7 +79,7 @@ export class AppUserInfo {
         if (this.authUser) {
             return <ion-grid>
                 <ion-row class="ion-align-items-center">
-                    <ion-col size={'' + this.avatarColSize}><app-avatar src={this.photoUrl}></app-avatar></ion-col>
+                    <ion-col size={'' + this.avatarColSize}><app-avatar src={this.photoUrl} aria-hidden="true"></app-avatar></ion-col>
                     <ion-col size={'' + (12 - this.avatarColSize)} class="user-info">
                         <ion-label>{this.name}</ion-label>
                         <ion-label>{!this.authUser.anonymous && this.apiUser && this.apiUser.username ? '@' + this.apiUser.username : undefined}</ion-label>

studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx

@@ -157,7 +157,7 @@ export class AppFeedCard {
 
     private renderAuthorAvatar() {
         if (this.authorPhotoUrl) {
-            return <app-avatar src={this.authorPhotoUrl}></app-avatar>
+            return <app-avatar src={this.authorPhotoUrl} aria-label={this.author}></app-avatar>
         } else {
             return undefined;
         }

studio/src/app/pages/core/about/app-team/app-team.tsx

@@ -16,7 +16,7 @@ export class AppTeam {
 
                     <div class="team">
                         <div>
-                            <app-avatar src="https://pbs.twimg.com/profile_images/941274539979366400/bTKGkd-O_400x400.jpg"></app-avatar>
+                            <app-avatar src="https://pbs.twimg.com/profile_images/941274539979366400/bTKGkd-O_400x400.jpg" aria-label="David Dal Busco"></app-avatar>
 
                             <h2>David Dal Busco</h2>
 
@@ -46,7 +46,7 @@ export class AppTeam {
                         </div>
 
                         <div>
-                            <app-avatar src="https://pbs.twimg.com/profile_images/588789970690658305/Ru9JiWks_400x400.png"></app-avatar>
+                            <app-avatar src="https://pbs.twimg.com/profile_images/588789970690658305/Ru9JiWks_400x400.png" arial-label="Nicolas Mattia"></app-avatar>
 
                             <h2>Nicolas Mattia</h2>
 

studio/src/app/pages/core/app-settings/app-settings.tsx

@@ -483,7 +483,7 @@ export class AppHome {
                 <ion-label>Profile picture</ion-label>
             </ion-item>
             <div class="avatar">
-                <app-avatar src={this.user && this.user.data ? this.user.data.photo_url : undefined}></app-avatar>
+                <app-avatar src={this.user && this.user.data ? this.user.data.photo_url : undefined} aria-label="Profile picture"></app-avatar>
                 <input id="inputProfilePicture" type="file" accept="image/x-png,image/jpeg,image/gif" onChange={() => this.selectProfilePicture()} disabled={this.saving}/>
             </div>
             <p><small>Tips: if you would update your profile picture, ideally use a <strong>square</strong> image for that purpose</small></p>

studio/src/components.d.ts

@@ -23,6 +23,7 @@ export namespace Components {
   interface AppAbout {}
   interface AppAddSlideAction {}
   interface AppAvatar {
+    'ariaLabel': string;
     'src': string;
   }
   interface AppCode {
@@ -577,6 +578,7 @@ declare namespace LocalJSX {
     'onActionOpenSlideAdd'?: (event: CustomEvent<UIEvent>) => void;
   }
   interface AppAvatar extends JSXBase.HTMLAttributes<HTMLAppAvatarElement> {
+    'ariaLabel'?: string;
     'src'?: string;
   }
   interface AppCode extends JSXBase.HTMLAttributes<HTMLAppCodeElement> {