Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Use focus as the first selector for J/K navigation

This commit is contained in:
Kane York 2018-01-15 18:20:33 -08:00 committed by Guo Xiang Tan
parent 3df0626aa5
commit 3212cdda78
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/components/topic-list-item.js.es6
View File

@ -30,8 +30,9 @@ export default Ember.Component.extend(bufferedRender({
rerenderTriggers: ['bulkSelectEnabled', 'topic.pinned'],
tagName: 'tr',
classNameBindings: [':topic-list-item', 'unboundClassNames', 'topic.visited'],
attributeBindings: ['data-topic-id'],
attributeBindings: ['data-topic-id', 'tabindex'],
'data-topic-id': Em.computed.alias('topic.id'),
'tabindex': 0,
actions: {
toggleBookmark() {

15
app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
View File

@ -315,9 +315,15 @@ export default {
return;
}
const $selected = ($articles.filter('.selected').length !== 0)
? $articles.filter('.selected')
: $articles.filter('[data-islastviewedtopic=true]');
let $selected = $articles.filter(function(_, el) {
return el.contains(document.activeElement); // :focus
});
if ($selected.length === 0) {
$selected = $articles.filter('.selected');
}
if ($selected.length === 0) {
$selected = $articles.filter('[data-islastviewedtopic=true]');
}
let index = $articles.index($selected);
if ($selected.length !== 0) { //boundries check
@ -354,10 +360,11 @@ export default {
$article.addClass('selected');
if ($article.is('.topic-post')) {
$('a.tabLoc', $article).focus();
$('article', $article).focus();
this._scrollToPost($article);
} else {
$article.focus();
this._scrollList($article, direction);
}
}

4
app/assets/javascripts/discourse/widgets/post.js.es6
View File

@ -394,11 +394,11 @@ createWidget('post-article', {
},
buildAttributes(attrs) {
return { 'data-post-id': attrs.id, 'data-user-id': attrs.user_id };
return { 'data-post-id': attrs.id, 'data-user-id': attrs.user_id, 'tabindex': '0' };
},
html(attrs, state) {
const rows = [h('a.tabLoc', { attributes: { href: ''} })];
const rows = [];
if (state.repliesAbove.length) {
const replies = state.repliesAbove.map(p => {
return this.attach('embedded-post', p, { model: this.store.createRecord('post', p), state: { above: true } });