Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make discussion links into buttons for a11y

Browse Source 
TNL-4640
This commit is contained in:
Andy Armstrong
2016-08-29 15:54:20 -04:00
parent b7ac081e49
commit f1bad0721f
39 changed files with 98 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
common/static/common/js/discussion/utils.js
View File

@@ -95,9 +95,6 @@
retrieve_discussion: '/courses/' + $$course_id + '/discussion/forum/' + param + '/inline',
retrieve_single_thread: '/courses/' + $$course_id + '/discussion/forum/' + param + '/threads/' + param1,
openclose_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/close',
permanent_link_thread: '/courses/' + $$course_id + '/discussion/forum/' + param + '/threads/' + param1,
permanent_link_comment: '/courses/' + $$course_id +
'/discussion/forum/' + param + '/threads/' + param1 + '#' + param2,
user_profile: '/courses/' + $$course_id + '/discussion/forum/users/' + param,
followed_threads: '/courses/' + $$course_id + '/discussion/forum/users/' + param + '/followed',
threads: '/courses/' + $$course_id + '/discussion/forum',

5
common/static/common/js/discussion/views/discussion_thread_list_view.js
View File

@@ -136,7 +136,7 @@
'css_class': searchAlert.attributes.css_class
});
edx.HtmlUtils.append(self.$('.search-alerts'), content);
return self.$('#search-alert-' + searchAlert.cid + ' a.dismiss')
return self.$('#search-alert-' + searchAlert.cid + ' .dismiss')
.bind('click', searchAlert, function(event) {
return self.removeSearchAlert(event.data.cid);
});
@@ -374,7 +374,8 @@
neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount,
context = _.extend(
{
neverRead: neverRead
neverRead: neverRead,
threadUrl: thread.urlFor('retrieve')
},
thread.toJSON()
);

4
common/static/common/js/discussion/views/discussion_topic_menu_view.js
View File

@@ -42,11 +42,11 @@
this.selectedTopic = this.$('.js-selected-topic');
this.hideTopicDropdown();
if (this.getCurrentTopicId()) {
this.setTopic(this.$('a.topic-title').filter(
this.setTopic(this.$('.topic-title').filter(
'[data-discussion-id="' + this.getCurrentTopicId() + '"]')
);
} else {
this.setTopic(this.$('a.topic-title').first());
this.setTopic(this.$('.topic-title').first());
}
return this.$el;
},

2
common/static/common/js/discussion/views/new_post_view.js
View File

@@ -177,7 +177,7 @@
DiscussionUtil.clearFormErrors(this.$('.post-errors'));
this.$('.wmd-preview p').html('');
if (this.isTabMode()) {
return this.topicView.setTopic(this.$('a.topic-title').first());
return this.topicView.setTopic(this.$('.topic-title').first());
}
};

2
common/static/common/js/spec/discussion/view/discussion_thread_edit_view_spec.js
View File

@@ -43,7 +43,7 @@
};
});
view.$el.find('a.topic-title').filter(function(idx, el) {
view.$el.find('.topic-title').filter(function(idx, el) {
return $(el).data('discussionId') === newTopicId;
}).click(); // set new topic
view.$('.edit-post-title').val('changed thread title'); // set new title

8
common/static/common/js/spec/discussion/view/discussion_thread_show_view_spec.js
View File

@@ -141,9 +141,9 @@
return this.thread.set('user_url', 'test_user_url');
});
checkUserLink = function(element, is_ta, is_staff) {
expect(element.find('a.username').length).toEqual(1);
expect(element.find('a.username').text()).toEqual('test_user');
expect(element.find('a.username').attr('href')).toEqual('test_user_url');
expect(element.find('.username').length).toEqual(1);
expect(element.find('.username').text()).toEqual('test_user');
expect(element.find('.username').attr('href')).toEqual('test_user_url');
expect(element.find('.user-label-community-ta').length).toEqual(is_ta ? 1 : 0);
return expect(element.find('.user-label-staff').length).toEqual(is_staff ? 1 : 0);
};
@@ -168,7 +168,7 @@
var $el;
this.thread.set('username', null);
$el = $('#fixture-element').html(this.view.getAuthorDisplay());
expect($el.find('a.username').length).toEqual(0);
expect($el.find('.username').length).toEqual(0);
return expect($el.text()).toMatch(/^(\s*)anonymous(\s*)$/);
});
});

