IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed accessibility issues in schema diff module. Fixes #6065

Browse Source
This commit is contained in:
Nikhil Mohite 2020-12-23 12:57:16 +05:30 committed by Akshay Joshi
parent ed5fc20ee2
commit c933771016
8 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en_US/release_notes_4_30.rst
View File

@ -25,4 +25,5 @@ Bug fixes
| `Issue #6046 <https://redmine.postgresql.org/issues/6046>`_ - Fixed an issue where the state of the Save File icon does not match the dirty editor indicator.
| `Issue #6047 <https://redmine.postgresql.org/issues/6047>`_ - Fixed an issue where the dirty indicator stays active even if all changes were undone.
| `Issue #6058 <https://redmine.postgresql.org/issues/6058>`_ - Ensure that the rename panel should be disabled when the SQL file opened in the query tool.
| `Issue #6065 <https://redmine.postgresql.org/issues/6065>`_ - Fixed accessibility issues in schema diff module.
| `Issue #6084 <https://redmine.postgresql.org/issues/6084>`_ - Fixed TypeError exception in schema diff when selected any identical object.

10
web/pgadmin/static/js/backform.pgadmin.js
View File

@ -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>',

3
web/pgadmin/static/scss/resources/_default.variables.scss
View File

@ -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;

2
web/pgadmin/static/scss/resources/dark/_theme.variables.scss
View File

@ -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;

1
web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
View File

@ -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;

10
web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
View File

@ -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>&nbsp;` + 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'),

16
web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
View File

@ -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>.') +

4
web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
View File

@ -133,3 +133,7 @@
.slick-group.active {
color: $schema-diff-color-fg !important;
}
.select2-selection__placeholder {
color: $select2-placeholder !important;
}