public inbox for [email protected]
help / color / mirror / Atom feedFrom: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements
Date: Fri, 13 Dec 2019 12:09:09 +0530
Message-ID: <CAM9w-_=fMWu5Ch23QKB_qC61yJGT0e_r94wg_kbyxfRpu_epwA@mail.gmail.com> (raw)
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"
Attachments:
[application/octet-stream] RM4764.patch (39.9K, 3-RM4764.patch)
download | inline diff:
diff --git a/web/pgadmin/browser/server_groups/servers/static/js/privilege.js b/web/pgadmin/browser/server_groups/servers/static/js/privilege.js
index 2726ef2d6..24386be09 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/privilege.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/privilege.js
@@ -353,7 +353,7 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
this.$el.attr('target', this.elId);
var collection = this.model.get(this.column.get('name')),
- tbl = $('<table></table>').appendTo(this.$el),
+ tbl = $('<table aria-label='+this.column.get('label')+'></table>').appendTo(this.$el),
self = this,
privilege = true, with_grant = true;
diff --git a/web/pgadmin/browser/server_groups/servers/static/js/server.js b/web/pgadmin/browser/server_groups/servers/static/js/server.js
index 8d6361378..78c854a70 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/server.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/server.js
@@ -43,7 +43,7 @@ define('pgadmin.node.server', [
if (_.isUndefined(this.get('label')) ||
_.isNull(this.get('label')) ||
String(this.get('label')).replace(/^\s+|\s+$/g, '') == '') {
- var errmsg = gettext('Label must be specified.');
+ var errmsg = gettext('Security label must be specified.');
this.errorModel.set('label', errmsg);
return errmsg;
}
diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js
index 65b61238c..4b11e6bda 100644
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@@ -99,7 +99,7 @@ define([
'<button tabindex="0" type="<%= type %>" ',
'class="btn <%=extraClasses.join(\' \')%>"',
'<% if (disabled) { %> disabled="disabled"<% } %> title="<%-tooltip%>">',
- '<span class="<%= icon %>"></span><% if (label != "") { %> <%-label%><% } %></button>',
+ '<span class="<%= icon %>" role="img"></span><% if (label != "") { %> <%-label%><% } %></button>',
].join(' '));
if (location == 'header') {
btnGroup.appendTo(that.header);
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index 28e01dc69..1792037c6 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -327,7 +327,7 @@ define('pgadmin.browser.node', [
<div class="error-in-footer">
<div class="d-flex px-2 py-1">
<div class="pr-2">
- <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
+ <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true" role="img"></i>
</div>
<div class="alert-text">${msg}</div>
<div class="ml-auto close-error-bar">
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index c5d8c9526..cd11946fd 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -32,7 +32,7 @@ define([
let $selectAll = $([
'<button class="btn btn-secondary btn-sm" type="button"',
' style="width: 49%;margin: 0 0.5%;">',
- '<i class="fa fa-check-square-o"></i>',
+ '<i class="fa fa-check-square-o" role="img"></i>',
'<span style="padding: 0px 5px;">',
gettext('Select All'),
'</span></button>',
@@ -41,7 +41,7 @@ define([
let $unselectAll = $([
'<button class="btn btn-secondary btn-sm" type="button"',
' style="width: 49%;margin: 0 0.5%;">',
- '<i class="fa fa-square-o"></i><span style="padding: 0px 5px;">',
+ '<i class="fa fa-square-o"></i><span style="padding: 0px 5px;" role="img">',
gettext('Unselect All'),
'</span></button>',
].join(''));
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index add4f3003..15760211b 100644
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -117,7 +117,7 @@ define([
' <div class="error-in-footer"> ' +
' <div class="d-flex px-2 py-1"> ' +
' <div class="pr-2"> ' +
- ' <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i> ' +
+ ' <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true" role="img"></i> ' +
' </div> ' +
' <div class="alert-text"></div> ' +
' <div class="ml-auto close-error-bar"> ' +
@@ -130,18 +130,18 @@ define([
' <div>' +
' <button title = "' + gettext('Help for this dialog.') + '"' +
' class="btn btn-secondary pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
- ' <span class="fa fa-lg fa-question"></span></button>' +
+ ' <span class="fa fa-lg fa-question" role="img"></span></button>' +
' </div>' +
' <div class="ml-auto">' +
' <button class="btn btn-secondary wizard-cancel" <%=this.options.disable_cancel ? "disabled" : ""%>>' +
- ' <i class="fa fa-close"></i> ' + gettext('Cancel') + '</button>' +
+ ' <i class="fa fa-close" role="img"></i> ' + gettext('Cancel') + '</button>' +
' <button class="btn btn-secondary wizard-back" <%=this.options.disable_prev ? "disabled" : ""%>>' +
- ' <i class="fa fa-backward"></i> ' + gettext('Back') + '</button>' +
+ ' <i class="fa fa-backward" role="img"></i> ' + gettext('Back') + '</button>' +
' <button class="btn btn-secondary wizard-next" <%=this.options.disable_next ? "disabled" : ""%>>' +
' ' + gettext('Next') +
' <i class="fa fa-forward"></i></button>' +
' <button class="btn btn-primary wizard-finish" <%=this.options.disable_finish ? "disabled" : ""%>>' +
- ' <i class="fa fa-check"></i> ' + gettext('Finish') + '</button>' +
+ ' <i class="fa fa-check" role="img"></i> ' + gettext('Finish') + '</button>' +
' </div>' +
' </div>' +
' </div>' +
diff --git a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
index 96aa90f06..a7ae5393e 100644
--- a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
@@ -57,22 +57,22 @@
</div>
<div id="dashboard-activity" class="card dashboard-row dashboard-hidden">
<div class="card-header">
- {{ _('Server activity') }}
+ <span id="dashboard-activity-header">{{ _('Server activity') }}</span>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-9 col-12 pr-0">
- <ul class="nav nav-tabs" role="tablist">
+ <ul class="nav nav-tabs" role="tablist" aria-labelledby="dashboard-activity-header">
<li class="nav-item">
- <a class="nav-link active show" href="#tab_panel_database_activity" aria-controls="tab_database_activity"
+ <a class="nav-link active show" id="tab_panel_database_activity_tab" href="#tab_panel_database_activity" aria-controls="tab_database_activity"
role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#tab_panel_database_locks" aria-controls="tab_database_locks"
+ <a class="nav-link" id="tab_panel_database_locks_tab" href="#tab_panel_database_locks" aria-controls="tab_database_locks"
role="tab" data-toggle="tab">{{ _('Locks') }}</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#tab_panel_database_prepared" aria-controls="tab_database_prepared"
+ <a class="nav-link" id="tab_panel_database_prepared_tab" href="#tab_panel_database_prepared" aria-controls="tab_database_prepared"
role="tab" data-toggle="tab">{{ _('Prepared Transactions') }}</a>
</li>
</ul>
@@ -96,13 +96,13 @@
<!-- Tab panes -->
<div class="tab-content">
- <div role="tabpanel" class="tab-pane negative-space p-2 active show" id="tab_panel_database_activity">
+ <div role="tabpanel" class="tab-pane negative-space p-2 active show" id="tab_panel_database_activity" aria-labelledby="tab_panel_database_activity_tab">
<div id="database_activity" class="grid-container"></div>
</div>
- <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_database_locks">
+ <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_database_locks" aria-labelledby="tab_panel_database_locks_tab">
<div id="database_locks" class="grid-container"></div>
</div>
- <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_database_prepared">
+ <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_database_prepared" aria-labelledby="tab_panel_database_prepared_tab">
<div id="database_prepared" class="grid-container"></div>
</div>
</div>
diff --git a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
index e1c68b2f7..52d386897 100644
--- a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
@@ -57,26 +57,26 @@
</div>
<div id="dashboard-activity" class="card dashboard-row dashboard-hidden">
<div class="card-header">
- {{ _('Server activity') }}
+ <span id="server-activity-header">{{ _('Server activity') }}</span>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-9 col-12 pr-0">
- <ul class="nav nav-tabs" role="tablist">
+ <ul class="nav nav-tabs" role="tablist" aria-labelledby="server-activity-header">
<li class="nav-item">
- <a class="nav-link active show" href="#tab_panel_server_activity" aria-controls="tab_server_activity"
+ <a class="nav-link active show" id="tab_panel_server_activity_tab" href="#tab_panel_server_activity" aria-controls="tab_server_activity"
role="tab" data-toggle="tab">{{_('Sessions') }}</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#tab_panel_server_locks" aria-controls="tab_server_locks"
+ <a class="nav-link" id="tab_panel_server_locks_tab" href="#tab_panel_server_locks" aria-controls="tab_server_locks"
role="tab" data-toggle="tab">{{ _('Locks') }}</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#tab_panel_server_prepared" aria-controls="tab_server_prepared"
+ <a class="nav-link" id="tab_panel_server_prepared_tab" href="#tab_panel_server_prepared" aria-controls="tab_server_prepared"
role="tab" data-toggle="tab">{{ _('Prepared Transactions') }}</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="#tab_panel_server_config" aria-controls="tab_server_config"
+ <a class="nav-link" id="tab_panel_server_config_tab" href="#tab_panel_server_config" aria-controls="tab_server_config"
role="tab" data-toggle="tab">{{ _('Configuration') }}</a>
</li>
</ul>
@@ -100,16 +100,16 @@
<!-- Tab panes -->
<div class="tab-content">
- <div role="tabpanel" class="tab-pane negative-space p-2 active show" id="tab_panel_server_activity">
+ <div role="tabpanel" class="tab-pane negative-space p-2 active show" id="tab_panel_server_activity" aria-labelledby="tab_panel_server_activity_tab">
<div id="server_activity" class="grid-container"></div>
</div>
- <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_locks">
+ <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_locks" aria-labelledby="tab_panel_server_locks_tab">
<div id="server_locks" class="grid-container"></div>
</div>
- <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_prepared">
+ <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_prepared" aria-labelledby="tab_panel_server_prepared_tab">
<div id="server_prepared" class="grid-container"></div>
</div>
- <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_config">
+ <div role="tabpanel" class="tab-pane negative-space p-2" id="tab_panel_server_config" aria-labelledby="tab_panel_server_config_tab">
<div id="server_config" class="grid-container"></div>
</div>
</div>
diff --git a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
index 76ffa96d4..c6df35c92 100644
--- a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
+++ b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
@@ -36,21 +36,21 @@ define('misc.bgprocess', [
success_status_tpl: _.template(`
<div class="d-flex px-2 py-1 bg-success-light border border-success rounded">
<div class="pr-2">
- <i class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true"></i>
+ <i class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true" role="img"></i>
</div>
<div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
</div>`),
failed_status_tpl: _.template(`
<div class="d-flex px-2 py-1 bg-danger-lighter border border-danger rounded">
<div class="pr-2">
- <i class="fa fa-close fa-lg text-danger pg-bg-status-icon" aria-hidden="true"></i>
+ <i class="fa fa-close fa-lg text-danger pg-bg-status-icon" aria-hidden="true" role="img"></i>
</div>
<div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
</div>`),
other_status_tpl: _.template(`
<div class="d-flex px-2 py-1 bg-primary-light border border-primary rounded">
<div class="pr-2">
- <i class="fa fa-info fa-lg text-primary pg-bg-status-icon" aria-hidden="true"></i>
+ <i class="fa fa-info fa-lg text-primary pg-bg-status-icon" aria-hidden="true" role="img"></i>
</div>
<div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
</div>`),
@@ -299,7 +299,7 @@ define('misc.bgprocess', [
<div class="card-header bg-primary d-flex">
<div>${self.type_desc}</div>
<div class="ml-auto">
- <button class="btn btn-sm-sq btn-primary pg-bg-close"><i class="fa fa-lg fa-close"></i></button>
+ <button class="btn btn-sm-sq btn-primary pg-bg-close"><i class="fa fa-lg fa-close" role="img"></i></button>
</div>
</div>
<div class="card-body px-2">
@@ -307,12 +307,12 @@ define('misc.bgprocess', [
<div class="py-1">${self.stime.toString()}</div>
<div class="d-flex py-1">
<div class="my-auto mr-2">
- <span class="fa fa-clock-o fa-2x"></span>
+ <span class="fa fa-clock-o fa-2x" role="img"></span>
</div>
<div class="pg-bg-etime my-auto mr-2"></div>
<div class="ml-auto">
- <button class="btn btn-secondary pg-bg-more-details"><span class="fa fa-info-circle"></span> ${gettext('More details...')}</button>
- <button class="btn btn-danger bg-process-stop"><span class="fa fa-times-circle"></span> ${gettext('Stop Process')}</button>
+ <button class="btn btn-secondary pg-bg-more-details"><span class="fa fa-info-circle" role="img"></span> ${gettext('More details...')}</button>
+ <button class="btn btn-danger bg-process-stop"><span class="fa fa-times-circle" role="img"></span> ${gettext('Stop Process')}</button>
</div>
</div>
<div class="pg-bg-status py-1">
@@ -614,14 +614,14 @@ define('misc.bgprocess', [
'<div class="bg-detailed-desc"></div>' +
'<div class="bg-process-stats d-flex py-1">' +
'<div class="my-auto mr-2">' +
- '<span class="fa fa-clock-o fa-2x"></span>' +
+ '<span class="fa fa-clock-o fa-2x" role="img"></span>' +
'</div>' +
'<div class="pg-bg-etime my-auto mr-2">'+
'<span>' + gettext('Start time') + ': <span class="bgprocess-start-time"></span>' +
'</span>'+
'</div>' +
'<div class="ml-auto">' +
- '<button type="button" class="btn btn-danger bg-process-stop"><span class="fa fa-times-circle"></span> ' + gettext('Stop Process') + '</button>' +
+ '<button type="button" class="btn btn-danger bg-process-stop"><span class="fa fa-times-circle" role="img"></span> ' + gettext('Stop Process') + '</button>' +
'</div>' +
'</div>' +
'</div>' +
diff --git a/web/pgadmin/misc/file_manager/static/js/utility.js b/web/pgadmin/misc/file_manager/static/js/utility.js
index e3fc81a9f..9b85290a9 100644
--- a/web/pgadmin/misc/file_manager/static/js/utility.js
+++ b/web/pgadmin/misc/file_manager/static/js/utility.js
@@ -552,7 +552,7 @@ define([
'"><div class="clip"><span data-alt="' +
file_path_orig + '" class="' + class_type + '"></span>';
if ((data[key]).Protected == 1) {
- result += '<span class="fa fa-lock fm_lock_icon" data-protected="protected"></span>';
+ result += '<span class="fa fa-lock fm_lock_icon" data-protected="protected" role="img"></span>';
}
result += '</div>';
@@ -632,7 +632,7 @@ define([
let data_protected = '';
if ((data[key]).Protected == 1) {
- data_protected = '<i class="fa fa-lock tbl_lock_icon" data-protected="protected"></i>';
+ data_protected = '<i class="fa fa-lock tbl_lock_icon" data-protected="protected" role="img"></i>';
}
if (!has_capability(data[key], 'rename')) {
result += data_protected;
@@ -1586,7 +1586,7 @@ define([
// template for creating new folder
folder_div =
'<li class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
- '<div class=\'clip\'><span data-alt=\'\' class=\'fa fa-folder-open fm_folder_grid\'></span></div>' +
+ '<div class=\'clip\'><span data-alt=\'\' class=\'fa fa-folder-open fm_folder_grid\' role="img"></span></div>' +
'<div><input type=\'text\' class=\'fm_file_rename\'><span class="less_text" title=\'\'>New_Folder</span></div>' +
'<span class=\'meta size\'></span><span class=\'meta created\'></span><span class=\'meta modified\'></span></li>';
@@ -1625,7 +1625,7 @@ define([
folder_div = $(
'<tr class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
'<td title=\'\' class=\' tbl_folder\'>' +
- '<span class="fa fa-folder-open fm_folder_list"></span>' +
+ '<span class="fa fa-folder-open fm_folder_list" role="img"></span>' +
'<span class="less_text">' + lg.new_folder + '</span>' +
'<input type=\'text\' class=\'fm_file_rename\'>'+
'</td>'+
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 6c4e9ae69..eb0821284 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -697,8 +697,8 @@ define([
},
template: {
'header': _.template([
- '<li class="nav-item" role="presentation" <%=disabled ? "disabled" : ""%>>',
- ' <a class="nav-link" data-toggle="tab" tabindex="-1" data-tab-index="<%=tabIndex%>" href="#<%=cId%>"',
+ '<li class="nav-item" <%=disabled ? "disabled" : ""%>>',
+ ' <a class="nav-link" data-toggle="tab" role="tab" tabindex="-1" data-tab-index="<%=tabIndex%>" href="#<%=cId%>"',
' id="<%=hId%>" aria-controls="<%=cId%>">',
'<%=label%></a></li>',
].join(' ')),
@@ -830,7 +830,7 @@ define([
'header': _.template([
'<div class="<%=Backform.accordianGroupClassName%>" <%=disabled ? "disabled" : ""%>>',
' <% if (legend != false) { %>',
- ' <div class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend>',
+ ' <div class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>" aria-controls="<%=cId%>" role="heading" tabindex="0"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend>',
' <% } %>',
'</div>',
].join('\n')),
@@ -1252,10 +1252,11 @@ define([
return this;
},
showGridControl: function(data) {
+ data.cId = data.cId || _.uniqueId('pgC_');
var self = this,
gridHeader = _.template([
'<div class="subnode-header">',
- ' <label class="control-label pg-el-sm-10"><%-label%></label>',
+ ' <label class="control-label pg-el-sm-10" id="<%=cId%>"><%-label%></label>',
' <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
'</div>',
].join('\n')),
@@ -1339,6 +1340,9 @@ define([
columns: gridSchema.columns,
collection: collection,
className: 'backgrid table presentation table-bordered table-noouter-border table-hover',
+ attr: {
+ 'aria-labelledby': data.cId,
+ },
});
// Render subNode grid
diff --git a/web/pgadmin/static/js/sqleditor/history/query_history_entries.js b/web/pgadmin/static/js/sqleditor/history/query_history_entries.js
index b2c0cc24a..8e8702f4d 100644
--- a/web/pgadmin/static/js/sqleditor/history/query_history_entries.js
+++ b/web/pgadmin/static/js/sqleditor/history/query_history_entries.js
@@ -87,7 +87,9 @@ export class QueryHistoryItem {
let query_source = this.entry.query_source;
if(query_source)
- this.$el.find('#query_source_icon').addClass(query_source.ICON_CSS_CLASS);
+ this.$el.find('#query_source_icon')
+ .addClass(query_source.ICON_CSS_CLASS)
+ .attr('role', 'img');
if(this.entry.is_pgadmin_query) {
this.$el.addClass('pgadmin-query-history-entry');
diff --git a/web/pgadmin/static/vendor/backgrid/backgrid.js b/web/pgadmin/static/vendor/backgrid/backgrid.js
index b51635bc2..1a2b78d25 100644
--- a/web/pgadmin/static/vendor/backgrid/backgrid.js
+++ b/web/pgadmin/static/vendor/backgrid/backgrid.js
@@ -718,6 +718,7 @@ var InputCellEditor = Backgrid.InputCellEditor = CellEditor.extend({
*/
render: function () {
var model = this.model;
+ this.$el.attr('aria-label', this.column.get("label"));
this.$el.val(this.formatter.fromRaw(model.get(this.column.get("name")), model));
return this;
},
@@ -2184,6 +2185,7 @@ var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
this.$el.append(label);
this.$el.addClass(column.get("name"));
this.$el.addClass(column.get("direction"));
+ this.$el.attr("role", "columnheader");
this.delegateEvents();
return this;
}
@@ -2840,6 +2842,9 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
/** @property */
footer: null,
+ /** @property */
+ attr: null,
+
/**
Initializes a Grid instance.
@@ -2851,6 +2856,7 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
@param {Backgrid.Body} [options.body=Backgrid.Body] An optional Body class to override the default.
@param {Backgrid.Row} [options.row=Backgrid.Row] An optional Row class to override the default.
@param {Backgrid.Footer} [options.footer=Backgrid.Footer] An optional Footer class.
+
*/
initialize: function (options) {
// Convert the list of column objects here first so the subviews don't have
@@ -2879,6 +2885,8 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
this.footer = new this.footer(filteredOptions);
}
+ this.attr = options.attr || {};
+
this.listenTo(this.columns, "reset", function () {
if (this.header) {
this.header = new (this.header.remove().constructor)(filteredOptions);
@@ -2960,6 +2968,8 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
}
this.$el.append(this.body.render().$el);
+ this.$el.attr("role", "table");
+ this.$el.attr(this.attr);
this.delegateEvents();
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 26c9f91c3..77f8f31f3 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -19,13 +19,13 @@
title=""
accesskey=""
tabindex="0">
- <i class="fa fa-folder-open-o sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-folder-open-o sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-save-file" type="button" class="btn btn-sm btn-secondary"
title=""
accesskey=""
disabled>
- <i class="fa fa-floppy-o sql-icon-lg" aria-hidden="true" tabindex="0"></i>
+ <i class="fa fa-floppy-o sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
</button>
<button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
@@ -49,12 +49,12 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="pg-font-icon icon-save-data-changes sql-icon-lg" aria-hidden="true"></i>
+ <i class="pg-font-icon icon-save-data-changes sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
</div>
<div class="btn-group mr-1" role="group" aria-label="">
<button id="btn-find" type="button" class="btn btn-sm btn-secondary" title="{{ _('Find (Ctrl/Cmd+F)') }}">
- <i class="fa fa-search sql-icon-lg" aria-hidden="true" tabindex="0"></i>
+ <i class="fa fa-search sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
</button>
<button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -119,7 +119,7 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="fa fa-files-o sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-files-o sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -128,7 +128,7 @@
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" id="btn-copy-with-header" href="#" tabindex="0">
- <i class="copy-with-header fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="copy-with-header fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Copy with headers') }} </span>
</a>
</li>
@@ -137,7 +137,7 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="fa fa-clipboard sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-clipboard sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
</div>
<div class="btn-group mr-1" role="group" aria-label="">
@@ -145,14 +145,14 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="fa fa-trash sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-trash sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
</div>
<div class="btn-group mr-1" role="group" aria-label="">
<button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
title="{{ _('Edit') }}" tabindex="0">
- <i class="fa fa-pencil-square-o sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-pencil-square-o sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<ul class="dropdown-menu">
<li>
@@ -196,7 +196,7 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="fa fa-filter sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-filter sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-filter-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -236,12 +236,12 @@
title=""
accesskey=""
tabindex="0" disabled >
- <i class="fa fa-stop sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-stop sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-sm btn-secondary" style="width: 32px;"
title=""
tabindex="0" data-click-counter="0" disabled>
- <i class="fa fa-play sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-play sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-query-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -252,13 +252,13 @@
<ul class="dropdown-menu" role="menu">
<li>
<a class="dropdown-item" id="btn-auto-commit" href="#" tabindex="0">
- <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Auto commit?') }} </span>
</a>
</li>
<li>
<a class="dropdown-item" id="btn-auto-rollback" href="#" tabindex="0">
- <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Auto rollback?') }} </span>
</a>
</li>
@@ -269,12 +269,12 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="fa fa-hand-pointer-o sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-hand-pointer-o sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-explain-analyze" type="button" class="btn btn-sm btn-secondary"
title=""
accesskey="" disabled>
- <i class="fa fa-list-alt sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-list-alt sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -283,37 +283,37 @@
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" id="btn-explain-verbose" href="#" tabindex="0">
- <i class="explain-verbose fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="explain-verbose fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Verbose') }} </span>
</a>
</li>
<li>
<a class="dropdown-item" id="btn-explain-costs" href="#" tabindex="0">
- <i class="explain-costs fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="explain-costs fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Costs') }} </span>
</a>
</li>
<li>
<a class="dropdown-item" id="btn-explain-buffers" href="#" tabindex="0">
- <i class="explain-buffers fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="explain-buffers fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Buffers') }} </span>
</a>
</li>
<li>
<a class="dropdown-item" id="btn-explain-timing" href="#" tabindex="0">
- <i class="explain-timing fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="explain-timing fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Timing') }} </span>
</a>
</li>
<li data-min-ver="100000">
<a class="dropdown-item" id="btn-explain-summary" href="#" tabindex="0">
- <i class="explain-summary fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="explain-summary fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Summary') }} </span>
</a>
</li>
<li data-min-ver="120000">
<a class="dropdown-item" id="btn-explain-settings" href="#" tabindex="0">
- <i class="explain-settings fa fa-check visibility-hidden" aria-hidden="true"></i>
+ <i class="explain-settings fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
<span> {{ _('Settings') }} </span>
</a>
</li>
@@ -324,12 +324,12 @@
title=""
accesskey=""
tabindex="0" disabled>
- <i class="pg-font-icon icon-commit sql-icon-lg" aria-hidden="true"></i>
+ <i class="pg-font-icon icon-commit sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<button id="btn-rollback" type="button" class="btn btn-sm btn-secondary"
title=""
tabindex="0" disabled>
- <i class="pg-font-icon icon-rollback sql-icon-lg" aria-hidden="true"></i>
+ <i class="pg-font-icon icon-rollback sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
</div>
<div class="btn-group mr-1" role="group" aria-label="">
@@ -338,7 +338,7 @@
title=""
accesskey=""
tabindex="0">
- <i class="fa fa-eraser sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-eraser sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
<ul class="dropdown-menu">
<li>
@@ -357,7 +357,7 @@
<button id="btn-download" type="button" class="btn btn-sm btn-secondary"
title=""
tabindex="0">
- <i class="fa fa-download sql-icon-lg" aria-hidden="true"></i>
+ <i class="fa fa-download sql-icon-lg" aria-hidden="true" role="img"></i>
</button>
</div>
</div>
@@ -371,7 +371,7 @@
accesskey=""
tabindex="0">
<i class="pg-font-icon icon-query-tool-disconnected obtaining-conn d-flex m-auto" aria-hidden="true"
- title="">
+ title="" role="img">
</i>
</div>
<div class="editor-title"
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index 8f5897f3f..3e3554e8d 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -2118,7 +2118,7 @@ define('tools.querytool', [
alertify.confirm(
gettext('Connection Warning'),
'<p style="float:left">'+
- '<span class="fa fa-exclamation-triangle warn-icon" aria-hidden="true">'+
+ '<span class="fa fa-exclamation-triangle warn-icon" aria-hidden="true" role="img">'+
'</span>'+
'</p>'+
'<p style="display: inline-block;">'+
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: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements
In-Reply-To: <CAM9w-_=fMWu5Ch23QKB_qC61yJGT0e_r94wg_kbyxfRpu_epwA@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