From 312a87477ec4a0cf4e1ae00375f5ff29c3c2a182 Mon Sep 17 00:00:00 2001
From: Kenneth Skovhede <kenneth@hexad.dk>
Date: Tue, 25 Oct 2016 22:36:07 +0200
Subject: [PATCH] Updated HTML markup to include additional alt-tags to assist
 screen readers. This fixes #2040

---
 .../webroot/ngax/templates/restorefilepicker.html      | 10 +++++-----
 .../webroot/ngax/templates/sourcefolderpicker.html     | 10 +++++-----
 .../webroot/ngax/templates/targetfolderpicker.html     |  8 ++++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/Duplicati/Server/webroot/ngax/templates/restorefilepicker.html b/Duplicati/Server/webroot/ngax/templates/restorefilepicker.html
index e46fd5c1c..3c7e98228 100644
--- a/Duplicati/Server/webroot/ngax/templates/restorefilepicker.html
+++ b/Duplicati/Server/webroot/ngax/templates/restorefilepicker.html
@@ -1,12 +1,12 @@
 <ul dx-start-with="treedata" class="tree-view">
   <li ng-repeat="node in $dxPrior.children" ng-class="{hidden: node.invisible || (node.hidden &amp;&amp; !ngShowHidden)}">
-      <div ng-class="{selected: node.selected}">
-          <a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
-        <a class="check" ng-click="toggleCheck(node)" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}"></a>
-          <a class="type {{node.iconCls}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
+      <div ng-class="{selected: node.selected}" alt="{{node.selected ? 'selected' : 'not selected'}}>
+          <a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}" alt="{{node.expanded ? 'expanded' : 'contracted'}}"></a>
+        <a class="check" ng-click="toggleCheck(node)" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}" alt="{{node.include == ' ' ? 'partially included' : (node.include == '-' ? 'excluded' : (node.include == '+' ? 'included' : 'not checked'))}}"></a>
+          <a class="type {{node.iconCls}}" alt="{{loading ? 'loading' : node.entrytype}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
 
           <span ng-click="toggleSelected(node)" ng-bind-html="node.text | highlight:ngSearchFilter"></span>
     </div>
-    <ul ng-class="{expanded: node.expanded}" dx-connect="node"/>
+    <ul ng-class="{expanded: node.expanded}" dx-connect="node" alt="{{node.expanded ? 'expanded' : 'contracted'}}"/>
   </li>
 </ul>
diff --git a/Duplicati/Server/webroot/ngax/templates/sourcefolderpicker.html b/Duplicati/Server/webroot/ngax/templates/sourcefolderpicker.html
index 62064b488..5ea095042 100644
--- a/Duplicati/Server/webroot/ngax/templates/sourcefolderpicker.html
+++ b/Duplicati/Server/webroot/ngax/templates/sourcefolderpicker.html
@@ -1,12 +1,12 @@
 <ul dx-start-with="treedata" class="tree-view">
   <li ng-repeat="node in $dxPrior.children" ng-class="{hidden: (node.hidden &amp;&amp; !ngShowHidden)}">
-      <div ng-class="{selected: node.selected}">
-          <a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
-          <a class="check" ng-click="toggleCheck(node)" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}"></a>
-          <a class="type {{node.iconCls}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
+      <div ng-class="{selected: node.selected}" alt="{{node.selected ? 'selected' : 'not selected'}}">
+          <a class="nav" ng-click="toggleExpanded(node)" alt="{{node.expanded ? 'expanded' : 'contracted'}}" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
+          <a class="check" ng-click="toggleCheck(node)" alt="{{node.include == ' ' ? 'partially included' : (node.include == '-' ? 'excluded' : (node.include == '+' ? 'included' : 'not checked'))}}" ng-class="{include: node.include == '+', exclude: node.include == '-', partial: node.include == ' ', root: node.root}"></a>
+          <a class="type {{node.iconCls}}" alt="{{loading ? 'loading' : node.entrytype}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
 
           <span ng-click="toggleSelected(node)" title="{{ node.tooltip }}">{{ node.text }}</span>
     </div>
-    <ul ng-class="{expanded: node.expanded, include: node.include, exclude: node.exclude}" dx-connect="node"/>
+    <ul ng-class="{expanded: node.expanded, include: node.include, exclude: node.exclude}" alt="{{node.include == '+' ? 'included' : (node.include == '-' ? 'excluded' : 'partially included')}}" dx-connect="node"/>
   </li>
 </ul>
diff --git a/Duplicati/Server/webroot/ngax/templates/targetfolderpicker.html b/Duplicati/Server/webroot/ngax/templates/targetfolderpicker.html
index 4bb2fbba6..eae9bb1ff 100644
--- a/Duplicati/Server/webroot/ngax/templates/targetfolderpicker.html
+++ b/Duplicati/Server/webroot/ngax/templates/targetfolderpicker.html
@@ -1,11 +1,11 @@
 <ul dx-start-with="treedata" class="tree-view">
   <li ng-repeat="node in $dxPrior.children" ng-class="{hidden: node.invisible || (node.hidden &amp;&amp; !ngShowHidden)}">
-      <div ng-class="{selected: node.selected}">
-          <a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}"></a>
-          <a class="type {{node.iconCls}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
+      <div ng-class="{selected: node.selected}" alt="{{node.selected ? 'selected' : 'not selected'}}">
+          <a class="nav" ng-click="toggleExpanded(node)" ng-class="{expanded: node.expanded, leaf: node.leaf}" alt="{{node.expanded ? 'expanded' : 'contracted'}}"></a>
+          <a class="type {{node.iconCls}}" alt="{{loading ? 'loading' : node.entrytype}}" ng-class="{invisible: node.hidden, loading: node.loading}"></a>
 
           <span ng-click="toggleSelected(node)">{{ node.text }}</span>
     </div>
-    <ul ng-class="{expanded: node.expanded}" dx-connect="node"/>
+    <ul ng-class="{expanded: node.expanded}" alt="{{node.expanded ? 'expanded' : 'contracted'}}" dx-connect="node"/>
   </li>
 </ul>