Merge pull request #1525 from ndarilek/accessibility-fixes

Various accessibility fixes

packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html

@@ -1,7 +1,7 @@
 <template name="flexTabBar">
 	{{#each buttons}}
 		<div class="tab-button {{active}}" data-template="{{template}}" data-width="{{width}}" title="{{title}}">
-			<i class="{{icon}}"></i>
+			<i class="{{icon}}" aria-label="{{title}}" role="button" tabindex="0"></i>
 		</div>
 	{{/each}}
 </template>

packages/rocketchat-ui-master/master/main.html

@@ -55,7 +55,7 @@
 					<div class="connection-status">
 						{{> status}}
 					</div>
-					<div class="flex-tab-bar">
+					<div class="flex-tab-bar" role="toolbar">
 						{{> flexTabBar}}
 					</div>
 					<div class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}}">

packages/rocketchat-ui-message/message/message.html

@@ -9,8 +9,8 @@
 				class="time">
 				{{time}}
 			</span>
-			<span class="edited" title='{{_ "edited"}} at {{editTime}} {{_ "by"}} {{editedBy}}'>
-				<i class="icon-edit"></i>
+			<span class="edited" title='{{_ "edited"}} at {{editTime}} {{_ "by"}} {{editedBy}}' >
+				<i class="icon-edit" aria-label="{{_ "Edited"}}"></i>
 				{{_ "by"}}
 				<a class="thumb thumb-small user-card-message" href="#" data-username="{{editedBy}}" tabindex="1">
 					{{> avatar username=editedBy}}
@@ -24,12 +24,12 @@
 		{{/if}}
 		{{#if actions.length}}
 			<div class="message-cog-container">
-				<i class="icon-cog message-cog"></i>
+				<i class="icon-cog message-cog" aria-label="{{_ "Actions"}}"></i>
 				<div class="message-dropdown">
 					<ul>
-						<li class="message-dropdown-close"><i class=" icon-angle-left"></i></li>
+						<li class="message-dropdown-close"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
 						{{#each actions}}
-							<li class="{{id}} {{classes}} message-action" title="{{_ i18nLabel}}"><i class="{{icon}}"></i></li>
+							<li class="{{id}} {{classes}} message-action" title="{{_ i18nLabel}}"><i class="{{icon}}" aria-label="{{_ i18nLabel}}"></i></li>
 						{{/each}}
 					</ul>
 				</div>

packages/rocketchat-ui-message/message/messageBox.html

@@ -57,8 +57,8 @@
 			</div>
 			{{/if}}
 			<div class="editing-commands" aria-hidden="true" dir="auto">
-				<div class="editing-commands-cancel">{{_ 'Esc_to'}} <a href="">{{_ 'Cancel'}}</a></div>
-				<div class="editing-commands-save">{{_ 'Enter_to'}} <a href="">{{_ 'Save_changes'}}</a></div>
+				<div class="editing-commands-cancel">{{_ 'Esc_to'}} <a href="#">{{_ 'Cancel'}}</a></div>
+				<div class="editing-commands-save">{{_ 'Enter_to'}} <a href="#">{{_ 'Save_changes'}}</a></div>
 			</div>
 		</form>
 	{{else}}

packages/rocketchat-ui-sidenav/side-nav/channels.html

@@ -2,7 +2,7 @@
 	<h3 class="add-room {{isActive}}">
 		{{_ "Channels"}}
 		{{#if hasPermission 'create-c'}}
-			<i class="icon-plus"></i>
+			<i class="icon-plus" aria-label="{{_ "Create channel"}}" role="button"></i>
 		{{/if}}
 	</h3>
 	<ul>

packages/rocketchat-ui-sidenav/side-nav/chatRoomItem.html

@@ -4,12 +4,12 @@
 			{{#if unread}}
 				<span class="unread">{{unread}}</span>
 			{{/if}}
-			<i class="{{roomIcon}} {{userStatus}}"></i>
+			<i class="{{roomIcon}} {{userStatus}}" aria-label=""></i>
 			<span class='name'>{{name}}</span>
 			<span class='opt'>
-				<i class="icon-eye-off hide-room" title="{{_ "Hide_room"}}"></i>
+				<i class="icon-eye-off hide-room" title="{{_ "Hide_room"}}" aria-label="{{_ "Hide_room"}}"></i>
 				{{#if canLeave}}
-					<i class="octicon octicon-sign-out leave-room" title="{{_ "Leave_room"}}"></i>
+					<i class="octicon octicon-sign-out leave-room" title="{{_ "Leave_room"}}" aria-label="{{_ "Leave_room"}}"></i>
 				{{/if}}
 			</span>
 		</a>

packages/rocketchat-ui-sidenav/side-nav/sideNav.html

@@ -1,7 +1,7 @@
 <template name="sideNav">
 	<aside class="side-nav" role="navigation">
 		<header class="header">
-			<div class="account-box">
+			<div class="account-box" aria-label="{{_ "Account"}}" role="region">
 				{{#with myUserInfo}}
 					<div class="info status-{{status}}">
 						{{#if username}}
@@ -36,7 +36,7 @@
 			<div class="unread-rooms top-unread-rooms hidden">
 				{{_ "More_unreads"}} <i class="icon-up-big"></i>
 			</div>
-			<div class="rooms-list">
+			<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
 				<div class="wrapper">
 					{{ > unreadRooms }}
 

packages/rocketchat-ui/views/app/room.coffee

@@ -18,6 +18,11 @@ Template.room.helpers
 		return 'icon-star favorite-room' if sub?.f? and sub.f and favoritesEnabled
 		return 'icon-star-empty'
 
+	favoriteLabel: ->
+		sub = ChatSubscription.findOne { rid: this._id }, { fields: { f: 1 } }
+		return "Unfavorite" if sub?.f? and sub.f and favoritesEnabled
+		return "Favorite"
+
 	subscribed: ->
 		return isSubscribed(this._id)
 

packages/rocketchat-ui/views/app/room.html

@@ -5,12 +5,12 @@
 				{{_ "Drop_to_upload_file"}}
 			</div>
 		</div>
-		<section class="messages-container {{adminClass}}" id="{{windowId}}">
+		<section class="messages-container {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
 			<header class="fixed-title">
 				{{> burger}}
 				<h2>
 					{{#if showToggleFavorite}}
-						<a href="#favorite" class="toggle-favorite"><i class="{{favorite}}"></i></a>
+						<a href="#favorite" class="toggle-favorite"><i class="{{favorite}}" aria-label="{{_ favoriteLabel}}"></i></a>
 					{{/if}}
 					<i class="{{roomIcon}} status-{{userStatus}}"></i>
 					<span class="room-title {{editingTitle}}">{{roomName}}</span>
@@ -25,14 +25,14 @@
 					<div class="upload-progress {{#if error}}upload-error{{/if}}">
 						{{#if error}}
 							{{error}}
-							<a>
+							<a href="##">
 								close
 							</a>
 						{{else}}
 							<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
 							<div class="upload-progress-text">
 								{{name}}... {{percentage}}%
-								<a>
+								<a href="#">
 									cancel
 								</a>
 							</div>