Add tooltips and alt texts to toolbar buttons

app/index.html

@@ -463,40 +463,52 @@
       </script>
       <div class="toolbar" data-bind="css: { 'toolbar-horizontal': toolbarHorizontal(),
                                              'toolbar-vertical': !toolbarHorizontal() }">
-        <img class="handle-horizontal" src="/svg/handle_horizontal.svg"
+        <img class="tb-horizontal handle-horizontal" src="/svg/handle_horizontal.svg"
-             data-bind="click: toggleToolbarOrientation">
+             data-bind="click: toggleToolbarOrientation"
-        <img class="handle-vertical" src="/svg/handle_vertical.svg"
+             title="Switch Orientation" alt="Switch Orientation">
-             data-bind="click: toggleToolbarOrientation">
+        <img class="tb-vertical handle-vertical" src="/svg/handle_vertical.svg"
+             data-bind="click: toggleToolbarOrientation"
+             title="Switch Orientation" alt="Switch Orientation">
         <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
                                            click: connectDialog.show"
-                      rel="connect" src="/svg/applications-internet.svg">
+                      rel="connect" src="/svg/applications-internet.svg"
+                      title="Connect to Server" alt="Connection">
         <img class="tb-information" rel="information" src="/svg/information_icon.svg"
              data-bind="click: connectionInfo.show,
-                        css: { disabled: !thisUser() }">
+                        css: { disabled: !thisUser() }"
+                        title="Information" alt="Information">
         <div class="divider"></div>
         <img class="tb-mute" data-bind="visible: !selfMute(),
                               click: function () { requestMute(thisUser()) }"
-                      rel="mute" src="/svg/audio-input-microphone.svg">
+                      rel="mute" src="/svg/audio-input-microphone.svg"
+                      title="Mute" alt="Mute">
         <img class="tb-unmute tb-active" data-bind="visible: selfMute,
                               click: function () { requestUnmute(thisUser()) }"
-                      rel="unmute" src="/svg/audio-input-microphone-muted.svg">
+                      rel="unmute" src="/svg/audio-input-microphone-muted.svg"
+                      title="Unmute" alt="Unmute">
         <img class="tb-deaf" data-bind="visible: !selfDeaf(),
                               click: function () { requestDeaf(thisUser()) }"
-                      rel="deaf" src="/svg/audio-output.svg">
+                      rel="deaf" src="/svg/audio-output.svg"
+                      title="Deafen" alt="Deafen">
         <img class="tb-undeaf tb-active" data-bind="visible: selfDeaf,
                               click: function () { requestUndeaf(thisUser()) }"
-                      rel="undeaf" src="/svg/audio-output-deafened.svg">
+                      rel="undeaf" src="/svg/audio-output-deafened.svg"
+                      title="Undeafen" alt="Undeafen">
         <img class="tb-record" data-bind="click: function(){}"
-                      rel="record" src="/svg/media-record.svg">
+                      rel="record" src="/svg/media-record.svg"
+                      title="Record" alt="Record">
         <div class="divider"></div>
         <img class="tb-comment" data-bind="click: commentDialog.show"
-                      rel="comment" src="/svg/toolbar-comment.svg">
+                      rel="comment" src="/svg/toolbar-comment.svg"
+                      title="Comment" alt="Comment">
         <div class="divider"></div>
         <img class="tb-settings" data-bind="click: openSettings"
-                      rel="settings" src="/svg/config_basic.svg">
+                      rel="settings" src="/svg/config_basic.svg"
+                      title="Settings" alt="Settings">
         <div class="divider"></div>
         <img class="tb-sourcecode" data-bind="click: openSourceCode"
-                      rel="Source Code" src="/svg/source-code.svg">
+                      rel="Source Code" src="/svg/source-code.svg"
+                      title="Open Soure Code" alt="Open Source Code">
       </div>
       <div class="chat">
         <script type="text/html" id="log-generic">

app/index.js

