fix: settings pages preserve focus (#1666)

fixes #1658

src/routes/_components/settings/SettingsLayout.html

@@ -1,3 +1,4 @@
+<FocusRestoration realm={page}>
   <SettingsNav {page} {label}/>
 
   <div class="settings">
@@ -5,6 +6,7 @@
       <slot></slot>
     </FreeTextLayout>
   </div>
+</FocusRestoration>
 <style>
   .settings {
     margin: 20px;
@@ -24,11 +26,13 @@
 <script>
   import SettingsNav from './SettingsNav.html'
   import FreeTextLayout from '../FreeTextLayout'
+  import FocusRestoration from '../FocusRestoration.html'
 
   export default {
     components: {
       FreeTextLayout,
-      SettingsNav
+      SettingsNav,
+      FocusRestoration
     }
   }
 </script>

src/routes/_components/settings/SettingsListButton.html

@@ -1,4 +1,5 @@
 <a {href}
+   id="settings-list-button-{href}"
    on:click="fire('click', event)"
    rel="prefetch"
    aria-label={ariaLabel || label}

src/routes/_components/settings/SettingsNavItem.html

@@ -1,4 +1,5 @@
 <a class="settings-nav-item {className}"
+   id="settings-nav-item-{href}"
    aria-label={ariaLabel}
    rel="prefetch"
    {href} >

src/routes/_pages/settings/instances/index.html

@@ -27,10 +27,15 @@
         {/each}
       </SettingsList>
     </RadioGroup>
-  <p><a rel="prefetch" href="/settings/instances/add">Add another instance</a></p>
+    <p>
+      <a rel="prefetch" href="/settings/instances/add" id="log-in-link-1">Add another instance</a>
+    </p>
   {:else}
     <p>You're not logged in to any instances.</p>
-  <p><a rel="prefetch" href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
+    <p>
+      <a rel="prefetch" href="/settings/instances/add" id="log-in-link-2">Log in to an instance</a>
+      to start using Pinafore.
+    </p>
   {/if}
 </SettingsLayout>
 <style>

tests/spec/010-focus.js

@@ -14,7 +14,7 @@ import {
   getActiveElementTagName,
   getActiveElementClassList,
   getNthStatusSensitiveMediaButton,
-  getActiveElementAriaLabel
+  getActiveElementAriaLabel, settingsNavButton, getActiveElementHref
 } from '../utils'
 import { loginAsFoobar } from '../roles'
 import { Selector as $ } from 'testcafe'
@@ -155,3 +155,30 @@ test('preserves focus two levels deep', async t => {
     .expect(getUrl()).eql('http://localhost:4002/')
     .expect(getActiveElementClassList()).contains('status-author-name')
 })
+
+test('preserves focus on settings page', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click(settingsNavButton)
+    .click($('a[href="/settings/instances"]'))
+    .expect(getUrl()).eql('http://localhost:4002/settings/instances')
+    .click($('a[href="/settings/instances/add"]'))
+    .expect(getUrl()).eql('http://localhost:4002/settings/instances/add')
+  await goBack()
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/settings/instances')
+    .expect(getActiveElementHref()).eql('/settings/instances/add')
+  await goBack()
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/settings')
+    .expect(getActiveElementHref()).eql('/settings/instances')
+    .click($('a[href="/settings/instances"]'))
+    .expect(getUrl()).eql('http://localhost:4002/settings/instances')
+    .click($('a.settings-nav-item[href="/settings"]'))
+    .expect(getUrl()).eql('http://localhost:4002/settings')
+  await goBack()
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/settings/instances')
+    .expect(getActiveElementHref()).eql('/settings')
+    .expect(getActiveElementClassList()).contains('settings-nav-item')
+})

tests/utils.js

@@ -132,6 +132,10 @@ export const getActiveElementClassList = exec(() =>
   (document.activeElement && (document.activeElement.getAttribute('class') || '').split(/\s+/)) || []
 )
 
+export const getActiveElementHref = exec(() =>
+  (document.activeElement && (document.activeElement.getAttribute('href') || ''))
+)
+
 export const getActiveElementTagName = exec(() =>
   (document.activeElement && document.activeElement.tagName) || ''
 )