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, ...@@ -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 in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected. 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 LMS: enhanced shib support, including detection of linked shib account
at login page and support for the ?next= GET parameter. at login page and support for the ?next= GET parameter.
......
lms/static/sass/_discussion.scss
...@@ -151,7 +151,7 @@ body.discussion { ...@@ -151,7 +151,7 @@ body.discussion {
padding: $baseline*2; padding: $baseline*2;
@include box-sizing(border-box); @include box-sizing(border-box);
label { .topic-dropdown-label {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: $white; color: $white;
...@@ -221,6 +221,10 @@ body.discussion { ...@@ -221,6 +221,10 @@ body.discussion {
&.focused { &.focused {
background-color: #666; background-color: #666;
} }
.topic-menu-span {
color: #eee;
}
} }
li li { li li {
......
lms/templates/discussion/_filter_dropdown.html
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
<div class="browse-topic-drop-menu-wrapper"> <div class="browse-topic-drop-menu-wrapper">
<div class="browse-topic-drop-search"> <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> </div>
<ul class="browse-topic-drop-menu"> <ul class="browse-topic-drop-menu">
<li> <li>
......
lms/templates/discussion/_inline_new_post.html
...@@ -35,7 +35,8 @@ ...@@ -35,7 +35,8 @@
</div> </div>
<div class="right-column"> <div class="right-column">
<div class="form-row"> <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>
<div class="form-row"> <div class="form-row">
<div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div> <div class="new-post-body" name="body" placeholder="Enter your question or comment&hellip;"></div>
...@@ -43,9 +44,10 @@ ...@@ -43,9 +44,10 @@
</div> </div>
## TODO commenting out tags til we figure out what to do with them ## TODO commenting out tags til we figure out what to do with them
##<div class="form-row"> ##<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> ##</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> <a href="#" class="new-post-cancel">${_("Cancel")}</a>
</div> </div>
</form> </form>
......
lms/templates/discussion/_new_post.html
...@@ -10,31 +10,30 @@ ...@@ -10,31 +10,30 @@
</%def> </%def>
<%def name="render_entry(entries, entry)"> <%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>
<%def name="render_category(categories, category)"> <%def name="render_category(categories, category)">
<li> <li role="menuitem">
<a href="#">${category}</a> <a href="#"><span class="category-menu-span">${category}</span></a>
<ul> <ul role="menu">
${render_form_filter_dropdown(categories[category])} ${render_form_filter_dropdown(categories[category])}
</ul> </ul>
</li> </li>
</%def> </%def>
<article class="new-post-article"> <article class="new-post-article">
<div class="inner-wrapper"> <div class="inner-wrapper">
<form class="new-post-form"> <form class="new-post-form">
<div class="left-column"> <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"> <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_wrapper">
<div class="topic_menu_search"> <div class="topic_menu_search" role="menu">
<input type="text" class="form-topic-drop-search-input" placeholder="filter topics"> <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> </div>
<ul class="topic_menu"> <ul class="topic_menu" role="menu">
${render_form_filter_dropdown(category_map)} ${render_form_filter_dropdown(category_map)}
</ul> </ul>
</div> </div>
...@@ -67,7 +66,8 @@ ...@@ -67,7 +66,8 @@
<div class="right-column"> <div class="right-column">
<ul class="new-post-form-errors"></ul> <ul class="new-post-form-errors"></ul>
<div class="form-row"> <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>
<div class="form-row"> <div class="form-row">
<div class="new-post-body" name="body" placeholder="Enter your question or comment…"></div> <div class="new-post-body" name="body" placeholder="Enter your question or comment…"></div>
...@@ -75,9 +75,10 @@ ...@@ -75,9 +75,10 @@
</div> </div>
## TODO tags commenting out til we figure out what to do w/ tags ## TODO tags commenting out til we figure out what to do w/ tags
##<div class="form-row"> ##<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> ##</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> <a href="#" class="new-post-cancel">${_("Cancel")}</a>
</div> </div>
</form> </form>
......
lms/templates/discussion/_thread_list_template.html
...@@ -21,7 +21,8 @@ ...@@ -21,7 +21,8 @@
<%include file="_filter_dropdown.html" /> <%include file="_filter_dropdown.html" />
<div class="search"> <div class="search">
<form class="post-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> </form>
</div> </div>
</div> </div>
......
lms/templates/discussion/_underscore_templates.html
...@@ -83,7 +83,8 @@ ...@@ -83,7 +83,8 @@
<h1>${_("Editing post")}</h1> <h1>${_("Editing post")}</h1>
<ul class="edit-post-form-errors"></ul> <ul class="edit-post-form-errors"></ul>
<div class="form-row"> <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>
<div class="form-row"> <div class="form-row">
<div class="edit-post-body" name="body">${"<%- body %>"}</div> <div class="edit-post-body" name="body">${"<%- body %>"}</div>
...@@ -91,9 +92,10 @@ ...@@ -91,9 +92,10 @@
## TODO tags ## TODO tags
## Until we decide what to do with tags, commenting them out. ## Until we decide what to do with tags, commenting them out.
##<div class="form-row"> ##<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> ##</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> <a href="#" class="post-cancel">${_("Cancel")}</a>
</div> </div>
</script> </script>
...@@ -105,7 +107,8 @@ ...@@ -105,7 +107,8 @@
% if course is UNDEFINED or has_permission(user, 'create_sub_comment', course.id): % if course is UNDEFINED or has_permission(user, 'create_sub_comment', course.id):
<form class="comment-form" data-id="${'<%- wmdId %>'}"> <form class="comment-form" data-id="${'<%- wmdId %>'}">
<ul class="discussion-errors"></ul> <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> data-placeholder="Add a comment..."></div>
<div class="comment-post-control"> <div class="comment-post-control">
<a class="discussion-submit-comment control-button" href="#">${_("Submit")}</a> <a class="discussion-submit-comment control-button" href="#">${_("Submit")}</a>
...@@ -143,7 +146,7 @@ ...@@ -143,7 +146,7 @@
<div class="form-row"> <div class="form-row">
<div class="edit-post-body" name="body">${"<%- body %>"}</div> <div class="edit-post-body" name="body">${"<%- body %>"}</div>
</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> <a href="#" class="post-cancel">${_("Cancel")}</a>
</div> </div>
</script> </script>
...@@ -216,7 +219,8 @@ ...@@ -216,7 +219,8 @@
<tr class="helpgrid-row helpgrid-row-notification"> <tr class="helpgrid-row helpgrid-row-notification">
<td class="row-title">Receive updates</td> <td class="row-title">Receive updates</td>
<td class="row-item-full" colspan="3"> <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> <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> <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> </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