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