Set focus on site-map and user menu

Set focus on first item in the site-map and user drop down for keyboard users, so they can quickly tab to the link/item of their choosing.
https://meta.discourse.org/t/keyboard-shortcuts-wish-list/15952
This commit is contained in:
cpradio 2014-08-28 16:04:54 -04:00
parent a40b08f210
commit 4fd73a2b2f
2 changed files with 13 additions and 3 deletions

View file

@ -36,8 +36,6 @@ Discourse.KeyboardShortcuts = Ember.Object.createWithMixins({
'm t': 'div.notification-options li[data-id="2"] a', // mark topic as tracking
'm w': 'div.notification-options li[data-id="3"] a', // mark topic as watching
'n': '#user-notifications', // open notifications menu
'=': '#site-map', // open site map menu
'p': '#current-user', // open current user menu
'o,enter': '.topic-list tr.selected a.title', // open selected topic
'shift+r': '#topic-footer-buttons button.create', // reply to topic
'shift+s': '#topic-footer-buttons button.share', // share topic
@ -54,6 +52,8 @@ Discourse.KeyboardShortcuts = Ember.Object.createWithMixins({
'`': 'nextSection',
'~': 'prevSection',
'/': 'showSearch',
'=': 'showSiteMap', // open site map menu
'p': 'showCurrentUser', // open current user menu
'ctrl+f': 'showBuiltinSearch',
'command+f': 'showBuiltinSearch',
'?': 'showHelpModal', // open keyboard shortcut help
@ -145,6 +145,16 @@ Discourse.KeyboardShortcuts = Ember.Object.createWithMixins({
return false;
},
showSiteMap: function() {
$('#site-map').click();
$('#site-map-dropdown').focus();
},
showCurrentUser: function() {
$('#current-user').click();
$('#user-dropdown').focus();
},
showHelpModal: function() {
Discourse.__container__.lookup('controller:application').send('showKeyboardShortcutsHelp');
},

View file

@ -58,7 +58,7 @@ export default Discourse.View.extend({
// fade it fast
$dropdown.fadeIn('fast');
// autofocus any text input field
$dropdown.find('input[type=text],a:first').focus().select();
$dropdown.find('input[type=text]').focus().select();
$html.on('click.d-dropdown', function(e) {
return $(e.target).closest('.d-dropdown').length > 0 ? true : hideDropdown.apply(self);