jared
1b4c6cab6d
- FallbackContent: '(edited)' button now has aria-label='View edit history' - Reply: ThreadIndicator as=button gets aria-label='View thread' - Reply: ReplyLayout as=button gets aria-label='Jump to original message' Addresses WCAG 2.1 SC 4.1.2 (Name, Role, Value) for icon-only buttons and polymorphic div-as-button patterns in the message timeline. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import { Box, Icon, Icons, Text, as, color, config } from 'folds';
|
|
import React from 'react';
|
|
|
|
const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
|
|
const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
|
|
|
|
export const MessageDeletedContent = as<'div', { children?: never; reason?: string }>(
|
|
({ reason, ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Delete} />
|
|
<i>
|
|
{reason ? `This message has been deleted — ${reason}` : 'This message has been deleted'}
|
|
</i>
|
|
</Box>
|
|
),
|
|
);
|
|
|
|
export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Warning} />
|
|
<i>Unsupported message</i>
|
|
</Box>
|
|
));
|
|
|
|
export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Warning} />
|
|
<i>Failed to load message</i>
|
|
</Box>
|
|
));
|
|
|
|
export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Lock} />
|
|
<i>Unable to decrypt message</i>
|
|
</Box>
|
|
));
|
|
|
|
export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Lock} />
|
|
<i>This message is not decrypted yet</i>
|
|
</Box>
|
|
));
|
|
|
|
export const MessageBrokenContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Warning} />
|
|
<i>Broken message</i>
|
|
</Box>
|
|
));
|
|
|
|
export const MessageEmptyContent = as<'div', { children?: never }>(({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Warning} />
|
|
<i>Empty message</i>
|
|
</Box>
|
|
));
|
|
|
|
export const MessageVerificationRequestContent = as<'div', { children?: never }>(
|
|
({ ...props }, ref) => (
|
|
<Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
|
|
<Icon size="50" src={Icons.Lock} />
|
|
<i>Device verification request — open another Matrix client to accept</i>
|
|
</Box>
|
|
),
|
|
);
|
|
|
|
export const MessageEditedContent = as<
|
|
'span',
|
|
{ children?: never; onEditHistoryClick?: () => void }
|
|
>(({ onEditHistoryClick, ...props }, ref) =>
|
|
onEditHistoryClick ? (
|
|
<span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
|
|
<button
|
|
type="button"
|
|
onClick={onEditHistoryClick}
|
|
aria-label="View edit history"
|
|
style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
|
|
>
|
|
<Text as="span" size="T200" priority="300">
|
|
{' (edited)'}
|
|
</Text>
|
|
</button>
|
|
</span>
|
|
) : (
|
|
<Text as="span" size="T200" priority="300" {...props} ref={ref}>
|
|
{' (edited)'}
|
|
</Text>
|
|
),
|
|
);
|