fix: add some aria labels and match QA test

_locales/en/messages.json

@@ -152,6 +152,10 @@
   "noNameOrMessage": "No name or content",
   "nameOnly": "Name Only",
   "newMessage": "New Message",
+  "createConversationNewContact": "Create a conversation with a new contact",
+  "createConversationNewGroup": "Create a group with existing contacts",
+  "joinACommunity": "Join a community",
+  "chooseAnAction": "Choose an action to start a conversation",
   "newMessages": "New Messages",
   "notificationMostRecentFrom": "Most recent from: $name$",
   "notificationFrom": "From:",
@@ -283,7 +287,7 @@
   "changePasswordToastDescription": "Your password has been changed. Please keep it safe.",
   "removePasswordToastDescription": "You have removed your password.",
   "publicChatExists": "You are already connected to this community",
-  "connectToServerFail": "Couldn't join group",
+  "connectToServerFail": "Couldn't join community",
   "connectingToServer": "Connecting...",
   "connectToServerSuccess": "Successfully connected to community",
   "setPasswordFail": "Failed to set password",

stylesheets/_session.scss

@@ -96,7 +96,7 @@ textarea {
   background-color: rgba(0, 0, 0, 0);
 
   &.disabled {
-    cursor: default;
+    cursor: not-allowed;
   }
 
   &.default,

ts/components/MemberListItem.tsx

@@ -18,7 +18,7 @@ const AvatarItem = (props: { memberPubkey: string; isAdmin: boolean }) => {
   );
 };
 
