public inbox for [email protected]  

help / color / mirror / Atom feed

From: Vishal Sawale <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [Accessibility] Parse & validate the web pages
Date: Wed, 1 Apr 2020 19:00:21 +0530
Message-ID: <CADTPKNkZN2bR3cSrGYK42u3xg+ELne=EqLQk=DfHJDsqCTduOw@mail.gmail.com> (raw)

Hi Hackers,

Attached is a patch for accessibility issue for table header label missing.
If it is not present, then it will add span for screen reader.
Please review.

Regards,
Vishal


Attachments:

  [application/octet-stream] pgadmin_diff.patch (2.0K, 3-pgadmin_diff.patch)
  download | inline diff:
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 4bb793e..682ea24 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -496,9 +496,11 @@ define([
       e.stopPropagation();
     },
     template: _.template([
+      '<% if (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 <%}%>" role="radiogroup" aria-labelledby="<%=cId%>_grplabel">',
+      ' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" role="radiogroup" <% if (label) {%> aria-labelledby="<%=cId%>_grplabel" <%}%>>',
       '  <% for (var i=0; i < options.length; i++) { %>',
       '  <% var option = options[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"<% } %>>',
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 07d681a..5776b49 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -611,6 +611,17 @@ define([
         this.$el.attr('aria-label', getAriaLabel);
       }
     },
+    render: function() {
+      Backgrid.HeaderCell.prototype.render.apply(this, arguments);
+      // If table header label is not present then screen reader will raise
+      // an error we will add span for screen reader only
+      if (this.column.get('label') == '' || !this.column.get('label')) {
+        let getAriaLabel = this.column.get('cellAriaLabel');
+        if (getAriaLabel)
+          this.$el.append(`<span class="sr-only">${getAriaLabel}</span>`);
+      }
+      return this;
+    },
   });
 
   /**

view thread (4+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: [Accessibility] Parse & validate the web pages
  In-Reply-To: <CADTPKNkZN2bR3cSrGYK42u3xg+ELne=EqLQk=DfHJDsqCTduOw@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox