jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Associate form control with label for choose group members

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
Show Stats 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"
},
"selectContact": {
"message": "Select contact",
"description": "The label for contact checkboxes that are non-selected (clicking them should select the contact)"
"message": "Select contact $name$",
"description": "The label for contact checkboxes that are non-selected (clicking them should select the contact)",
"placeholders": {
"name": {
"content": "$1",
"example": "John"
}
}
},
"deselectContact": {
"message": "De-select contact",
"description": "The label for contact checkboxes that are selected (clicking them should de-select the contact)"
"message": "De-select contact $name$",
"description": "The label for contact checkboxes that are selected (clicking them should de-select the contact)",
"placeholders": {
"name": {
"content": "$1",
"example": "John"
}
}
},
"cannotSelectContact": {
"message": "Cannot select contact",
"description": "The label for contact checkboxes that are disabled"
"message": "Cannot select contact $name$",
"description": "The label for contact checkboxes that are disabled",
"placeholders": {
"name": {
"content": "$1",
"example": "John"
}
}
},
"alreadyAMember": {
"message": "Already a member",

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

@ -80,6 +80,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
unblurredAvatarPath,
unreadCount,
}) {
const identifier = id ? cleanId(id) : undefined;
const isUnread = isConversationUnread({ markedUnread, unreadCount });
const isAvatarNoteToSelf = isBoolean(isNoteToSelf)
@ -92,11 +93,11 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
if (isCheckbox) {
let ariaLabel: string;
if (disabled) {
ariaLabel = i18n('cannotSelectContact');
ariaLabel = i18n('cannotSelectContact', [title]);
} else if (checked) {
ariaLabel = i18n('deselectContact');
ariaLabel = i18n('deselectContact', [title]);
} else {
ariaLabel = i18n('selectContact');
ariaLabel = i18n('selectContact', [title]);
}
checkboxNode = (
<input
@ -104,6 +105,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
checked={checked}
className={CHECKBOX_CLASS_NAME}
disabled={disabled}
id={identifier}
onChange={onClick}
onKeyDown={event => {
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--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
// 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.
@ -213,7 +216,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
commonClassNames,
`${BASE_CLASS_NAME}--is-button`
)}
data-id={id ? cleanId(id) : undefined}
data-id={identifier}
disabled={disabled}
onClick={onClick}
type="button"
@ -224,7 +227,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
}
return (
<div className={commonClassNames} data-id={id ? cleanId(id) : undefined}>
<div className={commonClassNames} data-id={identifier}>
{contents}
</div>
);