From c54a438f7c06d7f611bad2d8f788d9f592d1d851 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 25 Aug 2022 15:50:28 +1000
Subject: [PATCH] fix: add some aria labels and match QA test
---
_locales/en/messages.json | 6 +++++-
stylesheets/_session.scss | 2 +-
ts/components/MemberListItem.tsx | 6 ++++--
ts/components/button/MenuButton.tsx | 11 +++--------
.../leftpane/overlay/OverlayClosedGroup.tsx | 7 +++++--
.../leftpane/overlay/OverlayCommunity.tsx | 15 +++++++--------
.../leftpane/overlay/OverlayMessage.tsx | 5 ++++-
.../overlay/choose-action/ContactRow.tsx | 2 +-
.../choose-action/OverlayChooseAction.tsx | 18 +++++++++++++++---
ts/session/constants.ts | 2 +-
ts/types/LocalizerKeys.ts | 13 ++++++++-----
11 files changed, 54 insertions(+), 33 deletions(-)
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ed182279d..66698ad49 100644
--- a/_locales/en/messages.json
+++ b/_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",
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index f5be5ca56..29131282f 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -96,7 +96,7 @@ textarea {
background-color: rgba(0, 0, 0, 0);
&.disabled {
- cursor: default;
+ cursor: not-allowed;
}
&.default,
diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index bf54d7eab..8470224b1 100644
--- a/ts/components/MemberListItem.tsx
+++ b/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}
diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx
index 889c966ca..c1626f30a 100644
--- a/ts/components/button/MenuButton.tsx
+++ b/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>
);
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index c07acfd3d..ffd0eb72e 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/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)
diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx
index 8fac9962f..666dac439 100644
--- a/ts/components/leftpane/overlay/OverlayCommunity.tsx
+++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx
@@ -78,14 +78,13 @@ export const OverlayCommunity = () => {
<SessionSpinner loading={loading} />
<SessionJoinableRooms onRoomClicked={closeOverlay} />
- {groupUrl && (
- <SessionButton
- buttonColor={SessionButtonColor.Green}
- buttonType={SessionButtonType.BrandOutline}
- text={buttonText}
- onClick={onEnterPressed}
- />
- )}
+ <SessionButton
+ buttonColor={SessionButtonColor.Green}
+ buttonType={SessionButtonType.BrandOutline}
+ text={buttonText}
+ disabled={!groupUrl}
+ onClick={onEnterPressed}
+ />
</div>
);
};
diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx
index a19836c37..781ec820b 100644
--- a/ts/components/leftpane/overlay/OverlayMessage.tsx
+++ b/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"
/>
diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
index 853d235c1..06ae33b37 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
+++ b/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);
diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
index d662f5a78..4b1571e67 100644
--- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
+++ b/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>
diff --git a/ts/session/constants.ts b/ts/session/constants.ts
index 44d64a627..9517c6a29 100644
--- a/ts/session/constants.ts
+++ b/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,
};
diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts
index 7d504ef7c..0c9a2889b 100644
--- a/ts/types/LocalizerKeys.ts
+++ b/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';