public inbox for [email protected]  
help / color / mirror / Atom feed
[Accessibility] Parse & validate the web pages
4+ messages / 2 participants
[nested] [flat]

* [Accessibility] Parse & validate the web pages
@ 2020-04-01 13:30 Vishal Sawale <[email protected]>
  2020-04-02 07:19 ` Re: [Accessibility] Parse & validate the web pages Akshay Joshi <[email protected]>
  0 siblings, 1 reply; 4+ messages in thread

From: Vishal Sawale @ 2020-04-01 13:30 UTC (permalink / raw)
  To: pgadmin-hackers

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;
+    },
   });
 
   /**


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

* Re: [Accessibility] Parse & validate the web pages
  2020-04-01 13:30 [Accessibility] Parse & validate the web pages Vishal Sawale <[email protected]>
@ 2020-04-02 07:19 ` Akshay Joshi <[email protected]>
  0 siblings, 0 replies; 4+ messages in thread

From: Akshay Joshi @ 2020-04-02 07:19 UTC (permalink / raw)
  To: Vishal Sawale <[email protected]>; +Cc: pgadmin-hackers

Thanks, patch applied.

On Wed, Apr 1, 2020 at 7:00 PM Vishal Sawale <[email protected]>
wrote:

> 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
>
>
>
>

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*
*EnterpriseDB Software India Private Limited*
*Mobile: +91 976-788-8246*


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

* [Accessibility] Parse & validate the web pages
@ 2020-04-03 09:06 Vishal Sawale <[email protected]>
  2020-04-03 11:44 ` Re: [Accessibility] Parse & validate the web pages Akshay Joshi <[email protected]>
  0 siblings, 1 reply; 4+ messages in thread

From: Vishal Sawale @ 2020-04-03 09:06 UTC (permalink / raw)
  To: pgadmin-hackers

Hi Hackers,

PFA the patch for fixing accessibility issues. Patch includes

   1. Fix for search filter label missing in backgrid.
   2. Fix for broken aria issue for objects menu.

Please review and commit.


Regards,
Vishal


Attachments:

  [application/octet-stream] pgadmin_diff.patch (1.6K, 3-pgadmin_diff.patch)
  download | inline diff:
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index e5f74548f..e8ac4afef 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -372,7 +372,7 @@ define('pgadmin.browser', [
         // Create a dummy 'no object seleted' menu
         var create_submenu = pgAdmin.Browser.MenuGroup(
           obj.menu_categories['create'], [{
-            $el: $('<li><a class="dropdown-item disabled" href="#">' + gettext('No object selected') + '</a></li>'),
+            $el: $('<li><a class="dropdown-item disabled" href="#" role="menuitem">' + gettext('No object selected') + '</a></li>'),
             priority: 1,
             category: 'create',
             update: function() {},
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 0d01e5691..438c5e359 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -1957,6 +1957,10 @@ define([
    */
   Backgrid.Extension.ClientSideFilter = Backgrid.Extension.ClientSideFilter.extend({
     $customSearchBox: null,
+    template: function (data) {
+      return '<span class="search">&nbsp;</span><input type="search" ' + (data.placeholder ? 'aria-label= "' + data.placeholder + '"' : '')+' '+ (data.placeholder ? 'placeholder="' +
+      data.placeholder + '"' : '') + ' name="' + data.name + '" ' + (data.value ? 'value="' + data.value + '"' : '') + '/><a class="clear" data-backgrid-action="clear" href="#">&times;</a>';
+    },
 
     searchBox: function() {
       if(this.$customSearchBox) {


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

* Re: [Accessibility] Parse & validate the web pages
  2020-04-03 09:06 [Accessibility] Parse & validate the web pages Vishal Sawale <[email protected]>
@ 2020-04-03 11:44 ` Akshay Joshi <[email protected]>
  0 siblings, 0 replies; 4+ messages in thread

From: Akshay Joshi @ 2020-04-03 11:44 UTC (permalink / raw)
  To: Vishal Sawale <[email protected]>; +Cc: pgadmin-hackers

Thanks, patch applied.

On Fri, Apr 3, 2020 at 2:37 PM Vishal Sawale <[email protected]>
wrote:

> Hi Hackers,
>
> PFA the patch for fixing accessibility issues. Patch includes
>
>    1. Fix for search filter label missing in backgrid.
>    2. Fix for broken aria issue for objects menu.
>
> Please review and commit.
>
>
> Regards,
> Vishal
>
>
>
>

-- 
*Thanks & Regards*
*Akshay Joshi*

*Sr. Software Architect*
*EnterpriseDB Software India Private Limited*
*Mobile: +91 976-788-8246*


^ permalink  raw  reply  [nested|flat] 4+ messages in thread


end of thread, other threads:[~2020-04-03 11:44 UTC | newest]

Thread overview: 4+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2020-04-01 13:30 [Accessibility] Parse & validate the web pages Vishal Sawale <[email protected]>
2020-04-02 07:19 ` Akshay Joshi <[email protected]>
2020-04-03 09:06 [Accessibility] Parse & validate the web pages Vishal Sawale <[email protected]>
2020-04-03 11:44 ` Akshay Joshi <[email protected]>

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