12
common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js
View File

@@ -98,7 +98,7 @@
var dropdownText;
this.createTopicView();
this.view.maxNameWidth = this.defaultTextWidth + 1;
this.view.$el.find('a.topic-title').first().click();
this.view.$el.find('.topic-menu-entry').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(this.completeText).toEqual(dropdownText);
});
@@ -106,11 +106,11 @@
it('truncation happens with specific title lengths', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('a.topic-title')[2].click();
this.view.$el.find('.topic-menu-entry')[2].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('…/Very long category name');
this.view.$el.find('a.topic-title')[5].click();
this.view.$el.find('.topic-menu-entry')[5].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / What Are Your Goals f …');
});
@@ -118,7 +118,7 @@
it('truncation happens with longer title lengths', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('a.topic-title')[3].click();
this.view.$el.find('.topic-menu-entry')[3].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toEqual('… / Very very very very l …');
});
@@ -126,7 +126,7 @@
it('titles are escaped before display', function() {
var dropdownText;
this.createTopicView();
this.view.$el.find('a.topic-title')[4].click();
this.view.$el.find('.topic-menu-entry')[4].click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText).toContain('em>');
});
@@ -135,7 +135,7 @@
var dropdownText;
this.createTopicView();
this.view.maxNameWidth = this.selectedOptionText.length + 100;
this.view.$el.find('a.topic-title').first().click();
this.view.$el.find('.topic-title').first().click();
dropdownText = this.view.$el.find('.js-selected-topic').text();
expect(dropdownText.indexOf('/ span>')).toEqual(-1);
});

4
common/static/common/js/spec/discussion/view/new_post_view_spec.js
View File

@@ -82,9 +82,9 @@
it('only enables the cohort selector when applicable', function() {
DiscussionSpecHelper.makeModerator();
checkVisibility(this.view, true, false, true);
$('.topic-title:contains(General)').click();
$('.topic-menu-entry:contains(General)').click();
checkVisibility(this.view, true, true, false);
$('.topic-title:contains(Topic)').click();
$('.topic-menu-entry:contains(Topic)').click();
return checkVisibility(this.view, true, false, false);
});
it('allows the user to make a cohort selection', function() {

6
common/static/common/js/spec/discussion/view/thread_response_show_view_spec.js
View File

@@ -234,9 +234,9 @@
return spyOn(DiscussionUtil, 'urlFor').and.returnValue('test_endorser_url');
});
checkUserLink = function(element, is_ta, is_staff) {
expect(element.find('a.username').length).toEqual(1);
expect(element.find('a.username').text()).toEqual('test_endorser');
expect(element.find('a.username').attr('href')).toEqual('test_endorser_url');
expect(element.find('.username').length).toEqual(1);
expect(element.find('.username').text()).toEqual('test_endorser');
expect(element.find('.username').attr('href')).toEqual('test_endorser_url');
expect(element.find('.user-label-community-ta').length).toEqual(is_ta ? 1 : 0);
return expect(element.find('.user-label-staff').length).toEqual(is_staff ? 1 : 0);
};

4
common/static/common/templates/discussion/alert-popup.underscore
View File

@@ -1,6 +1,6 @@
<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'>
<div class='inner-wrapper discussion-alert-wrapper'>
<button class='close-modal dismiss' title='<%- gettext("Close") %>''>
<button class='btn close-modal dismiss' title='<%- gettext("Close") %>''>
<span class='icon fa fa-times' aria-hidden='true'></span>
</button>
<header>
@@ -9,6 +9,6 @@
</header>
<p id='discussion-alert-message'></p>
<hr/>
<button class='dismiss'><%- gettext("OK") %></button>
<button class='btn dismiss'><%- gettext("OK") %></button>
</div>
</div>

