From 6586be5158f49b76d0d578ca3642a5af42e8d5b3 Mon Sep 17 00:00:00 2001
From: Ganesh Jaybhay <ganesh.jaybhay@enterprisedb.com>
Date: Thu, 12 Mar 2020 11:09:29 +0530
Subject: [PATCH] =?UTF-8?q?Fixed=20some=20accessibility=C2=A0issues:=201)?=
 =?UTF-8?q?=20Screen=20reader=20to=20read=20elements=20in=20radio=20modern?=
 =?UTF-8?q?=20control.=202)=20Aria-label=20additions=20at=20few=20missing?=
 =?UTF-8?q?=20places.=203)=20Radiocontrol=20to=20have=20different=20ids=20?=
 =?UTF-8?q?for=20each=20option.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/pgadmin/static/js/backform.pgadmin.js      | 9 +++++----
 web/pgadmin/static/js/backgrid.pgadmin.js      | 8 ++++++--
 web/pgadmin/static/vendor/backform/backform.js | 4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 3090fd254..a1c898890 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -496,13 +496,13 @@ define([
       e.stopPropagation();
     },
     template: _.template([
-      '<label class="<%=controlLabelClassName%>"><%=label%></label>',
+      '<label class="<%=controlLabelClassName%>" id="<%=cId%>_grplabel"><%=label%></label>',
       '<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
-      ' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" >',
+      ' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" role="radiogroup" aria-labelledby="<%=cId%>_grplabel">',
       '  <% for (var i=0; i < options.length; i++) { %>',
       '  <% var option = options[i]; %>',
-      '  <label class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
-      '    <i class="fa fa-check  <% if (option.value != value) { %>visibility-hidden <%}%>"></i>',
+      '  <label role="radio" class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
+      '    <i class="fa fa-check  <% if (option.value != value) { %>visibility-hidden <%}%>" role="img"></i>',
       '    <input type="radio" name="<%=name%>" autocomplete="off" value=<%-formatter.fromRaw(option.value)%> <% if (option.value == value) { %> checked<%}%> <% if (option.disabled || disabled) { %> disabled <%}%>> <%-option.label%>',
       '  </label>',
       '  <% } %>',
@@ -540,6 +540,7 @@ define([
         required: evalF(data.required, data, this.model),
       }); // Clean up first
 
+      data.cId = data.cId || _.uniqueId('pgC_');
       data.options = _.isFunction(data.options) ?
         data.options.apply(data, [this.model]) : data.options;
 
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index bb249268e..e82da8bec 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -432,7 +432,7 @@ define([
 
         if (editable) {
           this.$el.html(
-            '<i class=\'fa fa-pencil-square subnode-edit-in-process\' title=\'' + _('Edit row') + '\'></i>'
+            '<i class=\'fa fa-pencil-square subnode-edit-in-process\' title=\'' + _('Edit row') +  '\' aria-label=\'' + _('Edit row') +  '\'></i>'
           );
           let body = $(this.$el).parents()[1],
             container = $(body).find('.tab-content:first > .tab-pane.active:first');
@@ -451,7 +451,7 @@ define([
     },
     render: function() {
       this.$el.empty();
-      this.$el.html('<i class=\'fa fa-pencil-square-o\' title=\'' + _('Edit row') + '\'></i>');
+      this.$el.html('<i class=\'fa fa-pencil-square-o\' title=\'' + _('Edit row') + '\' aria-label=\'' + _('Edit row') +  '\'></i>');
       this.delegateEvents();
       if (this.grabFocus)
         this.$el.trigger('focus');
@@ -603,9 +603,13 @@ define([
       // Here, we will add custom classes to header cell
       Backgrid.HeaderCell.prototype.initialize.apply(this, arguments);
       var getClassName = this.column.get('cellHeaderClasses');
+      var getAriaLabel = this.column.get('cellAriaLabel');
       if (getClassName) {
         this.$el.addClass(getClassName);
       }
+      if (getAriaLabel) {
+        this.$el.attr('aria-label', getAriaLabel);
+      }
     },
   });
 
diff --git a/web/pgadmin/static/vendor/backform/backform.js b/web/pgadmin/static/vendor/backform/backform.js
index 646167f39..b598fd60e 100644
--- a/web/pgadmin/static/vendor/backform/backform.js
+++ b/web/pgadmin/static/vendor/backform/backform.js
@@ -581,8 +581,8 @@
       '    <% var option = options[i]; %>',
       '    <% var id = _.uniqueId("bf_"); %>',
       '  <div class="custom-control custom-radio">',
-      '    <input type="<%=type%>" class="custom-control-input <%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" value="<%-formatter.fromRaw(option.value)%>" <%=rawValue == option.value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    <label class="custom-control-label" for="<%=cId%>"><%-option.label%></label>',
+      '    <input type="<%=type%>" class="custom-control-input <%=extraClasses.join(\' \')%>" id="<%=cId%><%=i%>" name="<%=name%>" value="<%-formatter.fromRaw(option.value)%>" <%=rawValue == option.value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> <%=required ? "required" : ""%> />',
+      '    <label class="custom-control-label" for="<%=cId%><%=i%>"><%-option.label%></label>',
       '  </div>',
       '  <% } %>',
       '  <% if (helpMessage && helpMessage.length) { %>',