fix: restore focus on community page (#1669)

This commit is contained in:
Nolan Lawson 2019-12-13 08:31:05 -08:00 committed by GitHub
parent 47ade12167
commit aa662682f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 76 deletions

View file

@ -1,5 +1,5 @@
<li class="page-list-item"> <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} /> <SvgIcon className="page-list-item-svg" href={icon} />
<span aria-label={ariaLabel}> <span aria-label={ariaLabel}>
{label} {label}

View file

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

View file

@ -14,7 +14,7 @@ import {
getActiveElementTagName, getActiveElementTagName,
getActiveElementClassList, getActiveElementClassList,
getNthStatusSensitiveMediaButton, getNthStatusSensitiveMediaButton,
getActiveElementAriaLabel, settingsNavButton, getActiveElementHref getActiveElementAriaLabel, settingsNavButton, getActiveElementHref, communityNavButton
} from '../utils' } from '../utils'
import { loginAsFoobar } from '../roles' import { loginAsFoobar } from '../roles'
import { Selector as $ } from 'testcafe' import { Selector as $ } from 'testcafe'
@ -182,3 +182,15 @@ test('preserves focus on settings page', async t => {
.expect(getActiveElementHref()).eql('/settings') .expect(getActiveElementHref()).eql('/settings')
.expect(getActiveElementClassList()).contains('settings-nav-item') .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')
})