@@ -1124,6 +1124,31 @@ function translateEverything() {
   translatePiece('.channel-context-menu .copy-mumble-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_url');
   translatePiece('.channel-context-menu .copy-mumble-web-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_web_url');
   translatePiece('.channel-context-menu .send-message', 'textcontent', {}, 'channelcontextmenu.send_message');
+
+  translatePiece('.toolbar .tb-horizontal', 'attribute', {'name': 'title'}, 'toolbar.orientation');
+  translatePiece('.toolbar .tb-horizontal', 'attribute', {'name': 'alt'}, 'toolbar.orientation');
+  translatePiece('.toolbar .tb-vertical', 'attribute', {'name': 'title'}, 'toolbar.orientation');
+  translatePiece('.toolbar .tb-vertical', 'attribute', {'name': 'alt'}, 'toolbar.orientation');
+  translatePiece('.toolbar .tb-connect', 'attribute', {'name': 'title'}, 'toolbar.connect');
+  translatePiece('.toolbar .tb-connect', 'attribute', {'name': 'alt'}, 'toolbar.connect');
+  translatePiece('.toolbar .tb-information', 'attribute', {'name': 'title'}, 'toolbar.information');
+  translatePiece('.toolbar .tb-information', 'attribute', {'name': 'alt'}, 'toolbar.information');
+  translatePiece('.toolbar .tb-mute', 'attribute', {'name': 'title'}, 'toolbar.mute');
+  translatePiece('.toolbar .tb-mute', 'attribute', {'name': 'alt'}, 'toolbar.mute');
+  translatePiece('.toolbar .tb-unmute', 'attribute', {'name': 'title'}, 'toolbar.unmute');
+  translatePiece('.toolbar .tb-unmute', 'attribute', {'name': 'alt'}, 'toolbar.unmute');
+  translatePiece('.toolbar .tb-deaf', 'attribute', {'name': 'title'}, 'toolbar.deaf');
+  translatePiece('.toolbar .tb-deaf', 'attribute', {'name': 'alt'}, 'toolbar.deaf');
+  translatePiece('.toolbar .tb-undeaf', 'attribute', {'name': 'title'}, 'toolbar.undeaf');
+  translatePiece('.toolbar .tb-undeaf', 'attribute', {'name': 'alt'}, 'toolbar.undeaf');
+  translatePiece('.toolbar .tb-record', 'attribute', {'name': 'title'}, 'toolbar.record');
+  translatePiece('.toolbar .tb-record', 'attribute', {'name': 'alt'}, 'toolbar.record');
+  translatePiece('.toolbar .tb-comment', 'attribute', {'name': 'title'}, 'toolbar.comment');
+  translatePiece('.toolbar .tb-comment', 'attribute', {'name': 'alt'}, 'toolbar.comment');
+  translatePiece('.toolbar .tb-settings', 'attribute', {'name': 'title'}, 'toolbar.settings');
+  translatePiece('.toolbar .tb-settings', 'attribute', {'name': 'alt'}, 'toolbar.settings');
+  translatePiece('.toolbar .tb-sourcecode', 'attribute', {'name': 'title'}, 'toolbar.sourcecode');
+  translatePiece('.toolbar .tb-sourcecode', 'attribute', {'name': 'alt'}, 'toolbar.sourcecode');
 }
 
 async function main() {

loc/en.json

@@ -31,6 +31,19 @@
     "title": "Mumble Voice Conference",
     "connect": "Join Conference"
   },
+  "toolbar": {
+    "orientation": "Switch Orientation",
+    "connect": "Connection",
+    "information": "Information",
+    "mute": "Mute",
+    "unmute": "Unmute",
+    "deaf": "Deafen",
+    "undeaf": "Undeafen",
+    "record": "Record",
+    "comment": "Comment",
+    "settings": "Settings",
+    "sourcecode": "Open Source Code"
+  },
   "usercontextmenu": {
     "mute": "Mute",
     "deafen": "Deafen",