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

View File

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

View File

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