Merge pull request #2113 from SFDO-Tooling/feature/a11y-githubuser-card

Remove collaborator card heading
SFDO-Tooling · Apr 11, 2023 · 1efa298 · 1efa298
2 parents 1ca9089 + 659fbf0
commit 1efa298
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/src/js/components/githubUsers/cards.tsx b/src/js/components/githubUsers/cards.tsx
@@ -1,5 +1,4 @@
 import Button from '@salesforce/design-system-react/components/button';
-import Card from '@salesforce/design-system-react/components/card';
 import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -35,26 +34,33 @@ export const UserCard = ({
     );
   }
   return (
-    <Card
-      className={classNames(className, 'collaborator-card')}
-      icon={<GitHubUserAvatar user={user} />}
-      heading={name}
-      headerActions={
-        removeUser ? (
-          <Button
-            assistiveText={{ icon: t('Remove') }}
-            className="overflow-shadow"
-            iconCategory="utility"
-            iconName="close"
-            iconSize="small"
-            iconVariant="border-filled"
-            variant="icon"
-            title={t('Remove')}
-            onClick={removeUser}
-          />
-        ) : null
-      }
-    />
+    <article
+      className={`slds-card ${classNames(className, 'collaborator-card')}`}
+    >
+      <div className="slds-card__header slds-grid">
+        <div className="slds-media slds-media_center slds-has-flexi-truncate">
+          <div className="slds-media__figure">
+            <GitHubUserAvatar user={user} />
+          </div>
+          <div className="slds-media__body">{name}</div>
+        </div>
+        <div className="slds-no-flex">
+          {removeUser ? (
+            <Button
+              assistiveText={{ icon: t('Remove') }}
+              className="overflow-shadow"
+              iconCategory="utility"
+              iconName="close"
+              iconSize="small"
+              iconVariant="border-filled"
+              variant="icon"
+              title={`${t('Remove')} ${name}`}
+              onClick={removeUser}
+            />
+          ) : null}
+        </div>
+      </div>
+    </article>
   );
 };
 

diff --git a/test/js/components/epics/detail.test.jsx b/test/js/components/epics/detail.test.jsx
@@ -710,7 +710,11 @@ describe('<EpicDetail/>', () => {
           },
         },
       });
-      fireEvent.click(getByTitle('Remove'));
+      fireEvent.click(
+        getByTitle(
+          `Remove ${sampleGitHubUser2.name} (${sampleGitHubUser2.login})`,
+        ),
+      );
 
       expect(updateObject).toHaveBeenCalled();
       expect(updateObject.mock.calls[0][0].data.github_users).toEqual([]);
@@ -733,8 +737,11 @@ describe('<EpicDetail/>', () => {
           },
         },
       });
-      fireEvent.click(getByTitle('Remove'));
-
+      fireEvent.click(
+        getByTitle(
+          `Remove ${sampleGitHubUser1.name} (${sampleGitHubUser1.login})`,
+        ),
+      );
       expect(updateObject).not.toHaveBeenCalled();
       expect(getByText('Confirm Removing Collaborator')).toBeVisible();
     });