diff --git a/lms/static/js/student_profile/views/learner_profile_fields.js b/lms/static/js/student_profile/views/learner_profile_fields.js
index 29f75edf5c..8659e457c5 100644
--- a/lms/static/js/student_profile/views/learner_profile_fields.js
+++ b/lms/static/js/student_profile/views/learner_profile_fields.js
@@ -44,6 +44,8 @@
LearnerProfileFieldViews.ProfileImageFieldView = FieldViews.ImageFieldView.extend({
+ screenReaderTitle: gettext('Profile Image'),
+
imageUrl: function () {
return this.model.profileImageUrl();
},
diff --git a/lms/static/js/views/fields.js b/lms/static/js/views/fields.js
index c8c3b317dc..c0424b4ada 100644
--- a/lms/static/js/views/fields.js
+++ b/lms/static/js/views/fields.js
@@ -561,6 +561,7 @@
titleRemoving: gettext("Removing"),
titleImageAlt: '',
+ screenReaderTitle: gettext("Image"),
iconUpload: '',
iconRemove: '',
@@ -571,7 +572,9 @@
events: {
'click .u-field-upload-button': 'clickedUploadButton',
'click .u-field-remove-button': 'clickedRemoveButton',
- 'click .upload-submit': 'clickedUploadButton'
+ 'click .upload-submit': 'clickedUploadButton',
+ 'focus .upload-button-input': 'showHoverState',
+ 'blur .upload-button-input': 'hideHoverState'
},
initialize: function (options) {
@@ -589,7 +592,8 @@
uploadButtonIcon: _.result(this, 'iconUpload'),
uploadButtonTitle: _.result(this, 'uploadButtonTitle'),
removeButtonIcon: _.result(this, 'iconRemove'),
- removeButtonTitle: _.result(this, 'removeButtonTitle')
+ removeButtonTitle: _.result(this, 'removeButtonTitle'),
+ screenReaderTitle: _.result(this, 'screenReaderTitle')
}));
this.delegateEvents();
this.updateButtonsVisibility();
@@ -597,6 +601,14 @@
return this;
},
+ showHoverState: function () {
+ this.$('.u-field-upload-button').addClass('button-visible');
+ },
+
+ hideHoverState: function () {
+ this.$('.u-field-upload-button').removeClass('button-visible');
+ },
+
showErrorMessage: function (message) {
return message;
},
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index 3c96ff9af4..690597563b 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -37,6 +37,12 @@
display: block;
}
+@mixin show-hover-state() {
+ opacity: 1;
+ background-color: $shadow-d2;
+ border-radius: ($baseline/4);
+}
+
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
diff --git a/lms/static/sass/views/_learner-profile.scss b/lms/static/sass/views/_learner-profile.scss
index 9d7e5469c7..b929151c98 100644
--- a/lms/static/sass/views/_learner-profile.scss
+++ b/lms/static/sass/views/_learner-profile.scss
@@ -58,6 +58,14 @@
i {
color: $white;
}
+
+ &:focus {
+ @include show-hover-state();
+ }
+ }
+
+ .button-visible {
+ @include show-hover-state();
}
.upload-button-icon, .upload-button-title {
@@ -88,17 +96,21 @@
margin-top: 2px;
text-align: center;
- &:focus, &:active {
+ &:active {
box-shadow: none;
outline: 0;
}
+ &:focus {
+ @include show-hover-state();
+ box-shadow: none;
+ outline: 0;
+ border: 2px dashed $link-color !important;
+ }
}
- &:hover {
+ &:hover, &:focus {
.u-field-upload-button, .u-field-remove-button {
- opacity: 1;
- background-color: $shadow-d2;
- border-radius: ($baseline/4);
+ @include show-hover-state();
}
}
}
diff --git a/lms/templates/fields/field_image.underscore b/lms/templates/fields/field_image.underscore
index bf21952ca5..d4c677ea6d 100644
--- a/lms/templates/fields/field_image.underscore
+++ b/lms/templates/fields/field_image.underscore
@@ -11,6 +11,7 @@