nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/_components/community/PageListItem.html
View File

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

152
src/routes/_pages/community/index.html
View File

@ -1,88 +1,90 @@
{#if $isUserLoggedIn}
<div class="community-page">
<RadioGroup
id="pinnables"
length={numPinnable}
label="Pinnable timelines">
<FocusRestoration realm="community">
<RadioGroup
id="pinnables"
length={numPinnable}
label="Pinnable timelines">
<h2 class="community-header">
Timelines
</h2>
<PageList label="Timelines">
<PageListItem href="/local"
label="Local Timeline"
icon="#fa-users"
pinnable="true"
pinIndex={0}
/>
<PageListItem href="/federated"
label="Federated Timeline"
icon="#fa-globe"
pinnable="true"
pinIndex={1}
/>
<PageListItem href="/favorites"
label="Favorites"
icon="#fa-star"
pinnable="true"
pinIndex={2}
/>
<PageListItem href="/direct"
label="Direct messages"
icon="#fa-envelope"
pinnable="true"
pinIndex={3}
/>
</PageList>
{#if listsLength}
<h2 class="community-header">
Lists
</h2>
<PageList label="Lists">
{#each $lists as list, i}
<PageListItem href="/lists/{list.id}"
label={list.title}
icon="#fa-bars"
pinnable="true"
pinIndex={4 + i}
/>
{/each}
</PageList>
{/if}
</RadioGroup>
<h2 class="community-header">
Timelines
Instance settings
</h2>
<PageList label="Timelines">
<PageListItem href="/local"
label="Local Timeline"
icon="#fa-users"
pinnable="true"
pinIndex={0}
<PageList label="Instance settings">
{#if isLockedAccount}
<PageListItem href="/requests"
label={followRequestsLabel}
icon="#fa-user-plus"
/>
{/if}
<PageListItem href="/muted"
label="Muted users"
icon="#fa-volume-off"
/>
<PageListItem href="/federated"
label="Federated Timeline"
icon="#fa-globe"
pinnable="true"
pinIndex={1}
<PageListItem href="/blocked"
label="Blocked users"
icon="#fa-ban"
/>
<PageListItem href="/favorites"
label="Favorites"
icon="#fa-star"
pinnable="true"
pinIndex={2}
/>
<PageListItem href="/direct"
label="Direct messages"
icon="#fa-envelope"
pinnable="true"
pinIndex={3}
<PageListItem href="/pinned"
label="Pinned toots"
icon="#fa-thumb-tack"
/>
</PageList>
{#if listsLength}
<h2 class="community-header">
Lists
</h2>
<PageList label="Lists">
{#each $lists as list, i}
<PageListItem href="/lists/{list.id}"
label={list.title}
icon="#fa-bars"
pinnable="true"
pinIndex={4 + i}
/>
{/each}
</PageList>
{/if}
</RadioGroup>
<h2 class="community-header">
Instance settings
</h2>
<PageList label="Instance settings">
{#if isLockedAccount}
<PageListItem href="/requests"
label={followRequestsLabel}
icon="#fa-user-plus"
/>
{/if}
<PageListItem href="/muted"
label="Muted users"
icon="#fa-volume-off"
/>
<PageListItem href="/blocked"
label="Blocked users"
icon="#fa-ban"
/>
<PageListItem href="/pinned"
label="Pinned toots"
icon="#fa-thumb-tack"
/>
</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,

14
tests/spec/010-focus.js
View File

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