From 757274d3158372bca3bb30bbd01a0d1cec229692 Mon Sep 17 00:00:00 2001
From: LameLemon <garybsantos@gmail.com>
Date: Mon, 23 Mar 2020 14:26:50 +0000
Subject: [PATCH] Add alt and title tags for WebUI footer

Improves accessibility of the WebUI. Closes #12219.
---
 src/webui/www/private/index.html        |  8 +++---
 src/webui/www/private/scripts/client.js | 35 ++++++++++++++++++-------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index db056a9e4..e131d8495 100644
--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -218,13 +218,13 @@
                     <td class="statusBarSeparator"></td>
                     <td id="DHTNodes"></td>
                     <td class="statusBarSeparator"></td>
-                    <td><img id="connectionStatus" alt="Connection Status" src="images/skin/firewalled.svg" style="height: 1.5em;" /></td>
+                    <td><img id="connectionStatus" alt="QBT_TR(Connection status)QBT_TR[CONTEXT=MainWindow]" title="QBT_TR(Connection status)QBT_TR[CONTEXT=MainWindow]" src="images/skin/firewalled.svg" style="height: 1.5em;" /></td>
                     <td class="statusBarSeparator"></td>
-                    <td style="cursor:pointer;"><img id="alternativeSpeedLimits" alt="QBT_TR(Alternative speed limits)QBT_TR[CONTEXT=MainWindow]" src="images/slow_off.svg" style="height: 1em;"/></td>
+                    <td style="cursor:pointer;"><img id="alternativeSpeedLimits" alt="QBT_TR(Alternative speed limits)QBT_TR[CONTEXT=MainWindow]" title="QBT_TR(Alternative speed limits)QBT_TR[CONTEXT=MainWindow]" src="images/slow_off.svg" style="height: 1em;"/></td>
                     <td class="statusBarSeparator"></td>
-                    <td class="speedLabel"><img src="images/skin/download.svg" alt="" style="height: 1.4em; padding-right: 5px; margin-bottom: -4px;"><span id="DlInfos"></span></td>
+                    <td class="speedLabel"><img src="images/skin/download.svg" alt="QBT_TR(Download speed icon)QBT_TR[CONTEXT=MainWindow]" style="height: 1.4em; padding-right: 5px; margin-bottom: -4px;"><span id="DlInfos"></span></td>
                     <td class="statusBarSeparator"></td>
-                    <td class="speedLabel"><img src="images/skin/seeding.svg" alt="" style="height: 1.4em; padding-right: 5px; margin-bottom: -3px;"><span id="UpInfos"></span></td>
+                    <td class="speedLabel"><img src="images/skin/seeding.svg" alt="QBT_TR(Upload speed icon)QBT_TR[CONTEXT=MainWindow]" style="height: 1.4em; padding-right: 5px; margin-bottom: -3px;"><span id="UpInfos"></span></td>
                 </tr>
             </table>
         </div>
diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js
index b214b6fec..4acf82e43 100644
--- a/src/webui/www/private/scripts/client.js
+++ b/src/webui/www/private/scripts/client.js
@@ -643,12 +643,23 @@ window.addEvent('load', function() {
             $('TotalQueuedSize').set('html', window.qBittorrent.Misc.friendlyUnit(serverState.total_queued_size, false));
         }
 
-        if (serverState.connection_status == "connected")
-            $('connectionStatus').src = 'images/skin/connected.svg';
-        else if (serverState.connection_status == "firewalled")
-            $('connectionStatus').src = 'images/skin/firewalled.svg';
-        else
-            $('connectionStatus').src = 'images/skin/disconnected.svg';
+        switch (serverState.connection_status) {
+        case 'connected': {
+                $('connectionStatus').src = 'images/skin/connected.svg';
+                $('connectionStatus').alt = 'QBT_TR(Connection status: Connected)QBT_TR[CONTEXT=MainWindow]';
+            }
+            break;
+        case 'firewalled': {
+                $('connectionStatus').src = 'images/skin/firewalled.svg';
+                $('connectionStatus').alt = 'QBT_TR(Connection status: Firewalled)QBT_TR[CONTEXT=MainWindow]';
+            }
+            break;
+        default: {
+                $('connectionStatus').src = 'images/skin/disconnected.svg';
+                $('connectionStatus').alt = 'QBT_TR(Connection status: Disconnected)QBT_TR[CONTEXT=MainWindow]';    
+            }
+            break;
+        }  
 
         if (queueing_enabled != serverState.queueing) {
             queueing_enabled = serverState.queueing;
@@ -681,10 +692,14 @@ window.addEvent('load', function() {
     };
 
     const updateAltSpeedIcon = function(enabled) {
-        if (enabled)
-            $('alternativeSpeedLimits').src = "images/slow.svg";
-        else
-            $('alternativeSpeedLimits').src = "images/slow_off.svg";
+        if (enabled) {
+            $('alternativeSpeedLimits').src = 'images/slow.svg';
+            $('alternativeSpeedLimits').alt = 'QBT_TR(Alternative speed limits: On)QBT_TR[CONTEXT=MainWindow]';
+        }        
+        else {
+            $('alternativeSpeedLimits').src = 'images/slow_off.svg';
+            $('alternativeSpeedLimits').alt = 'QBT_TR(Alternative speed limits: Off)QBT_TR[CONTEXT=MainWindow]';
+        }
     };
 
     $('alternativeSpeedLimits').addEvent('click', function() {