Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility tweaks for account settings and profile pages.

Browse Source 
TNL-1660
This commit is contained in:
Usman Khalid
2015-04-20 15:29:38 +05:00
committed by muzaffaryousaf
parent 7babb3efed
commit a14e6f0a7e
14 changed files with 105 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lms/static/js/views/fields.js
View File

@@ -6,7 +6,7 @@
var Mustache = window.Mustache || RequireMustache;
var messageRevertDelay = 4000;
var messageRevertDelay = 6000;
var FieldViews = {};
FieldViews.FieldView = Backbone.View.extend({
@@ -176,10 +176,7 @@
this.showSuccessMessage();
},
showDisplayMode: function(render) {
this.mode = 'display';
if (render) { this.render(); }
updateDisplayModeClass: function() {
this.$el.removeClass('mode-edit');
this.$el.toggleClass('mode-hidden', (this.editable === 'never' && !this.modelValueIsSet()));
@@ -187,6 +184,12 @@
this.$el.toggleClass('mode-display', (this.modelValueIsSet()));
},
showDisplayMode: function(render) {
this.mode = 'display';
if (render) { this.render(); }
this.updateDisplayModeClass();
},
showEditMode: function(render) {
this.mode = 'edit';
if (render) { this.render(); }
@@ -233,6 +236,7 @@
this.$el.html(this.template({
id: this.options.valueAttribute,
title: this.options.title,
screenReaderTitle: this.options.screenReaderTitle || this.options.title,
value: this.modelValue(),
message: this.helpMessage
}));
@@ -345,7 +349,8 @@
},
fieldValue: function () {
return this.$('.u-field-value select').val();
var value = this.$('.u-field-value select').val();
return value === '' ? null : value;
},
displayValue: function (value) {
@@ -358,16 +363,17 @@
},
updateValueInField: function () {
this.$('.u-field-value select').val(this.modelValue() || '');
var value = this.displayValue(this.modelValue() || '');
if (this.modelValueIsSet() === false) {
value = this.options.placeholderValue || '';
}
this.$('.u-field-value').attr('aria-label', this.options.title);
this.$('.u-field-value-readonly').html(Mustache.escapeHtml(value));
if (this.mode === 'display') {
var value = this.displayValue(this.modelValue() || '');
if (this.modelValueIsSet() === false) {
value = this.options.placeholderValue || '';
}
this.$('.u-field-value').attr('aria-label', this.options.title);
this.$('.u-field-value-readonly').html(Mustache.escapeHtml(value));
this.showDisplayMode(false);
} else {
this.$('.u-field-value select').val(this.modelValue() || '');
this.updateDisplayModeClass();
}
},
@@ -377,6 +383,13 @@
this.saveAttributes(attributes);
},
showDisplayMode: function(render) {
this._super(render);
if (this.editable === 'toggle') {
this.$('.u-field-value a').focus();
}
},
showEditMode: function(render) {
this._super(render);
if (this.editable === 'toggle') {
@@ -386,10 +399,13 @@
saveSucceeded: function() {
if (this.editable === 'toggle') {
this.showDisplayMode(true);
} else {
this.showEditMode(true);
this.showDisplayMode();
}
if (this.options.required && this.modelValueIsSet()) {
this.$('option[value=""]').remove();
}
this._super();
},
@@ -410,13 +426,13 @@
'focusout textarea': 'finishEditing',
'change textarea': 'adjustTextareaHeight',
'keyup textarea': 'adjustTextareaHeight',
'keydown textarea': 'adjustTextareaHeight',
'keydown textarea': 'onKeyDown',
'paste textarea': 'adjustTextareaHeight',
'cut textarea': 'adjustTextareaHeight'
},
initialize: function (options) {
_.bindAll(this, 'render', 'adjustTextareaHeight', 'fieldValue', 'saveValue', 'updateView');
_.bindAll(this, 'render', 'onKeyDown', 'adjustTextareaHeight', 'fieldValue', 'saveValue', 'updateView');
this._super(options);
this.listenTo(this.model, "change:" + this.options.valueAttribute, this.updateView);
},
@@ -443,6 +459,15 @@
return this;
},
onKeyDown: function (event) {
if (event.keyCode === 13) {
event.preventDefault();
this.finishEditing(event);
} else {
this.adjustTextareaHeight();
}
},
adjustTextareaHeight: function() {
var textarea = this.$('textarea');
textarea.css('height', 'auto').css('height', textarea.prop('scrollHeight') + 10);
@@ -483,6 +508,7 @@
this._super();
if (this.editable === 'toggle') {
this.showDisplayMode(true);
this.$('a').focus();
}
}
});
@@ -552,7 +578,6 @@
this._super(options);
_.bindAll(this, 'render', 'imageChangeSucceeded', 'imageChangeFailed', 'fileSelected',
'watchForPageUnload', 'onBeforeUnload');
this.listenTo(this.model, "change:" + this.options.valueAttribute, this.render);
},
render: function () {