public inbox for [email protected]
help / color / mirror / Atom feed[pgAdmin][RM-6065]: Accessibility issues in Schema diff module
2+ messages / 2 participants
[nested] [flat]
* [pgAdmin][RM-6065]: Accessibility issues in Schema diff module
@ 2020-12-22 10:31 Nikhil Mohite <[email protected]>
2020-12-23 08:52 ` Re: [pgAdmin][RM-6065]: Accessibility issues in Schema diff module Akshay Joshi <[email protected]>
0 siblings, 1 reply; 2+ messages in thread
From: Nikhil Mohite @ 2020-12-22 10:31 UTC (permalink / raw)
To: pgadmin-hackers
Hi Team,
Please find the attached patch for RM-6065
<https://redmine.postgresql.org/issues/6065;: Accessibility issues in the
Schema diff module.
1. Resolved accessibility issues with a schema diff tool.
2. Resolved contrast issue in codemirror. (updated new color code in
standard theme).
--
*Thanks & Regards,*
*Nikhil Mohite*
*Software Engineer.*
*EDB Postgres* <https://www.enterprisedb.com/;
*Mob.No: +91-7798364578.*
Attachments:
[application/octet-stream] RM_6065.patch (11.4K, 3-RM_6065.patch)
download | inline diff:
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 26f65cb..a30d2f6 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -313,7 +313,7 @@ define([
'<label class="<%=Backform.controlLabelClassName%>" for="<%=cId%>"><%=label%></label>',
'<div class="<%=Backform.controlsClassName%>">',
' <textarea id="<%=cId%>"',
- ' class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>"',
+ ' class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" aria-label="<%=name%>"',
' <% if (maxlength) { %>',
' maxlength="<%=maxlength%>"',
' <% } %>',
@@ -1754,7 +1754,7 @@ define([
template: _.template([
'<label for="<%=cId%>" class="sr-only"><%=(label==""?"SQL":label)%></label>',
'<div class="<%=controlsClassName%>">',
- ' <textarea id="<%=cId%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> <%=required ? "required" : ""%>><%-value%></textarea>',
+ ' <textarea id="<%=cId%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" aria-label="<%=name%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> <%=required ? "required" : ""%>><%-value%></textarea>',
' <% if (helpMessage && helpMessage.length) { %>',
' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
' <% } %>',
@@ -2474,7 +2474,7 @@ define([
'<label class="<%=Backform.controlLabelClassName%>" for="<%=cId%>"><%=label%></label>',
'<div class="<%=Backform.controlsClassName%> sql_field_layout <%=extraClasses.join(\' \')%>">',
' <textarea id="<%=cId%>"',
- ' class="<%=Backform.controlClassName%> " name="<%=name%>"',
+ ' class="<%=Backform.controlClassName%> " name="<%=name%>" aria-label="<%=name%>"',
' maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%>',
' rows=<%=rows%>',
' <%=required ? "required" : ""%>><%-value%></textarea>',
@@ -2655,7 +2655,7 @@ define([
'<label class="sr-only" for="<%=cId%>"><%=(label==""?"Code":label)%></label>',
'<div class="pgadmin-controls pg-el-12 <%=extraClasses.join(\' \')%>">',
' <textarea id="<%=cId%>" ',
- ' class="<%=Backform.controlClassName%> " name="<%=name%>"',
+ ' class="<%=Backform.controlClassName%> " name="<%=name%>" aria-label="<%=name%>"',
' maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> ',
' rows=<%=rows%>',
' <%=required ? "required" : ""%>><%-value%></textarea>',
@@ -3422,7 +3422,7 @@ define([
' <button class="btn btn-secondary btn-checkbox">',
' <div class="custom-control custom-checkbox <%=extraClasses.join(\' \')%>">',
' <input tabindex="-1" type="checkbox" class="custom-control-input" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
- ' <label class="custom-control-label" for="<%=cId%>">',
+ ' <label class="custom-control-label" for="<%=cId%>" aria-label="<%=cId%>">',
' <%=label%>',
' </label>',
' </div>',
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 3814391..1ad7c99 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -191,7 +191,7 @@ $color-editor-variable: $color-fg !default;
$color-editor-variable-2: #05a !default;
$color-editor-builtin: #30a !default;
$color-editor-comment: #a50 !default;
-$color-editor-bracket: #997 !default;
+$color-editor-bracket: #737373 !default;
$color-editor-operator: $color-fg !default;
$color-editor-foldmarker: #0000FF !default;
$color-editor-activeline: #50B0F0 !default;
@@ -332,6 +332,7 @@ $select2-container-hover-bg: $tree-bg-hover !default;
$select2-container-hover-fg: $tree-fg-hover !default;
$select2-container-bg-selected: $tree-bg-selected !default;
$select2-container-fg-selected: $tree-fg-selected !default;
+$select2-placeholder: #575757 !default;
$btn-primary-icon-bg: $color-bg !default;
$btn-primary-icon-fg: $color-fg !default;
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
index 76cee40..129b9a2 100644
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -119,3 +119,5 @@ $btn-ternary-disabled-fg: $color-fg;
$color-success-hover-fg: $color-fg;
$datagrid-selected-color: $color-primary-fg;
+
+$select2-placeholder: #999;
diff --git a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
index 2bf2cc0..b895a12 100644
--- a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
@@ -136,6 +136,7 @@ $select2-container-hover-bg: $color-primary;
$select2-container-hover-fg: $color-bg;
$select2-container-bg-selected: $color-fg;
$select2-container-fg-selected: $color-bg;
+$select2-placeholder: #999;
$sql-hint-active-fg: $color-bg;
diff --git a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
index 8a9bc90..b6534c8 100644
--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
@@ -46,7 +46,7 @@ let SchemaDiffSqlControl =
'<% if (copyRequired) { %><button class="btn btn-secondary ddl-copy d-none">' + gettext('Copy') + '</button> <% } %>',
'<div class="pgadmin-controls pg-el-9 pg-el-12 sql_field_layout <%=extraClasses.join(\' \')%>">',
' <textarea ',
- ' class="<%=Backform.controlClassName%> " name="<%=name%>"',
+ ' class="<%=Backform.controlClassName%> " name="<%=name%>" aria-label="<%=name%>"',
' maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%>',
' rows=<%=rows%>',
' <%=required ? "required" : ""%>><%-value%></textarea>',
@@ -120,7 +120,7 @@ let SchemaDiffSelect2Control =
'<% }%>',
'<div class="<%=controlsClassName%>">',
' <select class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>"',
- ' name="<%=name%>" value="<%-value%>" <%=disabled ? "disabled" : ""%>',
+ ' name="<%=name%>" aria-label="<%=name%>" value="<%-value%>" <%=disabled ? "disabled" : ""%>',
' <%=required ? "required" : ""%><%= select2.multiple ? " multiple>" : ">" %>',
' <%=select2.first_empty ? " <option></option>" : ""%>',
' <% for (var i=0; i < options.length; i++) {%>',
@@ -322,15 +322,13 @@ let SchemaDiffHeaderView = Backform.Form.extend({
<div class="btn-group mr-1" role="group" aria-label="">
<button id="btn-filter" type="button" class="btn btn-primary-icon"
title=""
- accesskey=""
tabindex="0"
style="pointer-events: none;">
<i class="fa fa-filter sql-icon-lg" aria-hidden="true"></i> ` + gettext('Filter') + `
</button>
<button id="btn-filter-dropdown" type="button" class="btn btn-primary-icon dropdown-toggle dropdown-toggle-split"
- data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="filter"
title=""
- accesskey=""
tabindex="0">
</button>` +
[
@@ -492,7 +490,7 @@ let SchemaDiffFooterView = Backform.Form.extend({
}
controls.push(cntr);
});
-
+ $('div.CodeMirror div textarea').attr('aria-label', 'textarea');
let $diff_sc = this.$el.find('.source_ddl'),
$diff_tr = this.$el.find('.target_ddl'),
$diff = this.$el.find('.diff_ddl'),
diff --git a/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js b/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
index 6738a64..ac2a518 100644
--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
@@ -396,10 +396,12 @@ export default class SchemaDiffUI {
self.dataView.onRowCountChanged.subscribe(function () {
grid.updateRowCount();
grid.render();
+ self.accessibility_error();
});
self.dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
+ self.accessibility_error();
});
// Change Row css on the basis of item status
@@ -430,6 +432,7 @@ export default class SchemaDiffUI {
let $data_grid = $('#schema-diff-grid');
grid = this.grid = new Slick.Grid($data_grid, self.dataView, columns, options);
+ $("label[for="+ columns[0].name.split("'")[1] +"]").append('<span style="display:none">checkbox</span>');
grid.registerPlugin(groupItemMetadataProvider);
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
grid.registerPlugin(checkboxSelector);
@@ -483,6 +486,18 @@ export default class SchemaDiffUI {
self.dataView.refresh();
self.resize_grid();
+ self.accessibility_error();
+ }
+
+ accessibility_error() {
+ $('.slick-viewport').scroll(function(){
+ setTimeout(function(){
+ $("span.slick-column-name label").append('<span style="display:none">checkbox</span>');
+ $('div.slick-cell.l0 label').each(function(inx, el){
+ $(el).append('<span style="display:none">checkbox</span>');
+ });
+ }, 0);
+ });
}
handle_generate_button(){
@@ -809,6 +824,7 @@ export default class SchemaDiffUI {
header_panel = self.docker.findPanels('schema_diff_header_panel')[0];
footer_panel.$container.find('#schema-diff-ddl-comp').append(self.footer.render().$el);
+ $('div.CodeMirror div textarea').attr('aria-label', 'textarea');
header_panel.$container.find('#schema-diff-grid').append(`<div class='obj_properties container-fluid'>
<div class='pg-panel-message'>` + gettext('<strong>Database Compare:</strong> Select the server and database for the source and target and Click <strong>Compare</strong>.') +
gettext('</br><strong>Schema Compare:</strong> Select the server, database and schema for the source and target and Click <strong>Compare</strong>.') +
diff --git a/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss b/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
index d8f4529..82cd955 100644
--- a/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
+++ b/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
@@ -133,3 +133,7 @@
.slick-group.active {
color: $schema-diff-color-fg !important;
}
+
+.select2-selection__placeholder {
+ color: $select2-placeholder !important;
+}
^ permalink raw reply [nested|flat] 2+ messages in thread
* Re: [pgAdmin][RM-6065]: Accessibility issues in Schema diff module
2020-12-22 10:31 [pgAdmin][RM-6065]: Accessibility issues in Schema diff module Nikhil Mohite <[email protected]>
@ 2020-12-23 08:52 ` Akshay Joshi <[email protected]>
0 siblings, 0 replies; 2+ messages in thread
From: Akshay Joshi @ 2020-12-23 08:52 UTC (permalink / raw)
To: Nikhil Mohite <[email protected]>; +Cc: pgadmin-hackers
Thanks, patch applied.
On Tue, Dec 22, 2020 at 4:02 PM Nikhil Mohite <
[email protected]> wrote:
> Hi Team,
>
> Please find the attached patch for RM-6065
> <https://redmine.postgresql.org/issues/6065;: Accessibility issues in the
> Schema diff module.
> 1. Resolved accessibility issues with a schema diff tool.
> 2. Resolved contrast issue in codemirror. (updated new color code in
> standard theme).
>
>
> --
> *Thanks & Regards,*
> *Nikhil Mohite*
> *Software Engineer.*
> *EDB Postgres* <https://www.enterprisedb.com/;
> *Mob.No: +91-7798364578.*
>
--
*Thanks & Regards*
*Akshay Joshi*
*pgAdmin Hacker | Principal Software Architect*
*EDB Postgres <http://edbpostgres.com>*
*Mobile: +91 976-788-8246*
^ permalink raw reply [nested|flat] 2+ messages in thread
end of thread, other threads:[~2020-12-23 08:52 UTC | newest]
Thread overview: 2+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2020-12-22 10:31 [pgAdmin][RM-6065]: Accessibility issues in Schema diff module Nikhil Mohite <[email protected]>
2020-12-23 08:52 ` 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