Skip to content

E
edx-platform
Commit b4576191 by Greg Price
Options

Merge pull request #1105 from edx/forums/accessibility/labels 

updated new post forum dropdown menu for use with chromevox
parents 4a2a6fba b7aead39
Showing with 42 additions and 27 deletions
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.
......
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 {
......
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>
......
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>
......
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>
......
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>
......
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment