feat: make click on reposter's small avatar image go to reposter's account page (#2260)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
This commit is contained in:
Ringtail Software 2022-11-27 21:22:13 +00:00 committed by GitHub
parent a3f41917c7
commit 5eb7183048
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 6 deletions

View File

@ -1,6 +1,13 @@
<div class="status-header {isStatusInNotification ? 'status-in-notification' : ''} {notificationType === 'follow' ? 'header-is-follow' : ''}">
<div class="status-header-avatar {timelineType === 'pinned' || notificationType === 'poll' ? 'hidden' : ''}">
<a id={avatarElementId}
href="/accounts/{accountId}"
rel="prefetch"
aria-hidden="true"
tabindex="-1"
>
<Avatar {account} size="extra-small"/>
</a>
</div>
<SvgIcon className="status-header-svg" href={icon} />
@ -10,7 +17,7 @@
{intl.pinnedStatus}
</span>
{:elseif notificationType !== 'poll'}
<a id={elementId}
<a id={authorElementId}
href="/accounts/{accountId}"
rel="prefetch"
class="status-header-author"
@ -114,7 +121,8 @@
},
store: () => store,
computed: {
elementId: ({ uuid }) => `status-header-${uuid}`,
authorElementId: ({ uuid }) => `status-header-author-${uuid}`,
avatarElementId: ({ uuid }) => `status-header-avatar-${uuid}`,
notificationType: ({ notification }) => notification && notification.type,
icon: ({ notificationType, status, timelineType }) => {
if (timelineType === 'pinned') {

View File

@ -14,7 +14,7 @@ import {
getActiveElementTagName,
getActiveElementClassList,
getNthStatusSensitiveMediaButton,
getActiveElementAriaLabel, settingsNavButton, getActiveElementHref, communityNavButton
getActiveElementAriaLabel, settingsNavButton, getActiveElementHref, communityNavButton, getActiveElementId
} from '../utils'
import { loginAsFoobar } from '../roles'
import { Selector as $ } from 'testcafe'
@ -59,7 +59,7 @@ test('timeline link preserves focus', async t => {
await loginAsFoobar(t)
await t
.expect(getNthStatus(1).exists).ok({ timeout: 20000 })
.click($(`${getNthStatusSelector(1)} .status-header a`))
.click($(`${getNthStatusSelector(1)} .status-header-author`))
.expect(getUrl()).contains('/accounts/')
.click(goBackButton)
.expect(getUrl()).eql('http://localhost:4002/')
@ -73,12 +73,28 @@ test('timeline link preserves focus', async t => {
.expect(getActiveElementInsideNthStatus()).eql('1')
})
test('timeline link preserves focus - reblogger avatar', async t => {
await loginAsFoobar(t)
await t
.expect(getNthStatus(1).exists).ok({ timeout: 20000 })
const avatar = `${getNthStatusSelector(1)} .status-header-avatar a`
const id = await $(avatar).getAttribute('id')
await t
.click($(avatar))
.expect(getUrl()).contains('/accounts/')
.click(goBackButton)
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(1).exists).ok()
.expect(getActiveElementId()).eql(id)
})
test('notification timeline preserves focus', async t => {
await loginAsFoobar(t)
await t
.navigateTo('/notifications')
await scrollToStatus(t, 6)
await t.click($(`${getNthStatusSelector(6)} .status-header a`))
await t.click($(`${getNthStatusSelector(6)} .status-header-author`))
.expect(getUrl()).contains('/accounts/')
.click(goBackButton)
.expect(getUrl()).contains('/notifications')

View File

@ -169,6 +169,10 @@ export const getActiveElementInnerText = exec(() =>
(document.activeElement && document.activeElement.innerText) || ''
)
export const getActiveElementId = exec(() =>
(document.activeElement && document.activeElement.id) || ''
)
export const getActiveElementRectTop = exec(() => (
(document.activeElement && document.activeElement.getBoundingClientRect().top) || -1
))