public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements 4+ messages / 3 participants [nested] [flat]
* [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements @ 2019-12-13 06:39 Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Aditya Toshniwal @ 2019-12-13 06:39 UTC (permalink / raw) To: pgadmin-hackers 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;">'+ ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements @ 2019-12-17 07:55 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Akshay Joshi @ 2019-12-17 07:55 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers 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* ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements @ 2020-03-11 09:13 Ganesh Jaybhay <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Ganesh Jaybhay @ 2020-03-11 09:13 UTC (permalink / raw) To: Akshay Joshi <[email protected]>; +Cc: Aditya Toshniwal <[email protected]>; pgadmin-hackers 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) { %>', ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements @ 2020-03-12 05:48 Akshay Joshi <[email protected]> parent: Ganesh Jaybhay <[email protected]> 0 siblings, 0 replies; 4+ messages in thread From: Akshay Joshi @ 2020-03-12 05:48 UTC (permalink / raw) To: Ganesh Jaybhay <[email protected]>; +Cc: Aditya Toshniwal <[email protected]>; pgadmin-hackers Thanks, patch applied. On Wed, Mar 11, 2020 at 2:43 PM Ganesh Jaybhay < [email protected]> wrote: > 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* >> > -- *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-03-12 05:48 UTC | newest] Thread overview: 4+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2019-12-13 06:39 [pgAdmin][RM4764][Accessibility] Allow screen-reader to read relationship attributes in nested elements Aditya Toshniwal <[email protected]> 2019-12-17 07:55 ` Akshay Joshi <[email protected]> 2020-03-11 09:13 ` Ganesh Jaybhay <[email protected]> 2020-03-12 05:48 ` 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