github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 04:13:22 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
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'], rerenderTriggers: ['bulkSelectEnabled', 'topic.pinned'],
tagName: 'tr', tagName: 'tr',
classNameBindings: [':topic-list-item', 'unboundClassNames', 'topic.visited'], classNameBindings: [':topic-list-item', 'unboundClassNames', 'topic.visited'],
attributeBindings: ['data-topic-id'], attributeBindings: ['data-topic-id', 'tabindex'],
'data-topic-id': Em.computed.alias('topic.id'), 'data-topic-id': Em.computed.alias('topic.id'),
'tabindex': 0,
actions: { actions: {
toggleBookmark() { toggleBookmark() {

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

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

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

@ -394,11 +394,11 @@ createWidget('post-article', {
}, },
buildAttributes(attrs) { 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) { html(attrs, state) {
const rows = [h('a.tabLoc', { attributes: { href: ''} })]; const rows = [];
if (state.repliesAbove.length) { if (state.repliesAbove.length) {
const replies = state.repliesAbove.map(p => { const replies = state.repliesAbove.map(p => {
return this.attach('embedded-post', p, { model: this.store.createRecord('post', p), state: { above: true } }); return this.attach('embedded-post', p, { model: this.store.createRecord('post', p), state: { above: true } });