-const StyledSessionMemberItem = styled.div<{
+const StyledSessionMemberItem = styled.button<{
   inMentions?: boolean;
   zombie?: boolean;
   selected?: boolean;
@@ -29,6 +29,9 @@ const StyledSessionMemberItem = styled.div<{
   padding: 0px var(--margins-sm);
   height: ${props => (props.inMentions ? '40px' : '50px')};
   display: flex;
+
+  align-items: center;
+
   justify-content: space-between;
   transition: var(--default-duration);
 
@@ -99,7 +102,6 @@ export const MemberListItem = (props: {
             }
           : {}
       }
-      role="button"
       data-testid={dataTestId}
       zombie={isZombie}
       inMentions={inMentions}

ts/components/button/MenuButton.tsx

@@ -6,7 +6,7 @@ import { getOverlayMode } from '../../state/selectors/section';
 import { SessionIcon } from '../icon';
 // tslint:disable: use-simple-attributes
 
-const StyledMenuButton = styled.label`
+const StyledMenuButton = styled.button`
   position: relative;
   display: inline-block;
 
@@ -25,12 +25,6 @@ const StyledMenuButton = styled.label`
   }
 `;
 
-const StyledMenuInput = styled.input`
-  opacity: 0;
-  width: 0;
-  height: 0;
-`;
-
 /**
  * This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation.
  * It has two state: selected or not and so we use an checkbox input to keep the state in sync.
@@ -54,13 +48,14 @@ export const MenuButton = () => {
           '--fg-color': 'white',
         } as CSSProperties
       }
+      onClick={onClickFn}
     >
-      <StyledMenuInput type="checkbox" checked={isToggled} onClick={onClickFn} />
       <SessionIcon
         iconSize="small"
         iconType="plusFat"
         iconColor="var(--fg-color)"
         iconRotation={isToggled ? 45 : 0}
+        aria-label={window.i18n('chooseAnAction')}
       />
     </StyledMenuButton>
   );

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -17,6 +17,7 @@ import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
 import { SessionSearchInput } from '../../SessionSearchInput';
 import { getSearchResults, isSearching } from '../../../state/selectors/search';
+import { VALIDATION } from '../../../session/constants';
 
 const StyledMemberListNoContacts = styled.div`
   font-family: var(--font-font-mono);
@@ -101,6 +102,8 @@ export const OverlayClosedGroup = () => {
   }
   const contactsToRender = isSearch ? sharedWithResults : privateContactsPubkeys;
 
+  const disableCreateButton = !selectedMemberIds.length && !groupName.length;
+
   return (
     <div className="module-left-pane-overlay">
       <OverlayHeader title={title} subtitle={subtitle} />
@@ -110,7 +113,7 @@ export const OverlayClosedGroup = () => {
           placeholder={placeholder}
           value={groupName}
           isGroup={true}
-          maxLength={100}
+          maxLength={VALIDATION.MAX_GROUP_NAME_LENGTH}
           onChange={setGroupName}
           onPressEnter={onEnterPressed}
           dataTestId="new-closed-group-name"
@@ -150,7 +153,7 @@ export const OverlayClosedGroup = () => {
         buttonColor={SessionButtonColor.Green}
         buttonType={SessionButtonType.BrandOutline}
         text={buttonText}
-        disabled={noContactsForClosedGroup}
+        disabled={disableCreateButton}
         onClick={onEnterPressed}
         dataTestId="next-button"
         margin="auto 0 var(--margins-lg) 0 " // just to keep that button at the bottom of the overlay (even with an empty list)

ts/components/leftpane/overlay/OverlayCommunity.tsx

@@ -78,14 +78,13 @@ export const OverlayCommunity = () => {
 
       <SessionSpinner loading={loading} />
       <SessionJoinableRooms onRoomClicked={closeOverlay} />
-      {groupUrl && (
+      <SessionButton
-        <SessionButton
+        buttonColor={SessionButtonColor.Green}
-          buttonColor={SessionButtonColor.Green}
+        buttonType={SessionButtonType.BrandOutline}
-          buttonType={SessionButtonType.BrandOutline}
+        text={buttonText}
-          text={buttonText}
+        disabled={!groupUrl}
-          onClick={onEnterPressed}
+        onClick={onEnterPressed}
-        />
+      />
-      )}
     </div>
   );
 };

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -45,6 +45,8 @@ export const OverlayMessage = () => {
   const subtitle = window.i18n('enterSessionIDOrONSName');
   const placeholder = window.i18n('enterSessionIDOfRecipient');
 
+  const disableNextButton = !pubkeyOrOns || loading;
+
   async function openConvoOnceResolved(resolvedSessionID: string) {
     const convo = await getConversationController().getOrCreateAndWait(
       resolvedSessionID,
@@ -105,6 +107,7 @@ export const OverlayMessage = () => {
         placeholder={placeholder}
         onChange={setPubkeyOrOns}
         dataTestId="new-session-conversation"
+        onPressEnter={handleMessageButtonClick}
       />
 
       <SessionSpinner loading={loading} />
@@ -128,7 +131,7 @@ export const OverlayMessage = () => {
         buttonColor={SessionButtonColor.Green}
         buttonType={SessionButtonType.BrandOutline}
         text={buttonText}
-        disabled={false}
+        disabled={disableNextButton}
         onClick={handleMessageButtonClick}
         dataTestId="next-new-conversation-button"
       />

ts/components/leftpane/overlay/choose-action/ContactRow.tsx

@@ -41,7 +41,7 @@ const StyledContactRowName = styled.div`
   font-size: var(--font-size-lg);
 `;
 
-const StyledRowContainer = styled.div`
+const StyledRowContainer = styled.button`
   display: flex;
   align-items: center;
   padding: 0 var(--margins-lg);

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -66,15 +66,27 @@ export const OverlayChooseAction = () => {
 
   return (
     <div className="module-left-pane-overlay">
-      <StyledActionRow onClick={openNewMessage} data-testid="chooser-new-conversation-button">
+      <StyledActionRow
+        onClick={openNewMessage}
+        data-testid="chooser-new-conversation-button"
+        aria-label={window.i18n('createConversationNewContact')}
+      >
         <IconOnActionRow iconType="chatBubble" />
         <StyledChooseActionTitle>{window.i18n('newMessage')}</StyledChooseActionTitle>
       </StyledActionRow>
-      <StyledActionRow onClick={openCreateGroup} data-testid="chooser-new-group">
+      <StyledActionRow
+        onClick={openCreateGroup}
+        data-testid="chooser-new-group"
+        aria-label={window.i18n('createConversationNewGroup')}
+      >
         <IconOnActionRow iconType="group" />
         <StyledChooseActionTitle>{window.i18n('createGroup')}</StyledChooseActionTitle>
       </StyledActionRow>
-      <StyledActionRow onClick={openJoinCommunity} data-testid="chooser-new-community">
+      <StyledActionRow
+        onClick={openJoinCommunity}
+        data-testid="chooser-new-community"
+        aria-label={window.i18n('joinACommunity')}
+      >
         <IconOnActionRow iconType="communities" />
         <StyledChooseActionTitle>{window.i18n('joinOpenGroup')}</StyledChooseActionTitle>
       </StyledActionRow>

ts/session/constants.ts

@@ -45,7 +45,7 @@ export const CONVERSATION = {
 export const MAX_ATTACHMENT_FILESIZE_BYTES = 6 * 1000 * 1000; // 6MB
 
 export const VALIDATION = {
-  MAX_GROUP_NAME_LENGTH: 64,
+  MAX_GROUP_NAME_LENGTH: 30,
   CLOSED_GROUP_SIZE_LIMIT: 100,
 };
 

ts/types/LocalizerKeys.ts

@@ -62,12 +62,14 @@ export type LocalizerKeys =
   | 'timerOption_1_hour'
   | 'youGotKickedFromGroup'
   | 'cannotRemoveCreatorFromGroupDesc'
+  | 'contactAvatarAlt'
   | 'incomingError'
   | 'notificationsSettingsTitle'
   | 'ringing'
   | 'tookAScreenshot'
   | 'from'
   | 'thisMonth'
+  | 'chooseAnAction'
   | 'next'
   | 'addModerators'
   | 'sessionMessenger'
@@ -79,6 +81,7 @@ export type LocalizerKeys =
   | 'openMessageRequestInbox'
   | 'enterPassword'
   | 'enterSessionIDOfRecipient'
+  | 'join'
   | 'dialogClearAllDataDeletionFailedMultiple'
   | 'clearAllReactions'
   | 'pinConversationLimitToastDescription'
@@ -166,6 +169,7 @@ export type LocalizerKeys =
   | 'copyOpenGroupURL'
   | 'setPasswordInvalid'
   | 'timerOption_30_seconds_abbreviated'
+  | 'createConversationNewContact'
   | 'removeResidueMembers'
   | 'areYouSureDeleteEntireAccount'
   | 'noGivenPassword'
@@ -194,6 +198,7 @@ export type LocalizerKeys =
   | 'incomingCallFrom'
   | 'timerSetOnSync'
   | 'deleteMessages'
+  | 'searchForContactsOnly'
   | 'spellCheckTitle'
   | 'translation'
   | 'editMenuSelectAll'
@@ -236,7 +241,6 @@ export type LocalizerKeys =
   | 'invalidSessionId'
   | 'audioPermissionNeeded'
   | 'createGroup'
-  | 'create'
   | 'add'
   | 'messageRequests'
   | 'show'
@@ -255,6 +259,7 @@ export type LocalizerKeys =
   | 'hideMenuBarTitle'
   | 'imageCaptionIconAlt'
   | 'sendRecoveryPhraseTitle'
+  | 'joinACommunity'
   | 'multipleJoinedTheGroup'
   | 'messageRequestAcceptedOursNoName'
   | 'databaseError'
@@ -291,6 +296,7 @@ export type LocalizerKeys =
   | 'cancel'
   | 'decline'
   | 'originalMessageNotFound'
+  | 'create'
   | 'autoUpdateRestartButtonLabel'
   | 'deleteConversationConfirmation'
   | 'timerOption_6_hours_abbreviated'
@@ -313,7 +319,7 @@ export type LocalizerKeys =
   | 'error'
   | 'clearAllData'
   | 'pruningOpengroupDialogTitle'
-  | 'contactAvatarAlt'
+  | 'createConversationNewGroup'
   | 'disappearingMessages'
   | 'autoUpdateNewVersionTitle'
   | 'linkPreviewDescription'
@@ -371,7 +377,6 @@ export type LocalizerKeys =
   | 'audioMessageAutoplayTitle'
   | 'removePasswordInvalid'
   | 'password'
-  | 'usersCanShareTheir...'
   | 'nicknamePlaceholder'
   | 'linkPreviewsTitle'
   | 'continue'
@@ -399,7 +404,6 @@ export type LocalizerKeys =
   | 'closedGroupMaxSize'
   | 'messagesHeader'
   | 'joinOpenGroup'
-  | 'join'
   | 'callMediaPermissionsDialogContent'
   | 'timerOption_1_day_abbreviated'
   | 'about'
@@ -457,7 +461,6 @@ export type LocalizerKeys =
   | 'trustThisContactDialogDescription'
   | 'unknownCountry'
   | 'searchFor...'
-  | 'searchForContactsOnly'
   | 'joinedTheGroup'
   | 'editGroupName'
   | 'reportIssue';