Replace left pane button aria-label

This commit is contained in:
Josh Perez 2023-04-21 17:23:30 -04:00 committed by GitHub
parent 5d42997e79
commit 0bf351ba09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 15 deletions

View file

@ -373,24 +373,21 @@ export function ConversationList({
]); ]);
const { badges, title, unreadCount, lastMessage } = itemProps; const { badges, title, unreadCount, lastMessage } = itemProps;
result = ( result = (
<div <ConversationListItem
aria-label={i18n('icu:ConversationList__aria-label', { {...itemProps}
buttonAriaLabel={i18n('icu:ConversationList__aria-label', {
lastMessage: lastMessage:
get(lastMessage, 'text') || get(lastMessage, 'text') ||
i18n('icu:ConversationList__last-message-undefined'), i18n('icu:ConversationList__last-message-undefined'),
title, title,
unreadCount, unreadCount,
})} })}
>
<ConversationListItem
{...itemProps}
key={key} key={key}
badge={getPreferredBadge(badges)} badge={getPreferredBadge(badges)}
onClick={onSelectConversation} onClick={onSelectConversation}
i18n={i18n} i18n={i18n}
theme={theme} theme={theme}
/> />
</div>
); );
break; break;
} }

View file

@ -33,6 +33,7 @@ const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
export const SPINNER_CLASS_NAME = `${BASE_CLASS_NAME}__spinner`; export const SPINNER_CLASS_NAME = `${BASE_CLASS_NAME}__spinner`;
type PropsType = { type PropsType = {
buttonAriaLabel?: string;
checked?: boolean; checked?: boolean;
conversationType: 'group' | 'direct'; conversationType: 'group' | 'direct';
disabled?: boolean; disabled?: boolean;
@ -79,6 +80,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
acceptedMessageRequest, acceptedMessageRequest,
avatarPath, avatarPath,
avatarSize, avatarSize,
buttonAriaLabel,
checked, checked,
color, color,
conversationType, conversationType,
@ -250,9 +252,12 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
if (onClick) { if (onClick) {
return ( return (
<button <button
aria-label={i18n('icu:BaseConversationListItem__aria-label', { aria-label={
buttonAriaLabel ||
i18n('icu:BaseConversationListItem__aria-label', {
title, title,
})} })
}
className={classNames( className={classNames(
commonClassNames, commonClassNames,
`${BASE_CLASS_NAME}--is-button` `${BASE_CLASS_NAME}--is-button`

View file

@ -68,6 +68,7 @@ export type PropsData = Pick<
}; };
type PropsHousekeeping = { type PropsHousekeeping = {
buttonAriaLabel?: string;
i18n: LocalizerType; i18n: LocalizerType;
onClick: (id: string) => void; onClick: (id: string) => void;
theme: ThemeType; theme: ThemeType;
@ -80,6 +81,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
acceptedMessageRequest, acceptedMessageRequest,
avatarPath, avatarPath,
badge, badge,
buttonAriaLabel,
color, color,
draftPreview, draftPreview,
groupId, groupId,
@ -193,6 +195,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
acceptedMessageRequest={acceptedMessageRequest} acceptedMessageRequest={acceptedMessageRequest}
avatarPath={avatarPath} avatarPath={avatarPath}
badge={badge} badge={badge}
buttonAriaLabel={buttonAriaLabel}
color={color} color={color}
conversationType={type} conversationType={type}
groupId={groupId} groupId={groupId}