bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Notification: fix ariaLabel crash

Browse source
This commit is contained in:
Alex Gleason 2022-07-08 17:20:41 -05:00
parent 48bd46cf92
commit b10dc7ea6e
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/soapbox/features/notifications/components/notification.tsx
View file

@ -14,7 +14,7 @@ import type { ScrollPosition } from 'soapbox/components/status';
import type { NotificationType } from 'soapbox/normalizers/notification'; import type { NotificationType } from 'soapbox/normalizers/notification';
import type { Account, Status, Notification as NotificationEntity } from 'soapbox/types/entities'; import type { Account, Status, Notification as NotificationEntity } from 'soapbox/types/entities';
const notificationForScreenReader = (intl: ReturnType<typeof useIntl>, message: string, timestamp: Date) => { const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: Date) => {
const output = [message]; const output = [message];
output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' })); output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }));
@ -281,25 +281,24 @@ const Notification: React.FC<INotificaton> = (props) => {
const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, notification.total_count, targetName, instance.title) : null; const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, notification.total_count, targetName, instance.title) : null;
const ariaLabel = messages[type] ? (
notificationForScreenReader(
intl,
intl.formatMessage(messages[type],
{
name: account && typeof account === 'object' ? account.acct : '',
targetName,
}),
notification.created_at,
)
) : '';
return ( return (
<HotKeys handlers={getHandlers()} data-testid='notification'> <HotKeys handlers={getHandlers()} data-testid='notification'>
<div <div
className='notification focusable' className='notification focusable'
tabIndex={0} tabIndex={0}
aria-label={ aria-label={ariaLabel}
notificationForScreenReader(
intl,
intl.formatMessage({
id: type && messages[type].id,
defaultMessage: type && messages[type].defaultMessage,
},
{
name: account && typeof account === 'object' ? account.acct : '',
targetName,
}),
notification.created_at,
)
}
> >
<div className='p-4 focusable'> <div className='p-4 focusable'>
<div className='mb-2'> <div className='mb-2'>