From 7b45a92a60a5cd20e82908000c4dd1f8f86839ac Mon Sep 17 00:00:00 2001
From: Brandon Raitt <administrator@pxoink.net>
Date: Thu, 12 Oct 2017 20:15:33 -0400
Subject: [PATCH] Update various template files to increase accessibility
 support.

Signed-off-by: Brandon Raitt <npm.pxoink@gmail.com>
---
 templates/part.board.headerControls.php |  7 ++++++-
 templates/part.board.mainView.php       |  2 +-
 templates/part.board.sidebarView.php    | 18 ++++++++++--------
 templates/part.boardlist.php            | 21 +++++++++++----------
 templates/part.card.php                 |  6 +++---
 templates/part.navigation.php           |  4 ++--
 6 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/templates/part.board.headerControls.php b/templates/part.board.headerControls.php
index c277e1766..be234b948 100644
--- a/templates/part.board.headerControls.php
+++ b/templates/part.board.headerControls.php
@@ -5,16 +5,21 @@
             ng-blur="status.addStack=false"
             ng-model="newStack.title" required
             maxlength="100" />
-        <button class="button-inline icon icon-add" ng-style="{'opacity':'{{status.addStack ? 1: 0.5}}'}" type="submit"></button>
+        <button class="button-inline icon icon-add" ng-style="{'opacity':'{{status.addStack ? 1: 0.5}}'}" type="submit" title="<?php p($l->t('Submit')); ?>">
+        	<span class="hidden-visually"><?php p($l->t('Submit')); ?></span>
+        </button>
     </form>
 </div>
 
 <a class="button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
     <i class="icon icon-archive"></i>
+    <span class="hidden-visually"><?php p($l->t('Show archived cards')); ?></span>
 </a>
 <a class="button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
     <i class="icon icon-archive"></i>
+    <span class="hidden-visually"><?php p($l->t('Hide archived cards')); ?></span>
 </a>
 <a class="button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
     <i class="icon icon-details"></i>
+    <span class="hidden-visually"><?php p($l->t('Board details')); ?></span>
 </a>
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 58006a701..0269b277a 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -119,7 +119,7 @@
 							   required placeholder="<?php p($l->t('Enter a card title')); ?>"/>
 					</h4>
 				</form>
-				<div ng-if="!status.addCard[s.id]" ng-click="status.addCard[s.id]=true">
+				<div ng-if="!status.addCard[s.id]" ng-click="status.addCard[s.id]=true" title="<?php p($l->t('Add card')); ?>">
 					<i class="icon icon-add{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i>
 				</div>
 			</div>
diff --git a/templates/part.board.sidebarView.php b/templates/part.board.sidebarView.php
index 3c0a659a4..ab89efa03 100644
--- a/templates/part.board.sidebarView.php
+++ b/templates/part.board.sidebarView.php
@@ -5,7 +5,9 @@
         <p>{{ statusservice.text }}</p></div>
 </div>
 <div id="sidebar-header">
-    <a class="icon-close" ui-sref="board" ng-click="sidebar.show=!sidebar.show"> &nbsp;</a>
+    <a class="icon-close" ui-sref="board" ng-click="sidebar.show=!sidebar.show" title="<?php p($l->t('Close')); ?>"> &nbsp;<?php 
+    	?><span class="hidden-visually"><?php p($l->t('Close')); ?></span><?php 
+    ?></a>
     <h3>{{ boardservice.getCurrent().title }}</h3>
 </div>
 
@@ -42,9 +44,9 @@
 				</span>
             </li>
             <li ng-repeat="acl in boardservice.getCurrent().acl track by $index">
-                <span class="icon-loading-small" style="display:none;"></span>
+                <span class="icon-loading-small" style="display:none;" title="<?php p($l->t('Loading')); ?>"></span>
                 <div class="avatardiv" avatar displayname="{{ acl.participant.uid }}" ng-if="acl.type=='user'"></div>
-                <div class="avatardiv" ng-if="acl.type=='group'"><i class="icon icon-{{acl.type}}"></i></div>
+                <div class="avatardiv" ng-if="acl.type=='group'"><i class="icon icon-{{acl.type}}" title="<?php p($l->t('Access for')); ?> {{acl.type}}"></i></div>
 
                 <span class="has-tooltip username">
                     {{ acl.participant.displayname }}
@@ -85,9 +87,9 @@
                             <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="label.color=c" ng-class="{'selected': (c == label.color) }"><br /></div>
                         </div>
                     </div>
