public inbox for [email protected]
help / color / mirror / Atom feedFrom: Ganesh Jaybhay <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: Aditya Toshniwal <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements
Date: Wed, 11 Mar 2020 14:43:20 +0530
Message-ID: <CAK6syAogA1GAyqK1w9XquNLHActrDfjV9ZOc2AVOwbEbbD6EYA@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDe77dWL5NOGpqbxJnDoRwU54rAAPMKRkdk25686-jy5Wg@mail.gmail.com>
References: <CAM9w-_=fMWu5Ch23QKB_qC61yJGT0e_r94wg_kbyxfRpu_epwA@mail.gmail.com>
<CANxoLDe77dWL5NOGpqbxJnDoRwU54rAAPMKRkdk25686-jy5Wg@mail.gmail.com>
Hi Hackers,
Attached is the patch on top of initial patch for:
- screen reader to read elements in radio modern control
- minor accessibility(aria-label) additions at few missing places
- Radiocontrol to have different ids for each options
Please review.
Regards,
Ganesh Jaybhay
On Tue, Dec 17, 2019 at 1:25 PM Akshay Joshi <[email protected]>
wrote:
> Thanks, patch applied.
>
> On Fri, Dec 13, 2019 at 12:09 PM Aditya Toshniwal <
> [email protected]> wrote:
>
>> Hi Hackers,
>>
>> Attached is the patch to:
>> 1) Read relationship for tab, tabpanels and tables under it. Similar
>> changes are done for subnode controls.
>> 2) Add role="img" for font icons, per -
>> https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html
>>
>> Kindly review.
>>
>> --
>> Thanks and Regards,
>> Aditya Toshniwal
>> Sr. Software Engineer | EnterpriseDB India | Pune
>> "Don't Complain about Heat, Plant a TREE"
>>
>
>
> --
> *Thanks & Regards*
> *Akshay Joshi*
>
> *Sr. Software Architect*
> *EnterpriseDB Software India Private Limited*
> *Mobile: +91 976-788-8246*
>
Attachments:
[application/octet-stream] RM4764_v1.patch (5.0K, 3-RM4764_v1.patch)
download | inline diff:
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) { %>',
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], [email protected], [email protected]
Subject: Re: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements
In-Reply-To: <CAK6syAogA1GAyqK1w9XquNLHActrDfjV9ZOc2AVOwbEbbD6EYA@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