fix: left/right hotkey works on all settings page (#1745)

fixes #1744

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 }) => {
+      selected: ({ page, name }) => name === normalizePageName(page),
-        return page === name ||
-          // special case – these should both highlight the notifications tab icon
-          (name === 'notifications' && page === 'notifications/mentions')
-      },
       ariaLabel: ({ selected, name, label, $numberOfNotifications, $numberOfFollowRequests }) => {
         let res = label
         if (selected) {

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 = normalizePageName(currentPage)
-          currentPage = 'notifications'
-        }
         const idx = navPages.findIndex(_ => _.name === currentPage)
         if (idx === -1) {
           return

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)

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
+}

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')
+})