-                    <a ng-if="boardservice.canManage() && label.edit" ng-click="labelUpdate(label)" class="icon"><i class="icon icon-checkmark" ></i></a>
-                    <a ng-if="boardservice.canManage() && !label.edit" ng-click="label.edit=true" class="icon"><i class="icon icon-rename" ></i></a>
-                    <a ng-if="boardservice.canManage()" ng-click="labelDelete(label)" class="icon"><i class="icon icon-delete" ></i></a>
+                    <a ng-if="boardservice.canManage() && label.edit" ng-click="labelUpdate(label)" class="icon" title="<?php p($l->t('Update')); ?>"><i class="icon icon-checkmark" ></i><span class="hidden-visually"><?php p($l->t('Update')); ?></span></a>
+                    <a ng-if="boardservice.canManage() && !label.edit" ng-click="label.edit=true" class="icon" title="<?php p($l->t('Edit')); ?>"><i class="icon icon-rename"></i><span class="hidden-visually"><?php p($l->t('Edit')); ?></span></a>
+                    <a ng-if="boardservice.canManage()" ng-click="labelDelete(label)" class="icon" title="<?php p($l->t('Delete')); ?>"><i class="icon icon-delete" ></i><span class="hidden-visually"><?php p($l->t('Delete')); ?></span></a>
                 </li>
                 <li ng-if="status.createLabel">
                     <div class="label-edit">
@@ -100,8 +102,8 @@
                             <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="newLabel.color=c" ng-class="{'selected': (c == newLabel.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
                         </div>
                     </div>
-                    <a ng-click="labelCreate(newLabel)" class="icon"><i class="icon icon-checkmark" ></i></a>
-                    <a ng-click="status.createLabel=false" class="icon"><i class="icon icon-close" ></i></a>
+                    <a ng-click="labelCreate(newLabel)" class="icon" title="<?php p($l->t('Create')); ?>"><i class="icon icon-checkmark" ></i><span class="hidden-visually"><?php p($l->t('Create')); ?></span></a>
+                    <a ng-click="status.createLabel=false" class="icon" title="<?php p($l->t('Close')); ?>"><i class="icon icon-close" ></i><span class="hidden-visually"><?php p($l->t('Close')); ?></span></a>
                 </li>
                 <li ng-if="boardservice.canManage() && !status.createLabel" class="label-create">
                     <a ng-click="status.createLabel=true" class="button"><span class="icon icon-add"></span><br /><span><?php p($l->t('Create a new tag')); ?></span></a>
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index 08beba627..176a86e3e 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -1,8 +1,9 @@
 <div id="controls">
 	<div class="breadcrumb">
 		<div class="crumb svg last">
-			<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>">
-			</a>
+			<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>"><?php 
+				?><span class="hidden-visually"><?php p($l->t('All Boards')); ?></span><?php 
+			?></a>
 			<span style="display: none;"></span>
 		</div>
 	</div>
@@ -43,7 +44,7 @@
 			<td>
 				<div class="hint"></div>
 				<div class="app-popover-menu-utils" ng-if="b.deletedAt == 0" ng-show="!b.status.edit">
-					<button class="icon icon-more button-inline" title="<?php p($l->t('More actions')); ?>"></button>
+					<button class="icon icon-more button-inline" title="<?php p($l->t('More actions')); ?>"><span class="hidden-visually"><?php p($l->t('More actions')); ?></span></button>
 					<div class="popovermenu bubble hidden">
 						<ul>
 							<li ng-click="boardUpdateBegin(b); b.status.edit = true">
@@ -70,16 +71,16 @@
 					</div>
 				</div>
 				<div class="board-edit-controls" ng-show="b.status.edit">
-					<span class="icon icon-checkmark" ng-click="boardUpdate(b)"></span>
-					<span class="icon icon-close" ng-click="boardUpdateReset(b)"></span>
+					<span class="icon icon-checkmark" ng-click="boardUpdate(b)" title="<?php p($l->t('Update')); ?>"><span class="hidden-visually"><?php p($l->t('Update')); ?></span></span>
+					<span class="icon icon-close" ng-click="boardUpdateReset(b)" title="<?php p($l->t('Reset')); ?>"><span class="hidden-visually"><?php p($l->t('Reset')); ?></span></span>
 				</div>
 				<div class="app-popover-menu-utils" ng-if="b.deletedAt > 0">
