From 0a696ae87ff341e74f8659cb489daa1b1f4bf101 Mon Sep 17 00:00:00 2001
From: Ahsan Ulhaq <ahsan.haq@arbisoft.com>
Date: Mon, 4 May 2015 16:01:59 +0500
Subject: [PATCH] Learner profile Location and Language fields Accessibility
 issues

Following are done in this PR
1-The controls to edit the form fields were hyperlinks, added button and required css to
  make it look like hyperlink.
2-label added when swap to combobox
3-Non breaking spaces added with dashes.
---
 .../views/learner_profile_factory.js               |  2 ++
 lms/static/js/views/fields.js                      |  1 +
 lms/static/sass/shared/_fields.scss                | 11 ++++++++++-
 lms/templates/fields/field_dropdown.underscore     | 14 ++++++++++----
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/lms/static/js/student_profile/views/learner_profile_factory.js b/lms/static/js/student_profile/views/learner_profile_factory.js
index 033472f09e..372f5e52ac 100644
--- a/lms/static/js/student_profile/views/learner_profile_factory.js
+++ b/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,
diff --git a/lms/static/js/views/fields.js b/lms/static/js/views/fields.js
index c6aa7639c8..35f11bd5db 100644
--- a/lms/static/js/views/fields.js
+++ b/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,
diff --git a/lms/static/sass/shared/_fields.scss b/lms/static/sass/shared/_fields.scss
index 277278beee..b74ed55b28 100644
--- a/lms/static/sass/shared/_fields.scss
+++ b/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;
     }
 }
diff --git a/lms/templates/fields/field_dropdown.underscore b/lms/templates/fields/field_dropdown.underscore
index b42ab0cc36..6ec92412a3 100644
--- a/lms/templates/fields/field_dropdown.underscore
+++ b/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 %>">