4
common/static/common/templates/discussion/forum-action-answer.underscore
View File

@@ -1,10 +1,10 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-button action-answer" role="checkbox" aria-checked="false">
<button class="btn action-button action-answer" role="checkbox" aria-checked="false">
<span class="sr"><%- gettext("Mark as Answer") %></span>
<span class="action-label" aria-hidden="true">
<span class="label-unchecked"><%- gettext("Mark as Answer") %></span>
<span class="label-checked"><%- gettext("Unmark as Answer") %></span>
</span>
<span class="action-icon"><span class="icon fa fa-check" aria-hidden="true"></span></span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-close.underscore
View File

@@ -1,5 +1,5 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-list-item action-close" role="checkbox" aria-checked="false">
<button class="btn-link action-list-item action-close" role="checkbox" aria-checked="false">
<span class="sr"><%- gettext("Close") %></span>
<span class="action-label" aria-hidden="true">
<span class="label-unchecked"><%- gettext("Close") %></span>
@@ -8,5 +8,5 @@
<span class="action-icon">
<span class="icon fa fa-lock" aria-hidden="true"></span>
</span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-delete.underscore
View File

@@ -1,6 +1,6 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-list-item action-delete" role="button">
<button class="btn-link action-list-item action-delete">
<span class="action-label"><%- gettext("Delete") %></span>
<span class="action-icon"><span class="icon fa fa-remove" aria-hidden="true"></span></span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-edit.underscore
View File

@@ -1,6 +1,6 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-list-item action-edit" role="button">
<button class="btn-link action-list-item action-edit">
<span class="action-label"><%- gettext("Edit") %></span>
<span class="action-icon"><span class="icon fa fa-pencil" aria-hidden="true"></span></span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-endorse.underscore
View File

@@ -1,10 +1,10 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-button action-endorse" role="checkbox" aria-checked="false">
<button class="btn-link action-button action-endorse" role="checkbox" aria-checked="false">
<span class="sr"><%- gettext("Endorse") %></span>
<span class="action-label" aria-hidden="true">
<span class="label-unchecked"><%- gettext("Endorse") %></span>
<span class="label-checked"><%- gettext("Unendorse") %></span>
</span>
<span class="action-icon"><span class="icon fa fa-check" aria-hidden="true"></span></span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-follow.underscore
View File

@@ -1,10 +1,10 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-button action-follow" role="checkbox" aria-checked="false">
<button class="btn-link action-button action-follow" role="checkbox" aria-checked="false">
<span class="sr"><%- gettext("Follow") %></span>
<span class="action-label" aria-hidden="true">
<span class="label-unchecked"><%- gettext("Follow") %></span>
<span class="label-checked"><%- gettext("Unfollow") %></span>
</span>
<span class="action-icon"><span class="icon fa fa-star" aria-hidden="true"></span></span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-pin.underscore
View File

@@ -1,5 +1,5 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-list-item action-pin" role="checkbox" aria-checked="false">
<button class="btn-link action-list-item action-pin" role="checkbox" aria-checked="false">
<span class="sr"><%- gettext("Pin") %></span>
<span class="action-label" aria-hidden="true">
<span class="label-unchecked"><%- gettext("Pin") %></span>
@@ -8,5 +8,5 @@
<span class="action-icon">
<span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
</span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-report.underscore
View File

@@ -1,5 +1,5 @@
<li class="actions-item">
<a href="javascript:void(0)" class="action-list-item action-report" role="checkbox" aria-checked="false">
<button class="btn-link action-list-item action-report" role="checkbox" aria-checked="false">
<span class="sr"><%- gettext("Report abuse") %></span>
<span class="action-label" aria-hidden="true">
<span class="label-unchecked"><%- gettext("Report") %></span>
@@ -8,5 +8,5 @@
<span class="action-icon">
<span class="icon fa fa-flag" aria-hidden="true"></span>
</span>
</a>
</button>
</li>

4
common/static/common/templates/discussion/forum-action-vote.underscore
View File