-					<button class="icon icon-history button-inline" ng-click="boardDeleteUndo(b)" title="Undo board deletion - Otherwise the board will be deleted during the next cronjob run."></button>
+					<button class="icon icon-history button-inline" ng-click="boardDeleteUndo(b)" title="Undo board deletion - Otherwise the board will be deleted during the next cronjob run."><span class="hidden-visually"><?php p($l->t('Undo board deletion - Otherwise the board will be deleted during the next cronjob run.')); ?></span></button>
 				</div>
 			</td>
 		</tr>
 		<tr ng-if="status.filter === '' && !status.addBoard" ng-click="status.addBoard=!status.addBoard" class="board-create">
-			<td><span class="icon icon-add"></span></td>
+			<td><span class="icon icon-add" title=""></span></td>
 			<td colspan="3">
 				<a ng-click="status.addBoard=!status.addBoard"
 				   ng-show="!status.addBoard">
@@ -89,7 +90,7 @@
 		</tr>
 
 		<tr ng-if="status.filter === '' && status.addBoard">
-			<td><span class="icon icon-add"></span></td>
+			<td><span class="icon icon-add" title="<?php p($l->t('Add')); ?>"><span class="hidden-visually"><?php p($l->t('Add')); ?></span></span></td>
 			<td>
 				<form ng-disabled="isAddingList"
 					  class="ng-pristine ng-valid" ng-submit="boardCreate()">
@@ -107,8 +108,8 @@
 			<td></td>
 			<td>
 				<div class="board-edit-controls">
-					<span class="icon icon-checkmark" ng-click="boardCreate()"></span>
-					<span class="icon icon-close" ng-click="status.addBoard=!status.addBoard"></span>
+					<span class="icon icon-checkmark" ng-click="boardCreate()" title="<?php p($l->t('Create')); ?>"><span class="hidden-visually"><?php p($l->t('Create')); ?></span></span>
+					<span class="icon icon-close" ng-click="status.addBoard=!status.addBoard" title="<?php p($l->t('Close')); ?>"><span class="hidden-visually"><?php p($l->t('Close')); ?></span></span>
 				</div>
 			</td>
 		</tr>
diff --git a/templates/part.card.php b/templates/part.card.php
index 0c01cea13..c179a0439 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -1,6 +1,6 @@
 <div id="board-status" ng-if="statusservice.active">
 	<div id="emptycontent">
-		<div class="icon-{{ statusservice.icon }}"></div>
+		<div class="icon-{{ statusservice.icon }}" title="<?php p($l->t('Status')); ?>"><span class="hidden-visually"><?php p($l->t('Status')); ?></span></div>
 		<h2>{{ statusservice.title }}</h2>
 		<p>{{ statusservice.text }}</p></div>
 </div>
@@ -81,14 +81,14 @@
 	<div class="duedate">
 		<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" ng-disabled="(boardservice.isArchived() || card.archived)" />
 		<input class="timepicker-input medium focus" type="text" placeholder="00:00" ng-disabled="!cardservice.getCurrent().duedate || (boardservice.isArchived() || card.archived)" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
-		<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
+		<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
 	</div>
 
 	<div class="section-header">
 		<h4>
 			<div>
 				<?php p($l->t('Description')); ?>
-				<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
+				<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
 			</div>
 			<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
 			<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
diff --git a/templates/part.navigation.php b/templates/part.navigation.php
index c0e41187d..46615fff5 100644
--- a/templates/part.navigation.php
+++ b/templates/part.navigation.php
@@ -9,8 +9,8 @@
 		<a href="#!/board/{{b.id}}/" ng-if="!b.status.edit">{{ b.title }}</a>
 		<div class="app-navigation-entry-utils" ng-show="!b.status.edit" style="position:absolute;">
 			<ul>
-				<li class="app-navigation-entry-utils-menu-share svg" ng-if="b.shared>0"><i class="icon icon-share" title="<?php p($l->t('Shared with you')); ?>"> </i></li>
-				<li class="app-navigation-entry-utils-menu-button svg" ng-show="!status.deleteUndo[b.id]"><button class="icon-more"></button></li>
+				<li class="app-navigation-entry-utils-menu-share svg" ng-if="b.shared>0"><i class="icon icon-share" title="<?php p($l->t('Shared with you')); ?>"><span class="hidden-visually"><?php p($l->t('Shared with you')); ?></span></i></li>
+				<li class="app-navigation-entry-utils-menu-button svg" ng-show="!status.deleteUndo[b.id]"><button class="icon-more" title="<?php p($l->t('View more')); ?>"><span class="hidden-visually"><?php p($l->t('View more')); ?></span></button></li>
 			</ul>
 		</div>
 		<div class="app-navigation-entry-menu app-navigation-noclose" ng-show="!b.status.edit">