From 427055ea4780418fd385b5c7caa0dc5ff13d4cd0 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 17 Sep 2021 19:48:57 -0400
Subject: [PATCH] Associate form control with label for choose group members

---
 _locales/en/messages.json                     | 30 +++++++++++++++----
 .../BaseConversationListItem.tsx              | 15 ++++++----
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7eb729bbda..fb5aa01bb6 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -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",
diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
index 5e583900a8..c33ba8fca4 100644
--- a/ts/components/conversationList/BaseConversationListItem.tsx
+++ b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -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>
     );