Skip to content

E
edx-platform
Commit e50a6416 by muhammad-ammar Committed by Andy Armstrong
Options

Accessibility changes for Account Settings and Learner Profile pages

parent f1657d1d
Showing with 139 additions and 83 deletions
common/test/acceptance/pages/lms/fields.py
...@@ -182,7 +182,7 @@ class FieldsMixin(object): ...@@ -182,7 +182,7 @@ class FieldsMixin(object):
""" """
self.wait_for_field(field_id) self.wait_for_field(field_id)
return self.q(css='.u-field-{} .u-field-value'.format(field_id)).text[0] return self.q(css='.u-field-{} .u-field-value .u-field-value-readonly'.format(field_id)).text[0]
def value_for_dropdown_field(self, field_id, value=None): def value_for_dropdown_field(self, field_id, value=None):
""" """
...@@ -210,7 +210,7 @@ class FieldsMixin(object): ...@@ -210,7 +210,7 @@ class FieldsMixin(object):
""" """
self.wait_for_field(field_id) self.wait_for_field(field_id)
query = self.q(css='.u-field-{} a'.format(field_id)) query = self.q(css='.u-field-link-title-{}'.format(field_id))
return query.text[0] if query.present else None return query.text[0] if query.present else None
def click_on_link_in_link_field(self, field_id): def click_on_link_in_link_field(self, field_id):
......
lms/static/js/spec/student_account/account_settings_factory_spec.js
...@@ -32,13 +32,13 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -32,13 +32,13 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
var AUTH_DATA = { var AUTH_DATA = {
'providers': [ 'providers': [
{ {
'name': "Network 1", 'name': "Network1",
'connected': true, 'connected': true,
'connect_url': 'yetanother1.com/auth/connect', 'connect_url': 'yetanother1.com/auth/connect',
'disconnect_url': 'yetanother1.com/auth/disconnect' 'disconnect_url': 'yetanother1.com/auth/disconnect'
}, },
{ {
'name': "Network 2", 'name': "Network2",
'connected': true, 'connected': true,
'connect_url': 'yetanother2.com/auth/connect', 'connect_url': 'yetanother2.com/auth/connect',
'disconnect_url': 'yetanother2.com/auth/disconnect' 'disconnect_url': 'yetanother2.com/auth/disconnect'
......
lms/static/js/spec/student_account/account_settings_fields_helpers.js
...@@ -5,11 +5,11 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -5,11 +5,11 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
'use strict'; 'use strict';
var verifyAuthField = function (view, data, requests) { var verifyAuthField = function (view, data, requests) {
var selector = '.u-field-value > a'; var selector = '.u-field-value .u-field-link-title-' + view.options.valueAttribute;
spyOn(view, 'redirect_to'); spyOn(view, 'redirect_to');
FieldViewsSpecHelpers.expectTitleAndMessageToBe(view, data.title, data.helpMessage); FieldViewsSpecHelpers.expectTitleAndMessageToContain(view, data.title, data.helpMessage);
expect(view.$(selector).text().trim()).toBe('Unlink'); expect(view.$(selector).text().trim()).toBe('Unlink');
view.$(selector).click(); view.$(selector).click();
FieldViewsSpecHelpers.expectMessageContains(view, 'Unlinking'); FieldViewsSpecHelpers.expectMessageContains(view, 'Unlinking');
......
lms/static/js/spec/student_profile/helpers.js
...@@ -18,10 +18,10 @@ define(['underscore'], function(_) { ...@@ -18,10 +18,10 @@ define(['underscore'], function(_) {
expect(view.fieldValue()).toBe(view.modelValue()); expect(view.fieldValue()).toBe(view.modelValue());
} else if ('optionForValue' in view) { } else if ('optionForValue' in view) {
expect($($element.find('.u-field-value')[0]).text()).toBe(view.displayValue(view.modelValue())); expect($($element.find('.u-field-value .u-field-value-readonly')[0]).text()).toBe(view.displayValue(view.modelValue()));
}else { }else {
expect($($element.find('.u-field-value')[0]).text()).toBe(view.modelValue()); expect($($element.find('.u-field-value .u-field-value-readonly')[0]).text()).toBe(view.modelValue());
} }
} else { } else {
throw new Error('Unexpected field type: ' + view.fieldType); throw new Error('Unexpected field type: ' + view.fieldType);
......
lms/static/js/spec/views/fields_helpers.js
...@@ -59,19 +59,19 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -59,19 +59,19 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
}; };
}; };
var expectTitleToBe = function(view, expectedTitle) { var expectTitleToContain = function(view, expectedTitle) {
expect(view.$('.u-field-title').text().trim()).toBe(expectedTitle); expect(view.$('.u-field-title').text().trim()).toContain(expectedTitle);
};
var expectTitleAndMessageToBe = function(view, expectedTitle, expectedMessage) {
expectTitleToBe(view, expectedTitle);
expect(view.$('.u-field-message').text().trim()).toBe(expectedMessage);
}; };
var expectMessageContains = function(view, expectedText) { var expectMessageContains = function(view, expectedText) {
expect(view.$('.u-field-message').html()).toContain(expectedText); expect(view.$('.u-field-message').html()).toContain(expectedText);
}; };
var expectTitleAndMessageToContain = function(view, expectedTitle, expectedMessage) {
expectTitleToContain(view, expectedTitle);
expectMessageContains(view, expectedMessage);
};
var expectAjaxRequestWithData = function(requests, data) { var expectAjaxRequestWithData = function(requests, data) {
AjaxHelpers.expectJsonRequest( AjaxHelpers.expectJsonRequest(
requests, 'PATCH', API_URL, data requests, 'PATCH', API_URL, data
...@@ -82,7 +82,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -82,7 +82,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
var message = 'Here to help!'; var message = 'Here to help!';
view.message(message); view.showHelpMessage(message);
expectMessageContains(view, message); expectMessageContains(view, message);
view.showHelpMessage(); view.showHelpMessage();
...@@ -121,7 +121,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -121,7 +121,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
view.showSuccessMessage(); view.showSuccessMessage();
expectMessageContains(view, view.indicators.success); expectMessageContains(view, view.indicators.success);
// But if we change the message, it should not get reset. // But if we change the message, it should not get reset.
view.message("Do not reset this!"); view.showHelpMessage("Do not reset this!");
jasmine.Clock.tick(5000); jasmine.Clock.tick(5000);
expectMessageContains(view, "Do not reset this!"); expectMessageContains(view, "Do not reset this!");
}; };
...@@ -132,15 +132,15 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -132,15 +132,15 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
if (data.editable === 'toggle') { if (data.editable === 'toggle') {
expect(view.el).toHaveClass('mode-placeholder'); expect(view.el).toHaveClass('mode-placeholder');
expectTitleToBe(view, data.title); expectTitleToContain(view, data.title);
expectMessageContains(view, view.indicators.canEdit); expectMessageContains(view, view.indicators.canEdit);
view.$el.click(); view.$el.click();
} else { } else {
expectTitleAndMessageToBe(view, data.title, data.helpMessage); expectTitleAndMessageToContain(view, data.title, data.helpMessage, false);
} }
expect(view.el).toHaveClass('mode-edit'); expect(view.el).toHaveClass('mode-edit');
expect(view.fieldValue()).not.toBe(data.validValue); expect(view.fieldValue()).not.toContain(data.validValue);
view.$(data.valueInputSelector).val(data.validValue).change(); view.$(data.valueInputSelector).val(data.validValue).change();
// When the value in the field is changed // When the value in the field is changed
...@@ -220,8 +220,8 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -220,8 +220,8 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
UserAccountModel: UserAccountModel, UserAccountModel: UserAccountModel,
createFieldData: createFieldData, createFieldData: createFieldData,
createErrorMessage: createErrorMessage, createErrorMessage: createErrorMessage,
expectTitleToBe: expectTitleToBe, expectTitleToContain: expectTitleToContain,
expectTitleAndMessageToBe: expectTitleAndMessageToBe, expectTitleAndMessageToContain: expectTitleAndMessageToContain,
expectMessageContains: expectMessageContains, expectMessageContains: expectMessageContains,
expectAjaxRequestWithData: expectAjaxRequestWithData, expectAjaxRequestWithData: expectAjaxRequestWithData,
verifyMessageUpdates: verifyMessageUpdates, verifyMessageUpdates: verifyMessageUpdates,
......
lms/static/js/spec/views/fields_spec.js
...@@ -96,7 +96,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -96,7 +96,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
}); });
var view = new FieldViews.ReadonlyFieldView(fieldData).render(); var view = new FieldViews.ReadonlyFieldView(fieldData).render();
FieldViewsSpecHelpers.expectTitleAndMessageToBe(view, fieldData.title, fieldData.helpMessage); FieldViewsSpecHelpers.expectTitleAndMessageToContain(view, fieldData.title, fieldData.helpMessage, false);
expect(view.$('.u-field-value input').val().trim()).toBe(USERNAME); expect(view.$('.u-field-value input').val().trim()).toBe(USERNAME);
view.model.set({'username': 'bookworm'}); view.model.set({'username': 'bookworm'});
...@@ -137,7 +137,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -137,7 +137,7 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
}); });
var view = new FieldViews.DropdownFieldView(fieldData).render(); var view = new FieldViews.DropdownFieldView(fieldData).render();
FieldViewsSpecHelpers.expectTitleAndMessageToBe(view, fieldData.title, fieldData.helpMessage); FieldViewsSpecHelpers.expectTitleAndMessageToContain(view, fieldData.title, fieldData.helpMessage, false);
expect(view.el).toHaveClass('mode-hidden'); expect(view.el).toHaveClass('mode-hidden');
view.model.set({'name': fieldData.options[1][0]}); view.model.set({'name': fieldData.options[1][0]});
...@@ -205,14 +205,14 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -205,14 +205,14 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
// set bio to empty to see the placeholder. // set bio to empty to see the placeholder.
fieldData.model.set({bio: ''}); fieldData.model.set({bio: ''});
var view = new FieldViews.TextareaFieldView(fieldData).render(); var view = new FieldViews.TextareaFieldView(fieldData).render();
FieldViewsSpecHelpers.expectTitleAndMessageToBe(view, fieldData.title, fieldData.helpMessage); FieldViewsSpecHelpers.expectTitleAndMessageToContain(view, fieldData.title, fieldData.helpMessage, false);
expect(view.el).toHaveClass('mode-hidden'); expect(view.el).toHaveClass('mode-hidden');
expect(view.$('.u-field-value').text()).toBe(fieldData.placeholderValue); expect(view.$('.u-field-value .u-field-value-readonly').text()).toBe(fieldData.placeholderValue);
var bio = 'Too much to tell!'; var bio = 'Too much to tell!';
view.model.set({'bio': bio}); view.model.set({'bio': bio});
expect(view.el).toHaveClass('mode-display'); expect(view.el).toHaveClass('mode-display');
expect(view.$('.u-field-value').text()).toBe(bio); expect(view.$('.u-field-value .u-field-value-readonly').text()).toBe(bio);
view.$el.click(); view.$el.click();
expect(view.el).toHaveClass('mode-display'); expect(view.el).toHaveClass('mode-display');
}); });
...@@ -235,10 +235,10 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -235,10 +235,10 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
var view = new FieldViews.TextareaFieldView(fieldData).render(); var view = new FieldViews.TextareaFieldView(fieldData).render();
FieldViewsSpecHelpers.expectTitleToBe(view, fieldData.title); FieldViewsSpecHelpers.expectTitleToContain(view, fieldData.title);
FieldViewsSpecHelpers.expectMessageContains(view, view.indicators.canEdit); FieldViewsSpecHelpers.expectMessageContains(view, view.indicators.canEdit);
expect(view.el).toHaveClass('mode-placeholder'); expect(view.el).toHaveClass('mode-placeholder');
expect(view.$('.u-field-value').text()).toBe(fieldData.placeholderValue); expect(view.$('.u-field-value .u-field-value-readonly').text()).toBe(fieldData.placeholderValue);
view.$('.wrapper-u-field').click(); view.$('.wrapper-u-field').click();
expect(view.el).toHaveClass('mode-edit'); expect(view.el).toHaveClass('mode-edit');
...@@ -254,19 +254,20 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j ...@@ -254,19 +254,20 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
view.$(valueInputSelector).val('').focusout(); view.$(valueInputSelector).val('').focusout();
AjaxHelpers.respondWithNoContent(requests); AjaxHelpers.respondWithNoContent(requests);
expect(view.el).toHaveClass('mode-placeholder'); expect(view.el).toHaveClass('mode-placeholder');
expect(view.$('.u-field-value').text()).toBe(fieldData.placeholderValue); expect(view.$('.u-field-value .u-field-value-readonly').text()).toBe(fieldData.placeholderValue);
}); });
it("correctly renders LinkFieldView", function() { it("correctly renders LinkFieldView", function() {
var fieldData = FieldViewsSpecHelpers.createFieldData(FieldViews.LinkFieldView, { var fieldData = FieldViewsSpecHelpers.createFieldData(FieldViews.LinkFieldView, {
title: 'Title', title: 'Title',
linkTitle: 'Link title', linkTitle: 'Link title',
helpMessage: 'Click the link.' helpMessage: 'Click the link.',
valueAttribute: 'password-reset'
}); });
var view = new FieldViews.LinkFieldView(fieldData).render(); var view = new FieldViews.LinkFieldView(fieldData).render();
FieldViewsSpecHelpers.expectTitleAndMessageToBe(view, fieldData.title, fieldData.helpMessage); FieldViewsSpecHelpers.expectTitleAndMessageToContain(view, fieldData.title, fieldData.helpMessage, false);
expect(view.$('.u-field-value > a').text().trim()).toBe(fieldData.linkTitle); expect(view.$('.u-field-value > a .u-field-link-title-' + view.options.valueAttribute).text().trim()).toBe(fieldData.linkTitle);
}); });
}); });
}); });
lms/static/js/student_account/views/account_settings_factory.js
...@@ -58,10 +58,11 @@ ...@@ -58,10 +58,11 @@
view: new AccountSettingsFieldViews.PasswordFieldView({ view: new AccountSettingsFieldViews.PasswordFieldView({
model: userAccountModel, model: userAccountModel,
title: gettext('Password'), title: gettext('Password'),
screenReaderTitle: gettext('Reset your Password'),
valueAttribute: 'password', valueAttribute: 'password',
emailAttribute: 'email', emailAttribute: 'email',
linkTitle: gettext('Reset Password'), linkTitle: gettext('Reset Password'),
linkHref: fieldsData.password.url, linkHref: fieldsData['password']['url'],
helpMessage: gettext( helpMessage: gettext(
'When you click "Reset Password", a message will be sent to your email address. ' + 'When you click "Reset Password", a message will be sent to your email address. ' +
'Click the link in the message to reset your password.' 'Click the link in the message to reset your password.'
...@@ -139,6 +140,9 @@ ...@@ -139,6 +140,9 @@
return { return {
'view': new AccountSettingsFieldViews.AuthFieldView({ 'view': new AccountSettingsFieldViews.AuthFieldView({
title: provider.name, title: provider.name,
screenReaderTitle: interpolate_text(
gettext("Connect your {accountName} account"), {accountName: provider['name']}
),
valueAttribute: 'auth-' + provider.name.toLowerCase(), valueAttribute: 'auth-' + provider.name.toLowerCase(),
helpMessage: '', helpMessage: '',
connected: provider.connected, connected: provider.connected,
......
lms/static/js/student_account/views/account_settings_fields.js
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
view.showSuccessMessage(); view.showSuccessMessage();
}, },
error: function () { error: function () {
view.message( view.showNotificationMessage(
view.indicators.error + view.indicators.error +
gettext( gettext(
'You must sign out of edX and sign back in before your language ' + 'You must sign out of edX and sign back in before your language ' +
...@@ -121,6 +121,7 @@ ...@@ -121,6 +121,7 @@
this.$el.html(this.template({ this.$el.html(this.template({
id: this.options.valueAttribute, id: this.options.valueAttribute,
title: this.options.title, title: this.options.title,
screenReaderTitle: this.options.screenReaderTitle,
linkTitle: this.options.connected ? gettext('Unlink') : gettext('Link'), linkTitle: this.options.connected ? gettext('Unlink') : gettext('Link'),
linkHref: '', linkHref: '',
message: this.helpMessage message: this.helpMessage
......
lms/static/js/student_profile/views/learner_profile_factory.js
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
var sectionOneFieldViews = [ var sectionOneFieldViews = [
new FieldsView.DropdownFieldView({ new FieldsView.DropdownFieldView({
model: accountSettingsModel, model: accountSettingsModel,
screenReaderTitle: gettext('Location'),
required: true, required: true,
editable: editable, editable: editable,
showMessages: false, showMessages: false,
...@@ -76,6 +77,7 @@ ...@@ -76,6 +77,7 @@
}), }),
new AccountSettingsFieldViews.LanguageProficienciesFieldView({ new AccountSettingsFieldViews.LanguageProficienciesFieldView({
model: accountSettingsModel, model: accountSettingsModel,
screenReaderTitle: gettext('Preferred Language'),
required: false, required: false,
editable: editable, editable: editable,
showMessages: false, showMessages: false,
......
lms/static/js/student_profile/views/learner_profile_fields.js
...@@ -10,12 +10,12 @@ ...@@ -10,12 +10,12 @@
render: function () { render: function () {
this._super(); this._super();
this.message(); this.showNotificationMessage();
this.updateFieldValue(); this.updateFieldValue();
return this; return this;
}, },
message: function () { showNotificationMessage: function () {
var accountSettingsLink = '<a href="' + this.options.accountSettingsPageUrl + '">' + gettext('Account Settings page.') + '</a>'; var accountSettingsLink = '<a href="' + this.options.accountSettingsPageUrl + '">' + gettext('Account Settings page.') + '</a>';
if (this.profileIsPrivate) { if (this.profileIsPrivate) {
this._super(interpolate_text( this._super(interpolate_text(
......
lms/static/js/views/fields.js
...@@ -20,12 +20,12 @@ ...@@ -20,12 +20,12 @@
tagName: 'div', tagName: 'div',
indicators: { indicators: {
'canEdit': '<i class="icon fa fa-pencil message-can-edit" aria-hidden="true"></i>', 'canEdit': '<i class="icon fa fa-pencil message-can-edit" aria-hidden="true"></i><span class="sr">gettext("Editable")</span>',
'error': '<i class="fa fa-exclamation-triangle message-error" aria-hidden="true"></i>', 'error': '<i class="fa fa-exclamation-triangle message-error" aria-hidden="true"></i><span class="sr">gettext("Error")</span>',
'validationError': '<i class="fa fa-exclamation-triangle message-validation-error" aria-hidden="true"></i>', 'validationError': '<i class="fa fa-exclamation-triangle message-validation-error" aria-hidden="true"></i><span class="sr">gettext("Validation Error")</span>',
'inProgress': '<i class="fa fa-spinner fa-pulse message-in-progress" aria-hidden="true"></i>', 'inProgress': '<i class="fa fa-spinner fa-pulse message-in-progress" aria-hidden="true"></i><span class="sr">gettext("In Progress")</span>',
'success': '<i class="fa fa-check message-success" aria-hidden="true"></i>', 'success': '<i class="fa fa-check message-success" aria-hidden="true"></i><span class="sr">gettext("Success")</span>',
'plus': '<i class="fa fa-plus placeholder" aria-hidden="true"></i>' 'plus': '<i class="fa fa-plus placeholder" aria-hidden="true"></i><span class="sr">gettext("Placeholder")</span>'
}, },
messages: { messages: {
...@@ -36,15 +36,17 @@ ...@@ -36,15 +36,17 @@
'success': gettext('Your changes have been saved.') 'success': gettext('Your changes have been saved.')
}, },
initialize: function (options) { initialize: function () {
this.template = _.template($(this.templateSelector).text()); this.template = _.template($(this.templateSelector).text());
this.helpMessage = this.options.helpMessage || ''; this.helpMessage = this.options.helpMessage || '';
this.showMessages = _.isUndefined(this.options.showMessages) ? true : this.options.showMessages; this.showMessages = _.isUndefined(this.options.showMessages) ? true : this.options.showMessages;
_.bindAll(this, 'modelValue', 'modelValueIsSet', 'message', 'getMessage', 'title', _.bindAll(this, 'modelValue', 'modelValueIsSet', 'showNotificationMessage','getNotificationMessage',
'showHelpMessage', 'showInProgressMessage', 'showSuccessMessage', 'showErrorMessage'); 'getMessage', 'title', 'showHelpMessage', 'showInProgressMessage', 'showSuccessMessage',
'showErrorMessage'
);
}, },
modelValue: function () { modelValue: function () {
...@@ -55,10 +57,6 @@ ...@@ -55,10 +57,6 @@
return (this.modelValue() === true); return (this.modelValue() === true);
}, },
message: function (message) {
return this.$('.u-field-message').html(message);
},
title: function (text) { title: function (text) {
return this.$('.u-field-title').html(text); return this.$('.u-field-title').html(text);
}, },
...@@ -72,25 +70,38 @@ ...@@ -72,25 +70,38 @@
return this.indicators[message_status]; return this.indicators[message_status];
}, },
showHelpMessage: function (message) {
if (_.isUndefined(message) || _.isNull(message)) {
message = this.helpMessage;
}
this.$('.u-field-message-notification').html('');
this.$('.u-field-message-help').html(message);
},
getNotificationMessage: function() {
return this.$('.u-field-message-notification').html();
},
showNotificationMessage: function(message) {
this.$('.u-field-message-help').html('');
this.$('.u-field-message-notification').html(message);
},
showCanEditMessage: function(show) { showCanEditMessage: function(show) {
if (!_.isUndefined(show) && show) { if (!_.isUndefined(show) && show) {
this.message(this.getMessage('canEdit')); this.showNotificationMessage(this.getMessage('canEdit'));
} else { } else {
this.message(''); this.showNotificationMessage('');
} }
}, },
showHelpMessage: function () {
this.message(this.helpMessage);
},
showInProgressMessage: function () { showInProgressMessage: function () {
this.message(this.getMessage('inProgress')); this.showNotificationMessage(this.getMessage('inProgress'));
}, },
showSuccessMessage: function () { showSuccessMessage: function () {
var successMessage = this.getMessage('success'); var successMessage = this.getMessage('success');
this.message(successMessage); this.showNotificationMessage(successMessage);
if (this.options.refreshPageOnSave) { if (this.options.refreshPageOnSave) {
document.location.reload(); document.location.reload();
...@@ -102,7 +113,7 @@ ...@@ -102,7 +113,7 @@
this.lastSuccessMessageContext = context; this.lastSuccessMessageContext = context;
setTimeout(function () { setTimeout(function () {
if ((context === view.lastSuccessMessageContext) && (view.message().html() === successMessage)) { if ((context === view.lastSuccessMessageContext) && (view.getNotificationMessage() === successMessage)) {
view.showHelpMessage(); view.showHelpMessage();
} }
}, messageRevertDelay); }, messageRevertDelay);
...@@ -116,12 +127,12 @@ ...@@ -116,12 +127,12 @@
errors.field_errors[this.options.valueAttribute].user_message errors.field_errors[this.options.valueAttribute].user_message
), ),
message = this.indicators.validationError + validationErrorMessage; message = this.indicators.validationError + validationErrorMessage;
this.message(message); this.showNotificationMessage(message);
} catch (error) { } catch (error) {
this.message(this.getMessage('error')); this.showNotificationMessage(this.getMessage('error'));
} }
} else { } else {
this.message(this.getMessage('error')); this.showNotificationMessage(this.getMessage('error'));
} }
} }
}); });
...@@ -305,6 +316,7 @@ ...@@ -305,6 +316,7 @@
id: this.options.valueAttribute, id: this.options.valueAttribute,
mode: this.mode, mode: this.mode,
title: this.options.title, title: this.options.title,
screenReaderTitle: this.options.screenReaderTitle || this.options.title,
iconName: this.options.iconName, iconName: this.options.iconName,
required: this.options.required, required: this.options.required,
selectOptions: this.options.options, selectOptions: this.options.options,
...@@ -351,7 +363,8 @@ ...@@ -351,7 +363,8 @@
if (this.modelValueIsSet() === false) { if (this.modelValueIsSet() === false) {
value = this.options.placeholderValue || ''; value = this.options.placeholderValue || '';
} }
this.$('.u-field-value').html(Mustache.escapeHtml(value)); this.$('.u-field-value').attr('aria-label', this.options.title);
this.$('.u-field-value-readonly').html(Mustache.escapeHtml(value));
this.showDisplayMode(false); this.showDisplayMode(false);
} else { } else {
this.$('.u-field-value select').val(this.modelValue() || ''); this.$('.u-field-value select').val(this.modelValue() || '');
...@@ -413,9 +426,11 @@ ...@@ -413,9 +426,11 @@
} }
this.$el.html(this.template({ this.$el.html(this.template({
id: this.options.valueAttribute, id: this.options.valueAttribute,
screenReaderTitle: this.options.screenReaderTitle || this.options.title,
mode: this.mode, mode: this.mode,
value: value, value: value,
message: this.helpMessage message: this.helpMessage,
placeholderValue: this.options.placeholderValue
})); }));
this.delegateEvents(); this.delegateEvents();
this.title((this.modelValue() || this.mode === 'edit') ? this.options.title : this.indicators['plus'] + this.options.title); this.title((this.modelValue() || this.mode === 'edit') ? this.options.title : this.indicators['plus'] + this.options.title);
...@@ -489,6 +504,7 @@ ...@@ -489,6 +504,7 @@
this.$el.html(this.template({ this.$el.html(this.template({
id: this.options.valueAttribute, id: this.options.valueAttribute,
title: this.options.title, title: this.options.title,
screenReaderTitle: this.options.screenReaderTitle || this.options.title,
linkTitle: this.options.linkTitle, linkTitle: this.options.linkTitle,
linkHref: this.options.linkHref, linkHref: this.options.linkHref,
message: this.helpMessage message: this.helpMessage
......
lms/static/sass/shared/_fields.scss
...@@ -87,8 +87,9 @@ ...@@ -87,8 +87,9 @@
color: $gray; color: $gray;
vertical-align: top; vertical-align: top;
margin-bottom: 0; margin-bottom: 0;
-webkit-font-smoothing: antialiased;
label { label, span {
@include margin-left($baseline/2); @include margin-left($baseline/2);
} }
} }
...@@ -114,4 +115,9 @@ ...@@ -114,4 +115,9 @@
i { i {
@include margin-right($baseline/4); @include margin-right($baseline/4);
} }
.u-field-message-help,
.u-field-message-notification {
color: $gray-l1;
}
} }
lms/static/sass/views/_account-settings.scss
...@@ -66,4 +66,15 @@ ...@@ -66,4 +66,15 @@
box-shadow: 0 0 1px 1px $shadow-l2; box-shadow: 0 0 1px 1px $shadow-l2;
border-radius: 5px; border-radius: 5px;
} }
a span {
color: $link-color;
}
a span {
&:hover, &:focus {
color: $pink;
text-decoration: none !important;
}
}
} }
lms/templates/fields/field_dropdown.underscore
...@@ -5,12 +5,12 @@ ...@@ -5,12 +5,12 @@
<% } %> <% } %>
<% if (iconName) { %> <% if (iconName) { %>
<i class="u-field-icon icon fa <%- iconName %> fa-fw" area-hidden="true" ></i> <i class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true" ></i>
<% } %> <% } %>
<span class="u-field-value"> <span class="u-field-value">
<% if (mode === 'edit') { %> <% if (mode === 'edit') { %>
<select name="select" id="u-field-select-<%- id %>" aria-describedby="u-field-message-<%- id %>"> <select name="select" id="u-field-select-<%- id %>" aria-describedby="u-field-help-message-<%- id %>">
<% if (!required) { %> <% if (!required) { %>
<option value=""></option> <option value=""></option>
<% } %> <% } %>
...@@ -18,9 +18,16 @@ ...@@ -18,9 +18,16 @@
<option value="<%- selectOption[0] %>"><%- selectOption[1] %></option> <option value="<%- selectOption[0] %>"><%- selectOption[1] %></option>
<% }); %> <% }); %>
</select> </select>
<% } %> <% } else { %>
<a href="#" class="u-field-value-display">
<span class="sr"><%- gettext(screenReaderTitle) %></span>
<span class="u-field-value-readonly"></span>
<span class="sr"><%- gettext('Click to edit') %></span>
</a>
<% }%>
</span> </span>
<span class="u-field-message" id="u-field-message-<%- id %>"> <span class="u-field-message" id="u-field-message-<%- id %>">
<%- gettext(message) %> <span class="u-field-message-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-help-message-<%- id %>"><%- gettext(message) %></span>
</span> </span>
lms/templates/fields/field_link.underscore
<label class="u-field-title" for="u-field-link-<%- id %>"> <span class="u-field-title" for="u-field-link-<%- id %>">
<%- gettext(title) %> <%- gettext(title) %>
</label> </span>
<span class="u-field-value"> <span class="u-field-value">
<a id="u-field-link-<%- id %>" href="<%- gettext(linkHref) %>" aria-describedby="u-field-message-<%- id %>"> <a id="u-field-link-<%- id %>" href="<%- linkHref %>" aria-describedby="u-field-message-help-<%- id %>">
<%- gettext(linkTitle) %> <span class="sr"><%- gettext(screenReaderTitle) %></span>
<span class="u-field-link-title-<%- id %>" aria-hidden="true"><%- gettext(linkTitle) %></span>
</a> </a>
</span> </span>
<span class="u-field-message" id="u-field-message-<%- id %>"> <span class="u-field-message" id="u-field-message-<%- id %>">
<%- gettext(message) %> <span class="u-field-message-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-message-help-<%- id %>"><%- gettext(message) %></span>
</span> </span>
lms/templates/fields/field_readonly.underscore
...@@ -5,5 +5,6 @@ ...@@ -5,5 +5,6 @@
<input id="u-field-input-<%- id %>" aria-describedby="u-field-message-<%- id %>" type="text" name="input" readonly=true value="<%- gettext(value) %>"> <input id="u-field-input-<%- id %>" aria-describedby="u-field-message-<%- id %>" type="text" name="input" readonly=true value="<%- gettext(value) %>">
</span> </span>
<span class="u-field-message" id="u-field-message-<%- id %>"> <span class="u-field-message" id="u-field-message-<%- id %>">
<%- gettext(message) %> <span class="u-field-message-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-help-message-<%- id %>"> <%- gettext(message) %></span>
</span> </span>
lms/templates/fields/field_text.underscore
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
<%- gettext(title) %> <%- gettext(title) %>
</label> </label>
<span class="u-field-value"> <span class="u-field-value">
<input id="u-field-input-<%- id %>" aria-describedby="u-field-message-<%- id %>" type="text" name="input" value="<%- gettext(value) %>"> <input id="u-field-input-<%- id %>" aria-describedby="u-field-message-help-<%- id %>" type="text" name="input" value="<%- gettext(value) %>">
</span> </span>
<span class="u-field-message" id="u-field-message-<%- id %>"> <span class="u-field-message" id="u-field-message-<%- id %>">
<%- gettext(message) %> <span class="u-field-message-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-message-help-<%- id %>"> <%- gettext(message) %></span>
</span> </span>
lms/templates/fields/field_textarea.underscore
<div class="wrapper-u-field"> <div class="wrapper-u-field">
<div class="u-field-header"> <div class="u-field-header">
<label class="u-field-title" for="u-field-textarea-<%- id %>" aria-describedby="u-field-message-<%- id %>"></label> <label class="u-field-title" for="u-field-textarea-<%- id %>" id="u-field-title-<%- id %>" aria-describedby="u-field-message-help-<%- id %>"></label>
<span class="u-field-message" id="u-field-message-<%- id %>"><%- message %></span> <span class="u-field-message" id="u-field-message-<%- id %>">
<span class="u-field-message-notification" aria-live="polite"></span>
<span class="u-field-message-help" id="u-field-message-help-<%- id %>"> <%- gettext(message) %></span>
</span>
</div> </div>
<div class="u-field-value"><% <div class="u-field-value" id="u-field-value-<%- id %>" aria-labelledby="u-field-title-<%- id %>"><%
if (mode === 'edit') { if (mode === 'edit') {
%><textarea id="u-field-textarea-<%- id %>" rows="4"><%- value %></textarea><% %><textarea id="u-field-textarea-<%- id %>" rows="4" aria-describedby="u-field-placeholder-value-<%- id %>"><%- value %></textarea><%
} else { } else {
%><%- value %><% %><a href="#" class="u-field-value-display"><span class="sr"><%- gettext(screenReaderTitle) %></span><span class="u-field-value-readonly" aria-hidden="false" aria-describedby="u-field-placeholder-value-<%- id %>"><%- value %></span><span class="sr"><%- gettext('Click to edit') %></span></a><%
} }
%></div> %><span class="sr" id="u-field-placeholder-value-<%- id %>"><%- gettext(placeholderValue) %></span>
</div>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment