Repository: Sage/carbon (ts)

Issue:
Profile: email anchor rendered when no `email` value provided
### Description

When using the Profile component, I can omit the email address. Visually this is fine but it fails a11y checks because the link is still rendered in the DOM, without any text.
 
![Screenshot 2024-05-29 at 15 00 04](https://github.com/Sage/carbon/assets/55696743/17133167-c437-4f3d-93d8-1f5a0011a9d4)

The element shouldn't render if there is no email address provided.

### Reproduction

https://stackblitz.com/edit/damo-optional-profile-email?file=src%2FApp.tsx

### Steps to reproduce

As demonstrated in the above StackBlitz, there are two anchors present despite only one Profile having the `email` property set. Running this against AXE DevTools, a violation is highlighted

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

Only render the anchor and wrapping elements if email is present, otherwise render nothing

### Carbon version

135.1.2

### Design tokens version

4.23.0

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request description:
fix(profile): accessibility violation when no email is provided
fix #6754

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

When the `email` prop is not provided, the anchor element is not rendered. 
When the `text` prop is not provided, the span element is not rendered. 

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

When the `email` prop is not provided, the anchor element is still rendered causing an accessibility violation: "Links must have discernible text".
When the `text` prop is not provided, the span element is still rendered. 

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [ ] Unit tests added or updated if required
- [x] Playwright automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->

Go to test story for Profile, remove the `email` from props, see accessibility violation: "Links must have discernible text".


Patch:
diff --git a/src/components/profile/profile.component.tsx b/src/components/profile/profile.component.tsx
index 336f242e2..c426b02fd 100644
--- a/src/components/profile/profile.component.tsx
+++ b/src/components/profile/profile.component.tsx
@@ -96,17 +96,21 @@ export const Profile = ({
           <ProfileNameStyle size={size} data-element="name">
             {name}
           </ProfileNameStyle>
-          <ProfileEmailStyle
-            href={`mailto: ${email}`}
-            size={size}
-            darkBackground={darkBackground}
-            data-element="email"
-          >
-            {email}
-          </ProfileEmailStyle>
-          <ProfileTextStyle size={size} data-element="text">
-            {text}
-          </ProfileTextStyle>
+          {email && (
+            <ProfileEmailStyle
+              href={`mailto: ${email}`}
+              size={size}
+              darkBackground={darkBackground}
+              data-element="email"
+            >
+              {email}
+            </ProfileEmailStyle>
+          )}
+          {text && (
+            <ProfileTextStyle size={size} data-element="text">
+              {text}
+            </ProfileTextStyle>
+          )}
         </ProfileDetailsStyle>
       );
     return null;
diff --git a/src/components/profile/profile.pw.tsx b/src/components/profile/profile.pw.tsx
index 728bd73bf..fe82eecd3 100644
--- a/src/components/profile/profile.pw.tsx
+++ b/src/components/profile/profile.pw.tsx
@@ -291,6 +291,15 @@ test.describe("should check Accessibility tests for Profile component", () => {
     });
   });
 
+  test("should pass accessibility tests when no email prop is passed", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ProfileComponent email="" />);
+
+    await checkAccessibility(page);
+  });
+
   test("should pass accessibility tests with dark background variant", async ({
     mount,
     page,


Test patch:
diff --git a/src/components/profile/profile-test.stories.tsx b/src/components/profile/profile-test.stories.tsx
index e987252e4..3edfb8ed3 100644
--- a/src/components/profile/profile-test.stories.tsx
+++ b/src/components/profile/profile-test.stories.tsx
@@ -15,8 +15,8 @@ export default {
     size: {
       control: {
         type: "select",
-        options: PROFILE_SIZES,
       },
+      options: PROFILE_SIZES,
     },
     mx: {
       control: {