fix: restore focus on community page (#1669)

src/routes/_components/community/PageListItem.html

@@ -1,5 +1,5 @@
 <li class="page-list-item">
-  <a {href} rel="prefetch">
+  <a {href} rel="prefetch" id="page-list-item-{href}">
     <SvgIcon className="page-list-item-svg" href={icon} />
     <span aria-label={ariaLabel}>
       {label}

src/routes/_pages/community/index.html

@@ -1,6 +1,7 @@
 {#if $isUserLoggedIn}
 <div class="community-page">
 
+  <FocusRestoration realm="community">
     <RadioGroup
       id="pinnables"
       length={numPinnable}
@@ -83,6 +84,7 @@
       />
     </PageList>
 
+  </FocusRestoration>
 </div>
 {:else}
 <HiddenFromSSR>
@@ -123,6 +125,7 @@
   import RadioGroup from '../../_components/radio/RadioGroup.html'
   import { updateListsForInstance } from '../../_actions/lists'
   import { updateFollowRequestCountIfLockedAccount } from '../../_actions/followRequests'
+  import FocusRestoration from '../../_components/FocusRestoration.html'
 
   export default {
     async oncreate () {
@@ -140,7 +143,8 @@
       HiddenFromSSR,
       PageList,
       PageListItem,
-      RadioGroup
+      RadioGroup,
+      FocusRestoration
     },
     computed: {
       isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,

tests/spec/010-focus.js

@@ -14,7 +14,7 @@ import {
   getActiveElementTagName,
   getActiveElementClassList,
   getNthStatusSensitiveMediaButton,
-  getActiveElementAriaLabel, settingsNavButton, getActiveElementHref
+  getActiveElementAriaLabel, settingsNavButton, getActiveElementHref, communityNavButton
 } from '../utils'
 import { loginAsFoobar } from '../roles'
 import { Selector as $ } from 'testcafe'
@@ -182,3 +182,15 @@ test('preserves focus on settings page', async t => {
     .expect(getActiveElementHref()).eql('/settings')
     .expect(getActiveElementClassList()).contains('settings-nav-item')
 })
+
+test('preserves focus on community page', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click(communityNavButton)
+    .expect(getUrl()).contains('/community')
+    .click($('a[href="/federated"]'))
+    .expect(getUrl()).contains('/federated')
+  await goBack()
+  await t
+    .expect(getActiveElementHref()).eql('/federated')
+})