From f1a18749f65599186a36395d37408a6aed29dcd2 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Tue, 17 Dec 2019 13:22:36 +0530 Subject: [PATCH] 1) Allow screen-reader to read relationship attributes for tab, tabpanels and tables under it. Similar changes are done for subnode controls. 2) Add role="img" for font icons. Fixes #4764 --- docs/en_US/release_notes_4_17.rst | 1 + .../servers/static/js/privilege.js | 2 +- .../server_groups/servers/static/js/server.js | 2 +- web/pgadmin/browser/static/js/collection.js | 2 +- web/pgadmin/browser/static/js/node.js | 2 +- web/pgadmin/browser/static/js/node.ui.js | 4 +- web/pgadmin/browser/static/js/wizard.js | 10 ++-- .../dashboard/database_dashboard.html | 16 +++--- .../templates/dashboard/server_dashboard.html | 20 +++---- .../misc/bgprocess/static/js/bgprocess.js | 18 +++---- .../misc/file_manager/static/js/utility.js | 8 +-- web/pgadmin/static/js/backform.pgadmin.js | 12 +++-- .../history/query_history_entries.js | 4 +- .../static/vendor/backgrid/backgrid.js | 10 ++++ .../datagrid/templates/datagrid/index.html | 54 +++++++++---------- .../tools/sqleditor/static/js/sqleditor.js | 2 +- 16 files changed, 92 insertions(+), 75 deletions(-) diff --git a/docs/en_US/release_notes_4_17.rst b/docs/en_US/release_notes_4_17.rst index 38d18156b..4a716480a 100644 --- a/docs/en_US/release_notes_4_17.rst +++ b/docs/en_US/release_notes_4_17.rst @@ -9,6 +9,7 @@ This release contains a number of bug fixes and new features since the release o New features ************ +| `Issue #4764 `_ - Allow screen-reader to read relationship attributes in nested elements. Housekeeping ************ 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 = $('
').appendTo(this.$el), + tbl = $('
').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([ '', + '<% if (label != "") { %> <%-label%><% } %>', ].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', [
- +
${msg}
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 = $([ '', @@ -41,7 +41,7 @@ define([ let $unselectAll = $([ '', ].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([ '
' + '
' + '
' + - ' ' + + ' ' + '
' + '
' + '
' + @@ -130,18 +130,18 @@ define([ '
' + ' ' + + ' ' + '
' + '
' + ' ' + + '  ' + gettext('Cancel') + '' + ' ' + + '  ' + gettext('Back') + '' + ' ' + ' ' + + '  ' + gettext('Finish') + '' + '
' + '
' + '
' + 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 @@
- {{ _('Server activity') }} + {{ _('Server activity') }}
-
    + @@ -96,13 +96,13 @@
    -
    +
    -
    +
    -
    +
    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 @@
    - {{ _('Server activity') }} + {{ _('Server activity') }}
    -
      + @@ -100,16 +100,16 @@
      -
      +
      -
      +
      -
      +
      -
      +
      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(`
      - +
      <%-status_text%>
      `), failed_status_tpl: _.template(`
      - +
      <%-status_text%>
      `), other_status_tpl: _.template(`
      - +
      <%-status_text%>
      `), @@ -299,7 +299,7 @@ define('misc.bgprocess', [
      ${self.type_desc}
      - +
      @@ -307,12 +307,12 @@ define('misc.bgprocess', [
      ${self.stime.toString()}
      - +
      - - + +
      @@ -614,14 +614,14 @@ define('misc.bgprocess', [ '
      ' + '
      ' + '
      ' + - '' + + '' + '
      ' + '
      '+ '' + gettext('Start time') + ': ' + ''+ '
      ' + '
      ' + - '' + + '' + '
      ' + '
      ' + '
      ' + 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([ '">
      '; if ((data[key]).Protected == 1) { - result += ''; + result += ''; } result += '
      '; @@ -632,7 +632,7 @@ define([ let data_protected = ''; if ((data[key]).Protected == 1) { - data_protected = ''; + data_protected = ''; } if (!has_capability(data[key], 'rename')) { result += data_protected; @@ -1586,7 +1586,7 @@ define([ // template for creating new folder folder_div = '
    • ' + - '
      ' + + '
      ' + '
      New_Folder
      ' + '
      • '; @@ -1625,7 +1625,7 @@ define([ folder_div = $( '' + '' + - '' + + '' + '' + lg.new_folder + '' + ''+ ''+ 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([ - '', ].join(' ')), @@ -830,7 +830,7 @@ define([ 'header': _.template([ '
      >', ' <% if (legend != false) { %>', - '
      data-target="#<%=cId%>"><%=collapse ? "" : "" %><%=label%>', + '
      data-target="#<%=cId%>" aria-controls="<%=cId%>" role="heading" tabindex="0"><%=collapse ? "" : "" %><%=label%>', ' <% } %>', '
      ', ].join('\n')), @@ -1252,10 +1252,11 @@ define([ return this; }, showGridControl: function(data) { + data.cId = data.cId || _.uniqueId('pgC_'); var self = this, gridHeader = _.template([ '
      ', - ' ', + ' ', ' ', '
      ', ].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"> - +
      @@ -145,14 +145,14 @@ title="" accesskey="" tabindex="0" disabled> - +
      @@ -338,7 +338,7 @@ title="" accesskey="" tabindex="0"> - +
      • @@ -357,7 +357,7 @@
      @@ -371,7 +371,7 @@ accesskey="" tabindex="0">
      '+ - '