feat: ASC-25653 - add accessibilityId (#650)

* feat: add accessibility id * feat: add accessibilityId
AmityCo · Sep 18, 2024 · 8d4c4a8 · 8d4c4a8
1 parent dcdad21
commit 8d4c4a8
Show file tree

Hide file tree

Showing 25 changed files with 128 additions and 26 deletions.
diff --git a/src/v4/social/components/Comment/Comment.tsx b/src/v4/social/components/Comment/Comment.tsx
@@ -239,7 +239,10 @@ export const Comment = ({
                       {isLiked ? 'Liked' : 'Like'}
                     </Typography.CaptionBold>
                   </div>
-                  <div onClick={() => onClickReply(comment)}>
+                  <div
+                    data-qa-anchor={`${pageId}/${componentId}/reply_button`}
+                    onClick={() => onClickReply(comment)}
+                  >
                     <Typography.CaptionBold className={styles.postComment__secondRow__reply}>
                       Reply
                     </Typography.CaptionBold>

diff --git a/src/v4/social/components/CommentComposer/CommentComposer.tsx b/src/v4/social/components/CommentComposer/CommentComposer.tsx
@@ -33,6 +33,7 @@ export type CreateCommentParams = {
 };
 
 interface CommentComposerProps {
+  pageId?: string;
   referenceId: string;
   referenceType: Amity.CommentReferenceType;
   replyTo?: Amity.Comment;
@@ -42,6 +43,7 @@ interface CommentComposerProps {
 }
 
 export const CommentComposer = ({
+  pageId = '*',
   referenceId,
   referenceType,
   replyTo,
@@ -55,6 +57,7 @@ export const CommentComposer = ({
   const editorRef = useRef<CommentInputRef | null>(null);
   const composerRef = useRef<HTMLDivElement | null>(null);
   const composerInputRef = useRef<HTMLDivElement | null>(null);
+  const componentId = 'comment_composer_bar';
 
   const [composerHeight, setComposerHeight] = useState(0);
   const [mentionOffsetBottom, setMentionOffsetBottom] = useState(0);
@@ -129,7 +132,12 @@ export const CommentComposer = ({
       <div className={styles.commentComposer__avatar}>
         <Avatar avatarUrl={avatarUrl} defaultImage={<User />} />
       </div>
-      <div className={styles.commentComposer__input} ref={composerInputRef}>
+
+      <div
+        data-qa-anchor={`${pageId}/${componentId}/comment_composer`}
+        className={styles.commentComposer__input}
+        ref={composerInputRef}
+      >
         <CommentInput
           ref={editorRef}
           onChange={onChange}
@@ -142,6 +150,7 @@ export const CommentComposer = ({
         />
       </div>
       <Button
+        data-qa-anchor={`${pageId}/${componentId}/create_comment_button`}
         isDisabled={!textValue.data.text}
         className={styles.commentComposer__button}
         onPress={() => mutateAsync({ params: textValue })}

diff --git a/src/v4/social/components/CommentList/CommentList.tsx b/src/v4/social/components/CommentList/CommentList.tsx
@@ -117,6 +117,7 @@ export const CommentList = ({
           <CommentAd key={item.adId} ad={item} />
         ) : (
           <Comment
+            pageId={pageId}
             key={item.commentId}
             comment={item as Amity.Comment}
             onClickReply={(comment) => onClickReply?.(comment)}

diff --git a/src/v4/social/components/CommentTray/CommentTray.tsx b/src/v4/social/components/CommentTray/CommentTray.tsx
@@ -46,6 +46,7 @@ export const CommentTray = ({
     >
       <div className={styles.commentListContainer}>
         <CommentList
+          pageId={pageId}
           referenceId={referenceId}
           referenceType={referenceType}
           community={community}

diff --git a/src/v4/social/components/CommunityFeed/CommunityFeed.tsx b/src/v4/social/components/CommunityFeed/CommunityFeed.tsx
@@ -148,6 +148,7 @@ export const CommunityFeed = ({ pageId = '*', communityId }: CommunityFeedProps)
                 }
               >
                 <PostContent
+                  pageId={pageId}
                   key={post.postId}
                   post={post}
                   category={

diff --git a/src/v4/social/components/CommunityHeader/CommunityHeader.tsx b/src/v4/social/components/CommunityHeader/CommunityHeader.tsx
@@ -24,6 +24,7 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
   pageId = '*',
   community,
 }) => {
+  const componentId = 'community_header';
   const { onBack, onEditCommunity } = useNavigation();
   const { activeTab, setActiveTab } = useCommunityTabContext();
 
@@ -46,25 +47,41 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
     <div className={styles.container}>
       <CommunityCover
         pageId={pageId}
+        componentId={componentId}
         image={avatarFileUrl}
         onBack={onBack}
         onClickMenu={() => onEditCommunity(community.communityId)}
       />
       <div className={styles.content}>
         <div className={styles.name}>
           {!community.isPublic && <Lock className={styles.communityProfile__privateIcon} />}
-          <CommunityName pageId={pageId} name={community.displayName} />
+          <CommunityName pageId={pageId} componentId={componentId} name={community.displayName} />
           {community.isOfficial && <CommunityVerifyBadge />}
         </div>
 
-        <CommunityCategory pageId={pageId} categories={communityCategories} />
+        <CommunityCategory
+          pageId={pageId}
+          componentId={componentId}
+          categories={communityCategories}
+        />
 
-        <CommunityDescription pageId={pageId} description={community.description || ''} />
+        <CommunityDescription
+          pageId={pageId}
+          componentId={componentId}
+          description={community.description || ''}
+        />
 
         <div className={styles.communityProfile__communityInfo__container}>
-          <CommunityInfo count={community.postsCount} text="posts" />
+          <CommunityInfo
+            pageId={pageId}
+            componentId={componentId}
+            count={community.postsCount}
+            text="posts"
+          />
           <div className={styles.divider}></div>
           <CommunityInfo
+            pageId={pageId}
+            componentId={componentId}
             count={community.membersCount}
             text="members"
             onClick={() => onEditCommunity(community.communityId, 'MEMBERS')}
@@ -73,15 +90,19 @@ export const CommunityHeader: React.FC<CommunityProfileHeaderProps> = ({
 
         {!community.isJoined && community.isPublic && (
           <div className={styles.communityProfile__joinButton__container}>
-            <CommunityJoinButton onClick={joinCommunity} />
+            <CommunityJoinButton
+              pageId={pageId}
+              componentId={componentId}
+              onClick={joinCommunity}
+            />
           </div>
         )}
         <div>
-          <StoryTab type="communityFeed" communityId={community.communityId} />
+          <StoryTab type="communityFeed" pageId={pageId} communityId={community.communityId} />
         </div>
         {/* {isShowPendingPost && (
           <div className={styles.communityProfile__pendingPost__container}>
-            <CommunityPendingPost />
+            <CommunityPendingPost pageId={pageId} componentId={componentId}  />
           </div>
         )} */}
         <CommunityProfileTab pageId={pageId} activeTab={activeTab} onTabChange={handleTabChange} />

diff --git a/src/v4/social/components/PostContent/PostContent.tsx b/src/v4/social/components/PostContent/PostContent.tsx
@@ -183,7 +183,7 @@ export const PostContent = ({
   style,
 }: PostContentProps) => {
   const componentId = 'post_content';
-  const { themeStyles } = useAmityComponent({
+  const { themeStyles, accessibilityId } = useAmityComponent({
     pageId,
     componentId,
   });
@@ -330,7 +330,12 @@ export const PostContent = ({
   }, [post, isVisible, page.type]);
 
   return (
-    <div ref={elementRef} className={styles.postContent} style={themeStyles}>
+    <div
+      data-qa-anchor={accessibilityId}
+      ref={elementRef}
+      className={styles.postContent}
+      style={themeStyles}
+    >
       {(category === AmityPostCategory.ANNOUNCEMENT ||
         category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && (
         <AnnouncementBadge pageId={pageId} componentId={componentId} />

diff --git a/src/v4/social/components/TopSearchBar/TopSearchBar.tsx b/src/v4/social/components/TopSearchBar/TopSearchBar.tsx
@@ -14,7 +14,7 @@ export interface TopSearchBarProps {
 
 export function TopSearchBar({ pageId = '*', search }: TopSearchBarProps) {
   const componentId = 'top_search_bar';
-  const { config, isExcluded, themeStyles } = useAmityComponent({
+  const { config, isExcluded, themeStyles, accessibilityId } = useAmityComponent({
     pageId,
     componentId,
   });
@@ -44,6 +44,7 @@ export function TopSearchBar({ pageId = '*', search }: TopSearchBarProps) {
           value={searchValue}
           placeholder={config.text}
           onChange={(ev) => setSearchValue(ev.target.value)}
+          data-qa-anchor={accessibilityId}
         />
         {searchValue != '' ? (
           <ClearButton

diff --git a/src/v4/social/elements/CommentButton/CommentButton.tsx b/src/v4/social/elements/CommentButton/CommentButton.tsx
@@ -48,9 +48,8 @@ export function CommentButton({
   if (isExcluded) return null;
 
   return (
-    <Button onPress={onPress}>
+    <Button onPress={onPress} data-qa-anchor={accessibilityId}>
       <IconComponent
-        data-qa-anchor={accessibilityId}
         defaultIcon={() => (
           <div className={clsx(styles.commentButton)}>
             <CommentSvg className={clsx(styles.commentButton__icon, defaultIconClassName)} />

diff --git a/src/v4/social/elements/CreateNewPostButton/CreateNewPostButton.tsx b/src/v4/social/elements/CreateNewPostButton/CreateNewPostButton.tsx
@@ -16,7 +16,7 @@ export function CreateNewPostButton({
   onSubmit,
 }: CreateNewPostButtonProps) {
   const elementId = 'create_new_post_button';
-  const { config, isExcluded, themeStyles } = useAmityElement({
+  const { config, isExcluded, themeStyles, accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
@@ -30,6 +30,7 @@ export function CreateNewPostButton({
       disabled={!isValid}
       className={styles.createNewPostButton}
       type="submit"
+      data-qa-anchor={accessibilityId}
     >
       {config.text}
     </button>

diff --git a/src/v4/social/elements/EditPostButton/EditPostButton.tsx b/src/v4/social/elements/EditPostButton/EditPostButton.tsx
@@ -10,15 +10,20 @@ type EditPostButtonProps = ButtonProps & {
 
 export function EditPostButton({ pageId = '*', componentId = '*', ...props }: EditPostButtonProps) {
   const elementId = 'edit_post_button';
-  const { config, isExcluded, themeStyles } = useAmityElement({
+  const { config, isExcluded, themeStyles, accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
   });
   if (isExcluded) return null;
 
   return (
-    <Button style={themeStyles} className={styles.editPostButton} {...props}>
+    <Button
+      data-qa-anchor={accessibilityId}
+      style={themeStyles}
+      className={styles.editPostButton}
+      {...props}
+    >
       {config.text}
     </Button>
   );

diff --git a/src/v4/social/elements/PostTextField/PostTextField.tsx b/src/v4/social/elements/PostTextField/PostTextField.tsx
@@ -31,6 +31,8 @@ import useCommunity from '~/v4/core/hooks/collections/useCommunity';
 import { MentionItem } from '~/v4/social/internal-components/Lexical/MentionItem';
 
 interface PostTextFieldProps {
+  pageId?: string;
+  componentId?: string;
   communityId?: string | null;
   attachmentAmount?: number;
   mentionContainer: HTMLElement | null;
@@ -131,8 +133,11 @@ export const PostTextField = ({
   communityId,
   mentionContainer,
   dataValue,
+  pageId = '*',
+  componentId = '*',
 }: PostTextFieldProps) => {
   const [intersectionNode, setIntersectionNode] = useState<HTMLDivElement | null>(null);
+  const elementId = 'post_text_field';
 
   const editorConfig = getEditorConfig({
     namespace: 'PostTextField',
@@ -168,7 +173,10 @@ export const PostTextField = ({
             : {}),
         }}
       >
-        <div className={styles.editorContainer}>
+        <div
+          className={styles.editorContainer}
+          data-qa-anchor={`${pageId}/${componentId}/${elementId}`}
+        >
           <RichTextPlugin
             contentEditable={<ContentEditable />}
             placeholder={<div className={styles.editorPlaceholder}>What’s going on...</div>}

diff --git a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx
@@ -38,7 +38,7 @@ export const ShareStoryButton = ({
   onClick,
 }: ShareButtonProps) => {
   const elementId = 'share_story_button';
-  const { config, isExcluded } = useAmityElement({
+  const { config, isExcluded, accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
@@ -50,7 +50,7 @@ export const ShareStoryButton = ({
     <button
       role="button"
       className={clsx(styles.shareStoryButton)}
-      data-qa-anchor="share_story_button"
+      data-qa-anchor={accessibilityId}
       onClick={onClick}
       data-hideAvatar={config?.hide_avatar}
     >

diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx
@@ -284,6 +284,7 @@ export const Comment = ({
           <div data-qa-anchor="comment">{renderedComment}</div>
           {comment.children.length > 0 && (
             <CommentList
+              pageId={pageId}
               componentId={componentId}
               parentId={comment.commentId}
               referenceType={comment.referenceType}

diff --git a/src/v4/social/internal-components/CreatePost/CreatePost.tsx b/src/v4/social/internal-components/CreatePost/CreatePost.tsx
@@ -305,6 +305,7 @@ export function CreatePost({ community, targetType, targetId }: AmityPostCompose
           />
         </div>
         <PostTextField
+          pageId={pageId}
           onChange={onChange}
           communityId={targetId}
           mentionContainer={mentionRef.current}
@@ -313,6 +314,7 @@ export function CreatePost({ community, targetType, targetId }: AmityPostCompose
           }}
         />
         <ImageThumbnail
+          pageId={pageId}
           files={incomingImages}
           uploadedFiles={postImages}
           uploadLoading={uploadLoading}
@@ -325,6 +327,7 @@ export function CreatePost({ community, targetType, targetId }: AmityPostCompose
           isErrorUpload={isErrorUpload}
         />
         <VideoThumbnail
+          pageId={pageId}
           files={incomingVideos}
           uploadedFiles={postVideos}
           uploadLoading={uploadLoading}

diff --git a/src/v4/social/internal-components/EditPost/EditPost.tsx b/src/v4/social/internal-components/EditPost/EditPost.tsx
@@ -161,6 +161,7 @@ export function EditPost({ post }: AmityPostComposerEditOptions) {
           />
         </div>
         <PostTextField
+          pageId={pageId}
           communityId={post.targetType === 'community' ? post.targetId : undefined}
           onChange={onChange}
           mentionContainer={mentionRef.current}

diff --git a/src/v4/social/internal-components/EditPost/Thumbnail.tsx b/src/v4/social/internal-components/EditPost/Thumbnail.tsx
@@ -6,21 +6,32 @@ import { PostContentType } from '@amityco/ts-sdk';
 import { Button } from '~/v4/core/natives/Button';
 
 const MediaComponent = ({
+  pageId = '*',
+  componentId = '*',
   fieldId,
   onRemove,
   type,
 }: {
   fieldId: string;
   onRemove: () => void;
   type: 'image' | 'video';
+  pageId?: string;
+  componentId?: string;
 }) => {
   const thumbnailUrl = useImage({ fileId: fieldId });
 
+  const elementId = 'remove_thumbnail';
+
   if (!thumbnailUrl) return null;
   return (
     <>
       <img className={styles.thumbnail} src={thumbnailUrl} alt="thumbnail" />
-      <Button type="reset" onPress={() => onRemove()} className={styles.thumbnail__closeButton}>
+      <Button
+        data-qa-anchor={`${pageId}/${componentId}/${elementId}`}
+        type="reset"
+        onPress={() => onRemove()}
+        className={styles.thumbnail__closeButton}
+      >
         <CloseIcon className={styles.thumbnail__closeIcon} />
       </Button>
       {type === PostContentType.VIDEO && (