Adding hover state to image profile for accessibility.

TNL-2051

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();
             },

lms/static/js/views/fields.js

@@ -561,6 +561,7 @@
             titleRemoving: gettext("Removing"),
 
             titleImageAlt: '',
+            screenReaderTitle: gettext("Image"),
 
             iconUpload: '<i class="icon fa fa-camera" aria-hidden="true"></i>',
             iconRemove: '<i class="icon fa fa-remove" aria-hidden="true"></i>',
@@ -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;
             },

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

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();
                 }
             }
         }

lms/templates/fields/field_image.underscore

@@ -11,6 +11,7 @@
         <button class="u-field-remove-button" type="button">
             <span class="remove-button-icon" aria-hidden="true"><%= removeButtonIcon %></span>
             <span class="remove-button-title" aria-live="polite"><%= removeButtonTitle %></span>
+            <span class="sr"><%= screenReaderTitle %></span>
         </button>
     </div>
 </div>