diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html index 14643a74..0e574552 100644 --- a/src/routes/_components/NavItem.html +++ b/src/routes/_components/NavItem.html @@ -114,6 +114,7 @@ import { mark, stop } from '../_utils/marks' import { doubleRAF } from '../_utils/doubleRAF' import { scrollToTop } from '../_utils/scrollToTop' + import { normalizePageName } from '../_utils/normalizePageName' export default { oncreate () { @@ -134,11 +135,7 @@ }, store: () => store, computed: { - selected: ({ page, name }) => { - return page === name || - // special case – these should both highlight the notifications tab icon - (name === 'notifications' && page === 'notifications/mentions') - }, + selected: ({ page, name }) => name === normalizePageName(page), ariaLabel: ({ selected, name, label, $numberOfNotifications, $numberOfFollowRequests }) => { let res = label if (selected) { diff --git a/src/routes/_components/NavShortcuts.html b/src/routes/_components/NavShortcuts.html index 730071f3..5087d59a 100644 --- a/src/routes/_components/NavShortcuts.html +++ b/src/routes/_components/NavShortcuts.html @@ -22,6 +22,7 @@ import { importShowShortcutHelpDialog } from './dialog/asyncDialogs/importShowShortcutHelpDialog' import { importShowComposeDialog } from './dialog/asyncDialogs/importShowComposeDialog' import { store } from '../_store/store' + import { normalizePageName } from '../_utils/normalizePageName' export default { store: () => store, @@ -43,9 +44,7 @@ }, goLeftOrRight (left) { let { currentPage, navPages } = this.store.get() - if (currentPage === 'notifications/mentions') { // special case - currentPage = 'notifications' - } + currentPage = normalizePageName(currentPage) const idx = navPages.findIndex(_ => _.name === currentPage) if (idx === -1) { return diff --git a/src/routes/_store/observers/navObservers.js b/src/routes/_store/observers/navObservers.js index a57f4387..0a835df2 100644 --- a/src/routes/_store/observers/navObservers.js +++ b/src/routes/_store/observers/navObservers.js @@ -1,4 +1,5 @@ import { emit } from '../../_utils/eventBus' +import { normalizePageName } from '../../_utils/normalizePageName' export function navObservers (store) { function pageIsInNav (store, page) { @@ -6,11 +7,6 @@ export function navObservers (store) { return navPages.find(_ => _.name === page) } - function normalizePageName (page) { - // notifications/mentions are a special case; they show as selected in the nav - return page === 'notifications/mentions' ? 'notifications' : page - } - store.observe('currentPage', (currentPage, previousPage) => { currentPage = normalizePageName(currentPage) previousPage = normalizePageName(previousPage) diff --git a/src/routes/_utils/normalizePageName.js b/src/routes/_utils/normalizePageName.js new file mode 100644 index 00000000..e96e644f --- /dev/null +++ b/src/routes/_utils/normalizePageName.js @@ -0,0 +1,7 @@ +// return the page name for purposes of figuring out which part of the nav +// is highlighted/selected +export function normalizePageName (page) { + // notifications/mentions and settings/foo are a special case; they show as selected in the nav + return page === 'notifications/mentions' ? 'notifications' + : (page && page.startsWith('settings/')) ? 'settings' : page +} diff --git a/tests/spec/024-shortcuts-navigation.js b/tests/spec/024-shortcuts-navigation.js index f6a293e8..149ad2f6 100644 --- a/tests/spec/024-shortcuts-navigation.js +++ b/tests/spec/024-shortcuts-navigation.js @@ -188,3 +188,18 @@ test('Shortcuts can be disabled', async t => { await t .expect(modalDialog.exists).false }) + +test('Shortcut left/right works on settings page', async t => { + await loginAsFoobar(t) + await t + .click(settingsNavButton) + .click($('a[href="/settings/hotkeys"]')) + .expect(getUrl()).contains('/settings/hotkeys') + .expect(settingsNavButton.getAttribute('aria-current')).eql('true') + .pressKey('left') + .expect(settingsNavButton.getAttribute('aria-current')).notEql('true') + .expect(getUrl()).contains('/search') + .pressKey('right') + .expect(getUrl()).match(/\/settings$/) + .expect(settingsNavButton.getAttribute('aria-current')).eql('true') +})