mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Associate form control with label for choose group members

Browse source
This commit is contained in:
Josh Perez 2021-09-17 19:48:57 -04:00 • committed by GitHub
parent b83c00f43f
commit 427055ea47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

30
_locales/en/messages.json
View file

@ -5677,16 +5677,34 @@
"description": "The text of the button to create new groups" "description": "The text of the button to create new groups"
}, },
"selectContact": { "selectContact": {
"message": "Select contact", "message": "Select contact $name$",
"description": "The label for contact checkboxes that are non-selected (clicking them should select the contact)" "description": "The label for contact checkboxes that are non-selected (clicking them should select the contact)",
"placeholders": {
"name": {
"content": "$1",
"example": "John"
}
}
}, },
"deselectContact": { "deselectContact": {
"message": "De-select contact", "message": "De-select contact $name$",
"description": "The label for contact checkboxes that are selected (clicking them should de-select the contact)" "description": "The label for contact checkboxes that are selected (clicking them should de-select the contact)",
"placeholders": {
"name": {
"content": "$1",
"example": "John"
}
}
}, },
"cannotSelectContact": { "cannotSelectContact": {
"message": "Cannot select contact", "message": "Cannot select contact $name$",
"description": "The label for contact checkboxes that are disabled" "description": "The label for contact checkboxes that are disabled",
"placeholders": {
"name": {
"content": "$1",
"example": "John"
}
}
}, },
"alreadyAMember": { "alreadyAMember": {
"message": "Already a member", "message": "Already a member",

15
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -80,6 +80,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
unblurredAvatarPath, unblurredAvatarPath,
unreadCount, unreadCount,
}) { }) {
const identifier = id ? cleanId(id) : undefined;
const isUnread = isConversationUnread({ markedUnread, unreadCount }); const isUnread = isConversationUnread({ markedUnread, unreadCount });
const isAvatarNoteToSelf = isBoolean(isNoteToSelf) const isAvatarNoteToSelf = isBoolean(isNoteToSelf)
@ -92,11 +93,11 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
if (isCheckbox) { if (isCheckbox) {
let ariaLabel: string; let ariaLabel: string;
if (disabled) { if (disabled) {
ariaLabel = i18n('cannotSelectContact'); ariaLabel = i18n('cannotSelectContact', [title]);
} else if (checked) { } else if (checked) {
ariaLabel = i18n('deselectContact'); ariaLabel = i18n('deselectContact', [title]);
} else { } else {
ariaLabel = i18n('selectContact'); ariaLabel = i18n('selectContact', [title]);
} }
checkboxNode = ( checkboxNode = (
<input <input
@ -104,6 +105,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
checked={checked} checked={checked}
className={CHECKBOX_CLASS_NAME} className={CHECKBOX_CLASS_NAME}
disabled={disabled} disabled={disabled}
id={identifier}
onChange={onClick} onChange={onClick}
onKeyDown={event => { onKeyDown={event => {
if (onClick && !disabled && event.key === 'Enter') { if (onClick && !disabled && event.key === 'Enter') {
@ -195,7 +197,8 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
`${BASE_CLASS_NAME}--is-checkbox`, `${BASE_CLASS_NAME}--is-checkbox`,
{ [`${BASE_CLASS_NAME}--is-checkbox--disabled`]: disabled } { [`${BASE_CLASS_NAME}--is-checkbox--disabled`]: disabled }
)} )}
data-id={id ? cleanId(id) : undefined} data-id={identifier}
htmlFor={identifier}
// `onClick` is will double-fire if we're enabled. We want it to fire when we're // `onClick` is will double-fire if we're enabled. We want it to fire when we're
// disabled so we can show any "can't add contact" modals, etc. This won't // disabled so we can show any "can't add contact" modals, etc. This won't
// work for keyboard users, though, because labels are not tabbable. // work for keyboard users, though, because labels are not tabbable.
@ -213,7 +216,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
commonClassNames, commonClassNames,
`${BASE_CLASS_NAME}--is-button` `${BASE_CLASS_NAME}--is-button`
)} )}
data-id={id ? cleanId(id) : undefined} data-id={identifier}
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
type="button" type="button"
@ -224,7 +227,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
} }
return ( return (
<div className={commonClassNames} data-id={id ? cleanId(id) : undefined}> <div className={commonClassNames} data-id={identifier}>
{contents} {contents}
</div> </div>
); );