@@ -2,7 +2,7 @@
<span aria-hidden="true" class="display-vote is-hidden" >
<span class="vote-count"></span>
</span>
<a href="#" class="action-button action-vote" role="checkbox" aria-checked="false">
<button class="btn-link action-button action-vote" role="checkbox" aria-checked="false">
<% // Vote counts are populated by JS %>
<span class="sr"><%- gettext("Vote for this post,") %>&nbsp;</span>
<span class="sr js-sr-vote-count"></span>
@@ -14,5 +14,5 @@
<span class="action-icon" aria-hidden="true">
<span class="icon fa fa-plus" aria-hidden="true"></span>
</span>
</a>
</button>
</li>

6
common/static/common/templates/discussion/forum-actions.underscore
View File

@@ -3,10 +3,10 @@
<% _.each(primaryActions, function(action) { print(_.template($('#forum-action-' + action).html())({})) }) %>
<li class="actions-item is-visible">
<div class="more-wrapper">
<a href="javascript:void(0)" class="action-button action-more" role="button" aria-haspopup="true" aria-controls="action-menu-<%= contentId %>">
<span class="action-label"><%- gettext("More") %></span>
<button class="btn-link action-button action-more" aria-label="<%- gettext('More') %>" aria-haspopup="true" aria-controls="action-menu-<%= contentType %>">
<span class="action-label"><%- gettext('More') %></span>
<span class="action-icon"><span class="icon fa fa-ellipsis-h" aria-hidden="true"></span></span>
</a>
</button>
<div class="actions-dropdown" id="action-menu-<%= contentType %>" aria-expanded="false">
<ul class="actions-dropdown-list">
<% _.each(secondaryActions, function(action) { print(_.template($('#forum-action-' + action).html())({})) }) %>

4
common/static/common/templates/discussion/nav-load-more-link.underscore
View File

@@ -1,5 +1,5 @@
<li class='forum-nav-load-more'>
<a href='#' class='forum-nav-load-more-link'>
<button class='btn-link forum-nav-load-more-link'>
<%- gettext("Load more") %>
</a>
</button>
</li>

2
common/static/common/templates/discussion/new-post-menu-entry.underscore
View File

@@ -1,3 +1,3 @@
<li role="menuitem" class="topic-menu-item">
<a href="#" class="topic-title" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></a>
<button class="btn-link topic-title topic-menu-entry" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></button>
</li>

14
common/static/common/templates/discussion/response-comment-edit.underscore
View File

@@ -1,9 +1,9 @@
<div class="edit-post-form" id="comment_<%- id %>">
<h1><%- gettext("Editing comment") %></h1>
<ul class="edit-comment-form-errors"></ul>
<div class="form-row">
<div class="edit-comment-body" name="body" data-id="<%- id %>"><%- body %></div>
</div>
<input type="submit" id="edit-comment-submit" class="post-update" value="<%- gettext("Update comment") %>">
<a href="#" class="post-cancel"><%- gettext("Cancel") %></a>
<h1><%- gettext("Editing comment") %></h1>
<ul class="edit-comment-form-errors"></ul>
<div class="form-row">
<div class="edit-comment-body" name="body" data-id="<%- id %>"><%- body %></div>
</div>
<button type="submit" id="edit-comment-submit" class="btn-brand post-update"><%- gettext("Update comment") %></button>
<button class="btn post-cancel"><%- gettext("Cancel") %></button>
</div>

7
common/static/common/templates/discussion/search-alert.underscore
View File

@@ -1,10 +1,11 @@
<div class="search-alert <%- css_class %>" id="search-alert-<%- cid %>">
<div class="search-alert-content">
<p class="message"><%= HtmlUtils.ensureHtml(messageHtml) %></p>
<p class="message"><%= HtmlUtils.ensureHtml(messageHtml) %></p>
</div>
<div class="search-alert-controls">
<a href="#" class="dismiss control control-dismiss"><span class="icon fa fa-remove" aria-hidden="true"></span>
<span class="sr"><%- gettext("Close") %></span></a>
<button class="btn-link dismiss control control-dismiss" title="<%- gettext('Close') %>">
<span class="icon fa fa-remove" aria-hidden="true"></span>
</button>
</div>
</div>

