Merge pull request #7898 from edx/ahsan/AC-99-learner-profile-location-language-fields-accessibility

Learner profile Location and Language fields Accessibility issues

lms/static/js/student_profile/views/learner_profile_factory.js

@@ -78,6 +78,7 @@
                 new FieldsView.DropdownFieldView({
                     model: accountSettingsModel,
                     screenReaderTitle: gettext('Country'),
+                    titleVisible: false,
                     required: true,
                     editable: editable,
                     showMessages: false,
@@ -90,6 +91,7 @@
                 new AccountSettingsFieldViews.LanguageProficienciesFieldView({
                     model: accountSettingsModel,
                     screenReaderTitle: gettext('Preferred Language'),
+                    titleVisible: false,
                     required: false,
                     editable: editable,
                     showMessages: false,

lms/static/js/views/fields.js

@@ -325,6 +325,7 @@
                     mode: this.mode,
                     title: this.options.title,
                     screenReaderTitle: this.options.screenReaderTitle || this.options.title,
+                    titleVisible: this.options.titleVisible || true,
                     iconName: this.options.iconName,
                     showBlankOption: (!this.options.required || !this.modelValueIsSet()),
                     selectOptions: this.options.options,

lms/static/sass/shared/_fields.scss

@@ -127,7 +127,16 @@
         display: none;
     }
 
-    &.mode-edit a.u-field-value-display {
+    button.u-field-value-display, button.u-field-value-display:active, button.u-field-value-display:focus, button.u-field-value-display:hover{
+        border-color: transparent;
+        background: transparent;
+        padding: 0;
+        box-shadow: none;
+        font-size: inherit;
+    }
+
+
+    &.mode-edit button.u-field-value-display {
         display: none;
     }
 }

lms/templates/fields/field_dropdown.underscore

@@ -4,6 +4,12 @@
     </label>
 <% } %>
 
+<% if (!titleVisible) { %>
+    <label class="sr" for="u-field-select-<%- id %>">
+        <%- screenReaderTitle %>
+    </label>
+<% } %>
+
 <% if (iconName) { %>
     <i class="u-field-icon icon fa <%- iconName %> fa-fw" aria-hidden="true"></i>
 <% } %>
@@ -17,11 +23,11 @@
             <option value="<%- selectOption[0] %>"><%- selectOption[1] %></option>
         <% }); %>
     </select>
-    <a href="#" class="u-field-value-display">
-        <span class="sr"><%- screenReaderTitle %></span>
+    <button class="u-field-value-display">
+        <span class="sr"><%- screenReaderTitle %> &nbsp;</span>
         <span class="u-field-value-readonly"></span>
-        <span class="sr"><%- gettext('Click to edit') %></span>
-    </a>
+        <span class="sr">&nbsp; <%- gettext('Click to edit') %></span>
+    </button>
 </span>
 
 <span class="u-field-message" id="u-field-message-<%- id %>">