Add ALT tags to images for accessibility. Fixes #2902

web/pgadmin/about/templates/about/index.html

@@ -26,6 +26,7 @@
     <div class="row">
         <div class="col-xs-12 text-right"><img
             src="{{ url_for('static', filename='img/logo-right-128.png') }}"
-            alt="{{ config.APP_NAME }}"></div>
+            alt="{{ config.APP_NAME }} {{ _('logo') }}"
+        ></div>
     </div>
 </div>

web/pgadmin/browser/static/js/wizard.js

@@ -1,6 +1,6 @@
 define(
-    ['underscore', 'backbone', 'sources/pgadmin', 'pgadmin.browser'],
-function(_, Backbone, pgAdmin, pgBrowser) {
+    ['underscore', 'backbone', 'sources/pgadmin', 'pgadmin.browser', 'sources/gettext'],
+function(_, Backbone, pgAdmin, pgBrowser, gettext) {
 
   pgBrowser = pgBrowser || pgAdmin.Browser || {};
 
@@ -61,9 +61,11 @@ function(_, Backbone, pgAdmin, pgBrowser) {
        + "          </div>"
        + "          <% if (this.options.show_header_cancel_btn) { %>"
        + "            <div class='col-sm-2'>"
-       + "              <button class='ajs-close wizard-cancel-event pull-right'></button>"
+       + "              <button class='ajs-close wizard-cancel-event pull-right'"
+       + "                title='" + gettext("Close") + "'></button>"
        + "              <% if (this.options.show_header_maximize_btn) { %>"
-       + "                <button class='ajs-maximize wizard-maximize-event pull-right'></button>"
+       + "                <button class='ajs-maximize wizard-maximize-event pull-right'"
+       + "                  title='" + gettext("Maximize") + "'></button>"
        + "              <% } %>"
        + "            </div>"
        + "          <% } %>"
@@ -72,7 +74,8 @@ function(_, Backbone, pgAdmin, pgBrowser) {
        + "      <div class='wizard-content col-sm-12'>"
        + "        <% if (this.options.show_left_panel) { %>"
        + "          <div class='col-sm-3 wizard-left-panel'>"
-       + "              <img src='<%= this.options.image %>'></div>"
+       + "              <img src='<%= this.options.image %>'"
+       + "                  alt='" + gettext("Left panel logo") + "'></div>"
        + "        <% } %>"
        + "        <div class='col-sm-<% if (this.options.show_left_panel) { %>9<% }"
        + "          else { %>12<% } %> wizard-right-panel'>"
@@ -105,19 +108,21 @@ function(_, Backbone, pgAdmin, pgBrowser) {
        + "      <div class='footer col-sm-12'>"
        + "        <div class='row'>"
        + "          <div class='col-sm-4 wizard-buttons pull-left'>"
-       + "            <button title = 'Help for this dialog.' class='btn btn-default pull-left wizard-help' <%=this.options.wizard_help ? '' : 'disabled' %>>"
+       + "            <button title = '" + gettext("Help for this dialog.") + "'"
+       + "              class='btn btn-default pull-left wizard-help' <%=this.options.wizard_help ? '' : 'disabled' %>>"
        + "              <span class='fa fa-lg fa-question'></span></button>"
        + "          </div>"
        + "          <div class='col-sm-8'>"
        + "            <div class='wizard-buttons'>"
        + "              <button class='btn btn-primary wizard-back' <%=this.options.disable_prev ? 'disabled' : ''%>>"
-       + "                <i class='fa fa-backward'></i>Back</button>"
-       + "              <button class='btn btn-primary wizard-next' <%=this.options.disable_next ? 'disabled' : ''%>>Next"
+       + "                <i class='fa fa-backward'></i>" + gettext("Back") + "</button>"
+       + "              <button class='btn btn-primary wizard-next' <%=this.options.disable_next ? 'disabled' : ''%>>"
+       +                  gettext("Next")
        + "                <i class='fa fa-forward'></i></button>"
        + "              <button class='btn btn-danger wizard-cancel' <%=this.options.disable_cancel ? 'disabled' : ''%>>"
-       + "                <i class='fa fa-lg fa-close'></i>Cancel</button>"
+       + "                <i class='fa fa-lg fa-close'></i>" + gettext("Cancel") + "</button>"
        + "              <button class='btn btn-primary wizard-finish' <%=this.options.disable_finish ? 'disabled' : ''%>>"
-       + "                Finish</button>"
+       +                  gettext("Finish") + "</button>"
        + "            </div>"
        + "          </div>"
        + "        </div>"

web/pgadmin/browser/templates/browser/index.html

@@ -124,7 +124,8 @@ window.onload = function(e){
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand pgadmin_header_logo" onClick="return false;" href="{{ '#' }}">
+            <a class="navbar-brand pgadmin_header_logo" onClick="return false;" href="{{ '#' }}"
+               title="{{ config.APP_NAME }} {{ _('logo') }}">
                 <i class="app-icon {{ config.APP_ICON }}"></i>
                 <span>&nbsp;{{ config.APP_NAME }}</span>
             </a>

web/pgadmin/dashboard/templates/dashboard/welcome_dashboard.html

@@ -5,7 +5,8 @@
                 <legend class="badge">{{ _('Welcome') }}</legend>
             </div>
             <div class="well well-lg">
-                <img src="{{ url_for('dashboard.static', filename='img/welcome_logo.png') }}" alt="pgAdmin 4">
+                <img src="{{ url_for('dashboard.static', filename='img/welcome_logo.png') }}"
+                     alt="{{ config.APP_NAME }} {{ _('logo') }}">
                 <h4>{{ _('Feature rich') }} | {{ _('Maximises PostgreSQL') }} | {{ _('Open Source') }} </h4>
                 <p>
                     {{ _('pgAdmin is an Open Source administration and management tool for the PostgreSQL database. It includes a graphical administration interface, an SQL query tool, a procedural code debugger and much more. The tool is designed to answer the needs of developers, DBAs and system administrators alike.') }}

web/pgadmin/misc/file_manager/static/js/utility.js

@@ -534,7 +534,7 @@ var getFolderInfo = function(path, file_type) {
 
   // Display an activity indicator.
   $('.fileinfo').find('span.activity').html(
-    '<img src="' + loading_icon_url + '"/>'
+    '<img src="' + loading_icon_url + '" alt="' + gettext("Loading...") + '"/>'
   );
 
   var post_data = {

web/pgadmin/misc/file_manager/templates/file_manager/index.html

@@ -37,7 +37,8 @@
     </div>
     <div class="fileinfo">
         <span class="activity">
-          <img src="{{ url_for('static', filename='js/generated/img/load-root.gif') }}">
+          <img src="{{ url_for('static', filename='js/generated/img/load-root.gif') }}"
+               alt="{{ _('Loading...') }}">
         </span>
         <div class="file_listing"></div>
         <div class="upload_file dropzone"></div>

web/pgadmin/templates/security/change_password.html

@@ -8,7 +8,8 @@
         {{ render_field_with_errors(change_password_form.password, "password") }}
         {{ render_field_with_errors(change_password_form.new_password, "password") }}
         {{ render_field_with_errors(change_password_form.new_password_confirm, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Change Password') }}">
+        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Change Password') }}"
+               title="{{ _('Change Password') }}">
     </fieldset>
 </form>
 {% endif %}

web/pgadmin/templates/security/forgot_password.html

@@ -7,7 +7,8 @@
     {{ forgot_password_form.hidden_tag() }}
     <fieldset>
         {{ render_field_with_errors(forgot_password_form.email, "text") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Recover Password') }}">
+        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Recover Password') }}"
+               title="{{ _('Recover Password') }}">
     </fieldset>
 </form>
 {% endif %}

web/pgadmin/templates/security/login_user.html

@@ -8,7 +8,8 @@
     <fieldset>
         {{ render_field_with_errors(login_user_form.email, "text") }}
         {{ render_field_with_errors(login_user_form.password, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Login') }}">
+        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Login') }}"
+               title="{{ _('Login') }}">
         <div class="pgadmin-control-group form-group pg-el-xs-12 user-language">
             <label class="help-block pg-el-sm-3">{{ _("Language") }}</label>
             <div class="pgadmin-controls pg-el-sm-9">

web/pgadmin/templates/security/reset_password.html

@@ -8,7 +8,8 @@
     <fieldset>
         {{ render_field_with_errors(reset_password_form.password, "password") }}
         {{ render_field_with_errors(reset_password_form.password_confirm, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Reset Password') }}">
+        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Reset Password') }}"
+               title="{{ _('Reset Password') }}">
     </fieldset>
 </form>
 {% endif %}

web/pgadmin/templates/security/watermark.html

@@ -1,5 +1,7 @@
 {% block watermark %}
 <div style="position: fixed; bottom: 0; right: 0;">
-    <img src="{{ url_for('static', filename='img/logo-right-256.png') }}" alt="{{ config.APP_NAME }}">
+    <img src="{{ url_for('static', filename='img/logo-right-256.png') }}"
+         alt="{{ config.APP_NAME }} {{ _('logo') }}"
+    >
 </div>
 {% endblock %}