4
common/static/common/templates/discussion/thread-edit.underscore
View File

@@ -8,5 +8,5 @@
<div class="form-row">
<div class="edit-post-body" name="body"><%- body %></div>
</div>
<input type="submit" id="edit-post-submit" class="post-update" value="<%- gettext("Update post") %>">
<a href="#" class="post-cancel"><%- gettext("Cancel") %></a>
<button type="submit" id="edit-post-submit" class="btn-brand submit post-update"><%- gettext("Update post") %></button>
<button class="btn post-cancel"><%- gettext("Cancel") %></button>

2
common/static/common/templates/discussion/thread-list-item.underscore
View File

@@ -1,5 +1,5 @@
<li data-id="<%- id %>" class="forum-nav-thread<% if (neverRead) { %> never-read<% } %>">
<a href="#" class="forum-nav-thread-link">
<a href="<%- threadUrl %>" class="forum-nav-thread-link">
<div class="forum-nav-thread-wrapper-0">
<%
var icon_class, sr_text;

14
common/static/common/templates/discussion/thread-response-edit.underscore
View File

@@ -1,9 +1,9 @@
<div class="edit-post-form">
<h1><%- gettext("Editing response") %></h1>
<ul class="edit-post-form-errors"></ul>
<div class="form-row">
<div class="edit-post-body" name="body" data-id="<%- id %>"><%- body %></div>
</div>
<input type="submit" id="edit-response-submit"class="post-update" value="<%- gettext("Update response") %>">
<a href="#" class="post-cancel"><%- gettext("Cancel") %></a>
<h1><%- gettext("Editing response") %></h1>
<ul class="edit-post-form-errors"></ul>
<div class="form-row">
<div class="edit-post-body" name="body" data-id="<%- id %>"><%- body %></div>
</div>
<button type="submit" id="edit-response-submit"class="btn-brand post-update"><%- gettext("Update response") %></button>
<button class="btn post-cancel"><%- gettext("Cancel") %></button>
</div>

6
common/static/common/templates/discussion/thread-response.underscore
View File

@@ -1,11 +1,11 @@
<div class="discussion-response"></div>
<a href="#" class="action-show-comments">
<button class="btn-link action-show-comments">
<%
var fmts = ngettext("Show Comment (%(num_comments)s)", "Show Comments (%(num_comments)s)", comments.length);
print(interpolate(fmts, {num_comments: comments.length}, true));
%>
<span class="icon fa fa-caret-down" aria-hidden="true"></span>
</a>
</button>
<ol class="comments">
<li class="new-comment">
<% if (create_sub_comment && !readOnly) { %>
@@ -15,7 +15,7 @@
<div class="comment-body" id="add-new-comment" data-id="<%- wmdId %>"
data-placeholder="<%- gettext('Add a comment') %>"></div>
<div class="comment-post-control">
<a class="discussion-submit-comment control-button" href="#"><%- gettext("Submit") %></a>
<button class="btn-brand discussion-submit-comment control-button"><%- gettext("Submit") %></button>
</div>
</form>
<% } %>

4
common/static/common/templates/discussion/thread.underscore
View File

@@ -33,7 +33,7 @@
</div>
</div>
<div class="post-tools">
<a href="javascript:void(0)" class="forum-thread-expand"><span class="icon fa fa-plus" aria-hidden="true"/><%- gettext("Expand discussion") %></a>
<a href="javascript:void(0)" class="forum-thread-collapse"><span class="icon fa fa-minus" aria-hidden="true"/><%- gettext("Collapse discussion") %></a>
<button class="btn-link forum-thread-expand"><span class="icon fa fa-plus" aria-hidden="true"/><%- gettext("Expand discussion") %></button>
<button class="btn-link forum-thread-collapse"><span class="icon fa fa-minus" aria-hidden="true"/><%- gettext("Collapse discussion") %></button>
</div>
</article>