From b7aead39e2f4da36e6f44e934513d85fd8361d16 Mon Sep 17 00:00:00 2001
From: marco <marcotuts@gmail.com>
Date: Fri, 13 Sep 2013 11:08:27 -0400
Subject: [PATCH] updated new post forum dropdown menu for use with chromevox

---
 CHANGELOG.rst                                 |  4 ++-
 lms/static/sass/_discussion.scss              |  6 +++-
 .../discussion/_filter_dropdown.html          |  3 +-
 .../discussion/_inline_new_post.html          |  8 +++--
 lms/templates/discussion/_new_post.html       | 29 ++++++++++---------
 .../discussion/_thread_list_template.html     |  3 +-
 .../discussion/_underscore_templates.html     | 16 ++++++----
 7 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 8290e1104b..65ed2519be 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -5,7 +5,9 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
-LMS: Improved accessibility of parts of forum navigation sidebar
+LMS: Improved accessibility of parts of forum navigation sidebar.
+
+LMS: enhanced accessibility labeling and aria support for the discussion forum new post dropdown as well as response and comment area labeling.
 
 LMS: enhanced shib support, including detection of linked shib account
 at login page and support for the ?next= GET parameter.
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 3e3642298b..a685404d34 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -151,7 +151,7 @@ body.discussion {
       padding: $baseline*2;
       @include box-sizing(border-box);
 
-      label {
+      .topic-dropdown-label {
         font-size: 22px;
         font-weight: 700;
         color: $white;
@@ -221,6 +221,10 @@ body.discussion {
           &.focused {
             background-color: #666;
           }
+
+          .topic-menu-span {
+            color: #eee;
+          }
         }
 
         li li {
diff --git a/lms/templates/discussion/_filter_dropdown.html b/lms/templates/discussion/_filter_dropdown.html
index c09f295b11..c70fcb47cf 100644
--- a/lms/templates/discussion/_filter_dropdown.html
+++ b/lms/templates/discussion/_filter_dropdown.html
@@ -26,7 +26,8 @@
 
 <div class="browse-topic-drop-menu-wrapper">
     <div class="browse-topic-drop-search">
-        <input type="text" class="browse-topic-drop-search-input" placeholder="filter topics">
+        <label class="sr" for="browse-topic">${_("Filter Topics")}</label>
+        <input type="text" id="browse-topic" class="browse-topic-drop-search-input" placeholder="filter topics">
     </div>
     <ul class="browse-topic-drop-menu">
         <li>
diff --git a/lms/templates/discussion/_inline_new_post.html b/lms/templates/discussion/_inline_new_post.html
index 612098abea..69c557b2bb 100644
--- a/lms/templates/discussion/_inline_new_post.html
+++ b/lms/templates/discussion/_inline_new_post.html
@@ -35,7 +35,8 @@
             </div>
             <div class="right-column">
                 <div class="form-row">
-                    <input type="text" class="new-post-title" name="title" placeholder="Title">
+                    <label class="sr" for="new-inline-post-title">${_("new post title")}</label>
+                    <input type="text" id="new-inline-post-title" class="new-post-title" name="title" placeholder="Title">
                 </div>
                 <div class="form-row">
                     <div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div>
@@ -43,9 +44,10 @@
                 </div>
                 ## TODO commenting out tags til we figure out what to do with them
                 ##<div class="form-row">
-                ##    <input type="text" class="new-post-tags" name="tags" placeholder="Tags">
+                ##    <label class="sr" for="new-inline-post-tags">${_("Add post tags")}</label>
+                ##    <input type="text" id="new-inline-post-tags" class="new-post-tags" name="tags" placeholder="Tags">
                 ##</div>
-                <input type="submit" class="submit" value="${_("Add post")}">
+                <input type="submit" id="new-inline-post-submit" class="submit" value="${_("Add post")}">
                 <a href="#" class="new-post-cancel">${_("Cancel")}</a>
             </div>
         </form>
diff --git a/lms/templates/discussion/_new_post.html b/lms/templates/discussion/_new_post.html
index 4c11862e20..dfc942730b 100644
--- a/lms/templates/discussion/_new_post.html
+++ b/lms/templates/discussion/_new_post.html
@@ -10,31 +10,30 @@
 </%def>
 
 <%def name="render_entry(entries, entry)">
-    <li><a href="#" class="topic" data-discussion_id="${entries[entry]['id']}" cohorted = "${entries[entry]['id'] in cohorted_commentables}">${entry}</a></li>
+    <li role="menuitem"><a href="#" class="topic" data-discussion_id="${entries[entry]['id']}" aria-describedby="topic-name-span-${entries[entry]['id']}" cohorted = "${entries[entry]['id'] in cohorted_commentables}">${entry}</a></li>
 </%def>
 
 <%def name="render_category(categories, category)">
-    <li>
-        <a href="#">${category}</a>
-        <ul>
+    <li role="menuitem">
+        <a href="#"><span class="category-menu-span">${category}</span></a>
+        <ul role="menu">
             ${render_form_filter_dropdown(categories[category])}
         </ul>
     </li>
 </%def>
-
-
 <article class="new-post-article">
     <div class="inner-wrapper">
         <form class="new-post-form">
             <div class="left-column">
-                <label>${_("Create new post about:")}</label>
+                <span class="topic-dropdown-label" id="topic-dropdown-label">${_("Create new post about:")}</span>
                 <div class="form-topic-drop">
-                    <a href="#" class="topic_dropdown_button">${_("Show All Discussions")}<span class="drop-arrow">▾</span></a>
+                    <a href="#" aria-labelledby="topic-dropdown-label" class="topic_dropdown_button">${_("Show All Discussions")}<span class="drop-arrow" aria-hidden="true">▾</span></a>
                     <div class="topic_menu_wrapper">
-                        <div class="topic_menu_search">
-                            <input type="text" class="form-topic-drop-search-input" placeholder="filter topics">
+                        <div class="topic_menu_search" role="menu">
+                            <label class="sr" for="browse-topic-newpost">${_("Filter List")}</label>
+                            <input type="text" id="browse-topic-newpost" class="form-topic-drop-search-input" placeholder="Filter discussion areas">
                         </div>
-                        <ul class="topic_menu">
+                        <ul class="topic_menu" role="menu">
                             ${render_form_filter_dropdown(category_map)}
                         </ul>
                     </div>
@@ -67,7 +66,8 @@
             <div class="right-column">
                 <ul class="new-post-form-errors"></ul>
                 <div class="form-row">
-                    <input type="text" class="new-post-title" name="title" placeholder="Title">
+                    <label class="sr" for="new-post-title">${_("new post title")}</label>
+                    <input type="text" id="new-post-title" class="new-post-title" name="title" placeholder="Title">
                 </div>
                 <div class="form-row">
                     <div class="new-post-body" name="body" placeholder="Enter your question or comment…"></div>
@@ -75,9 +75,10 @@
                 </div>
                 ## TODO tags commenting out til we figure out what to do w/ tags
                 ##<div class="form-row">
-                ##    <input type="text" class="new-post-tags" name="tags" placeholder="Tags">
+                ##    <label class="sr" for="new-post-tags">${_("Add post tags")}</label>
+                ##    <input type="text" id="new-post-tags" class="new-post-tags" name="tags" placeholder="Tags">
                 ##</div>
-                <input type="submit" class="submit" value="${_("Add post")}">
+                <input type="submit" id="new-post-submit" class="submit" value="${_("Add post")}">
                 <a href="#" class="new-post-cancel">${_("Cancel")}</a>
             </div>
         </form>
diff --git a/lms/templates/discussion/_thread_list_template.html b/lms/templates/discussion/_thread_list_template.html
index 16fb46bea8..208c2b014d 100644
--- a/lms/templates/discussion/_thread_list_template.html
+++ b/lms/templates/discussion/_thread_list_template.html
@@ -21,7 +21,8 @@
         <%include file="_filter_dropdown.html" />
         <div class="search">
             <form class="post-search">
-                <input type="text" placeholder="Search all discussions" class="post-search-field">
+                <label class="sr" for="search-discussions">Search</label>
+                <input type="text" id="search-discussions" placeholder="Search all discussions" class="post-search-field">
             </form>
         </div>
     </div>
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index 73d890fe18..3e3452eb57 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -83,7 +83,8 @@
     <h1>${_("Editing post")}</h1>
     <ul class="edit-post-form-errors"></ul>
     <div class="form-row">
-      <input type="text" class="edit-post-title" name="title" value="${"<%-title %>"}" placeholder="Title">
+      <label class="sr" for="edit-post-title">${_("Edit post title")}</label>
+      <input type="text" id="edit-post-title" class="edit-post-title" name="title" value="${"<%-title %>"}" placeholder="Title">
     </div>
     <div class="form-row">
       <div class="edit-post-body" name="body">${"<%- body %>"}</div>
@@ -91,9 +92,10 @@
     ## TODO tags
     ## Until we decide what to do with tags, commenting them out.
     ##<div class="form-row">
-    ##  <input type="text" class="edit-post-tags" name="tags" placeholder="Tags" value="${"<%- tags %>"}">
+    ##  <label class="sr" for="edit-post-tags">${_("Edit post tags")}</label>
+    ##  <input type="text" id="edit-post-tags" class="edit-post-tags" name="tags" placeholder="Tags" value="${"<%- tags %>"}">
     ##</div>
-    <input type="submit" class="post-update" value="${_("Update post")}">
+    <input type="submit" id="edit-post-submit" class="post-update" value="${_("Update post")}">
     <a href="#" class="post-cancel">${_("Cancel")}</a>
   </div>
 </script>
@@ -105,7 +107,8 @@
             % if course is UNDEFINED or has_permission(user, 'create_sub_comment', course.id):
             <form class="comment-form" data-id="${'<%- wmdId %>'}">
                 <ul class="discussion-errors"></ul>
-                <div class="comment-body" data-id="${'<%- wmdId %>'}"
+                <label class="sr" for="add-new-comment">${_("Add a comment")}</label>
+                <div class="comment-body" id="add-new-comment" data-id="${'<%- wmdId %>'}"
                 data-placeholder="Add a comment..."></div>
                 <div class="comment-post-control">
                     <a class="discussion-submit-comment control-button" href="#">${_("Submit")}</a>
@@ -143,7 +146,7 @@
     <div class="form-row">
       <div class="edit-post-body" name="body">${"<%- body %>"}</div>
     </div>
-    <input type="submit" class="post-update" value="${_("Update response")}">
+    <input type="submit" id="edit-response-submit"class="post-update" value="${_("Update response")}">
     <a href="#" class="post-cancel">${_("Cancel")}</a>
   </div>
 </script>
@@ -216,7 +219,8 @@
   <tr class="helpgrid-row helpgrid-row-notification">
   <td class="row-title">Receive updates</td>
   <td class="row-item-full" colspan="3">
-  <input type="checkbox" class="email-setting" name="email-notification"></input>
+  <label class="sr" for="email-setting-checkbox">${_("Toggle Notifications Setting")}</label>
+  <input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/>
   <i class="icon icon-envelope"></i>
   <span class="row-description"> If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following. </span>
   </td>