From caa09c9b2f0dc257a045d53295325b7a5895397f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=BAcio=20BJ?= <lb@tsl.com>
Date: Wed, 30 Jul 2025 15:21:42 -0300
Subject: [PATCH 1/5] 
 feature/BA-2628-add-aria-label-and-alt-text-to-profile-images-and-inputs-for-tests-component-identification

---
 .../modules/profiles/web/ProfileSettingsComponent/index.tsx | 5 +++++
 .../components/web/avatars/AvatarWithPlaceholder/index.tsx  | 3 ++-
 .../components/web/avatars/CircledAvatar/index.tsx          | 2 ++
 .../components/web/buttons/FileUploadButton/index.tsx       | 5 +++--
 .../components/web/buttons/FileUploadButton/types.ts        | 6 ++++--
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx b/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx
index fef795a0..f5c14341 100644
--- a/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx
@@ -150,6 +150,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                     width={144}
                     height={144}
                     hasError={!!getFieldState('image').error}
+                    alt='Avatar image'
                   />
                   {getFieldState('image').error && (
                     <div className="text-center">
@@ -165,6 +166,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                     accept={DEFAULT_IMAGE_FORMATS}
                     maxSize={DEFAULT_IMAGE_MAX_SIZE}
                     label={hasUploadedImage ? 'Change Image' : 'Upload Image'}
+                    aria-label='Avatar image'
                   />
                   {watchImage && (
                     <LoadingButton
@@ -173,6 +175,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                       loading={isMutationInFlight}
                       disabled={isMutationInFlight}
                       onClick={() => handleRemoveImage(PROFILE_FORM_VALUE.image)}
+                      aria-label='Remove avatar button'
                     >
                       Remove
                     </LoadingButton>
@@ -243,6 +246,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                     maxSize={DEFAULT_BANNER_IMAGE_MAX_SIZE}
                     label={hasUploadedBannerImage ? 'Change Banner' : 'Upload Banner'}
                     sx={{ maxWidth: 'fit-content', justifySelf: 'end' }}
+                    aria-label='Banner image'
                   />
                   {watchBannerImage && (
                     <LoadingButton
@@ -252,6 +256,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                       loading={isMutationInFlight}
                       disabled={isMutationInFlight}
                       sx={{ maxWidth: 'fit-content' }}
+                      aria-label='Remove banner button'
                     >
                       Remove
                     </LoadingButton>
diff --git a/packages/design-system/components/web/avatars/AvatarWithPlaceholder/index.tsx b/packages/design-system/components/web/avatars/AvatarWithPlaceholder/index.tsx
index 24dc1936..afd61818 100644
--- a/packages/design-system/components/web/avatars/AvatarWithPlaceholder/index.tsx
+++ b/packages/design-system/components/web/avatars/AvatarWithPlaceholder/index.tsx
@@ -8,9 +8,10 @@ const AvatarWithPlaceholder: FC<AvatarWithPlaceholderProps> = ({
   width = 40,
   height = 40,
   children,
+  alt,
   ...props
 }) => (
-  <AvatarStyled width={width} height={height} {...props}>
+  <AvatarStyled width={width} height={height} alt={alt} {...props}>
     {children || (
       <AvatarUploadFallbackIcon sx={{ fontSize: width }} titleAccess="Avatar Fallback" />
     )}
diff --git a/packages/design-system/components/web/avatars/CircledAvatar/index.tsx b/packages/design-system/components/web/avatars/CircledAvatar/index.tsx
index 3f793f07..977a9d42 100644
--- a/packages/design-system/components/web/avatars/CircledAvatar/index.tsx
+++ b/packages/design-system/components/web/avatars/CircledAvatar/index.tsx
@@ -11,6 +11,7 @@ const CircledAvatar: FC<CircledAvatarProps> = ({
   height = 40,
   hasError,
   children,
+  alt,
   ...props
 }) => (
   <AvatarContainer width={width} height={height} hasError={hasError}>
@@ -18,6 +19,7 @@ const CircledAvatar: FC<CircledAvatarProps> = ({
       width={width}
       height={height}
       sx={({ palette }) => ({ border: `solid 8px ${palette.background.default}` })}
+      alt={alt}
       {...props}
     >
       {children}
diff --git a/packages/design-system/components/web/buttons/FileUploadButton/index.tsx b/packages/design-system/components/web/buttons/FileUploadButton/index.tsx
index 136d3405..be4cdbd4 100644
--- a/packages/design-system/components/web/buttons/FileUploadButton/index.tsx
+++ b/packages/design-system/components/web/buttons/FileUploadButton/index.tsx
@@ -12,8 +12,9 @@ import { FileUploadButtonProps } from './types'
 const FileUploadButton: FC<FileUploadButtonProps> = (props) => {
   const fileRef = useRef<HTMLInputElement | undefined>(undefined)
   const { sendToast } = useNotification()
-  const { accept, maxSize, ...fileUploadProps } = props
+  const { accept, maxSize, 'aria-label': ariaLabel, ...fileUploadProps } = props
   const { control, label, name, setFile } = fileUploadProps
+
   return (
     <>
       <Button
@@ -48,7 +49,7 @@ const FileUploadButton: FC<FileUploadButtonProps> = (props) => {
           }
           return (
             <Input
-              inputProps={{ ref: fileRef, accept }}
+              inputProps={{ ref: fileRef, accept, 'aria-label': ariaLabel }}
               value={field.value?.filename}
               onChange={handleOnChange}
               type="file"
diff --git a/packages/design-system/components/web/buttons/FileUploadButton/types.ts b/packages/design-system/components/web/buttons/FileUploadButton/types.ts
index 6476254a..569edca6 100644
--- a/packages/design-system/components/web/buttons/FileUploadButton/types.ts
+++ b/packages/design-system/components/web/buttons/FileUploadButton/types.ts
@@ -1,6 +1,6 @@
 import { RequireAllOrNone } from '@baseapp-frontend/utils'
 
-import { ButtonProps } from '@mui/material'
+import { ButtonProps, InputProps } from '@mui/material'
 import { Control, FieldValues, UseFormSetValue } from 'react-hook-form'
 
 type ControlProps = RequireAllOrNone<{
@@ -21,4 +21,6 @@ type FileInputProps = {
 
 type CustomButtonProps = Exclude<ButtonProps, 'name'>
 
-export type FileUploadButtonProps = CustomButtonProps & ControlProps & AvatarProps & FileInputProps
+export type FileUploadButtonProps = CustomButtonProps & ControlProps & AvatarProps & FileInputProps & {
+  'aria-label'?: string
+}

From 12bf38848546abb9684dee2b799535078591d6ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=BAcio=20BJ?= <lb@tsl.com>
Date: Wed, 30 Jul 2025 15:31:23 -0300
Subject: [PATCH 2/5] Lint

---
 .../components/web/buttons/FileUploadButton/types.ts  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/design-system/components/web/buttons/FileUploadButton/types.ts b/packages/design-system/components/web/buttons/FileUploadButton/types.ts
index 569edca6..e330d89d 100644
--- a/packages/design-system/components/web/buttons/FileUploadButton/types.ts
+++ b/packages/design-system/components/web/buttons/FileUploadButton/types.ts
@@ -1,6 +1,6 @@
 import { RequireAllOrNone } from '@baseapp-frontend/utils'
 
-import { ButtonProps, InputProps } from '@mui/material'
+import { ButtonProps } from '@mui/material'
 import { Control, FieldValues, UseFormSetValue } from 'react-hook-form'
 
 type ControlProps = RequireAllOrNone<{
@@ -21,6 +21,9 @@ type FileInputProps = {
 
 type CustomButtonProps = Exclude<ButtonProps, 'name'>
 
-export type FileUploadButtonProps = CustomButtonProps & ControlProps & AvatarProps & FileInputProps & {
-  'aria-label'?: string
-}
+export type FileUploadButtonProps = CustomButtonProps &
+  ControlProps &
+  AvatarProps &
+  FileInputProps & {
+    'aria-label'?: string
+  }

From 71b14887580904e002fe89e94624a9630ca22e2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=BAcio=20BJ?= <lb@tsl.com>
Date: Thu, 14 Aug 2025 16:16:07 -0300
Subject: [PATCH 3/5] Add component testing

---
 .../components/cypress/fixtures/tsl-logo.png  | Bin 0 -> 11872 bytes
 .../__tests__/ProfileSettings.cy.tsx          | 216 ++++++++++++++++++
 .../__tests__/__mocks__/requests.ts           | 198 ++++++++++++++++
 .../ProfileSettingsForTesting/index.tsx       |  24 ++
 4 files changed, 438 insertions(+)
 create mode 100755 packages/components/cypress/fixtures/tsl-logo.png
 create mode 100644 packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
 create mode 100644 packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__mocks__/requests.ts
 create mode 100644 packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__utils__/ProfileSettingsForTesting/index.tsx

diff --git a/packages/components/cypress/fixtures/tsl-logo.png b/packages/components/cypress/fixtures/tsl-logo.png
new file mode 100755
index 0000000000000000000000000000000000000000..4ee46ba8a265e4dfbc77b8844b2a8a8a8ca45854
GIT binary patch
literal 11872
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

literal 0
HcmV?d00001

diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
new file mode 100644
index 00000000..cbd72187
--- /dev/null
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
@@ -0,0 +1,216 @@
+import { createTestEnvironment } from '@baseapp-frontend/graphql'
+
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
+
+import '../../../../../styles/tailwind/globals.css'
+import {
+  mockDataWithBanner,
+  profileSettingsBannerRemoveData,
+  profileSettingsBannerUpdateData,
+  profileSettingsImageRemoveData,
+  profileSettingsImageUpdateData,
+  profileSettingsMockData,
+  profileSettingsTextUpdateData,
+} from './__mocks__/requests'
+import ProfileSettingsForTesting from './__utils__/ProfileSettingsForTesting'
+
+const nameInput = () =>
+  cy.findByLabelText('Name', { exact: true, selector: 'input' }).as('nameInput')
+const usernameInput = () =>
+  cy.findByLabelText(/username/i, { selector: 'input' }).as('usernameInput')
+const phoneInput = () => cy.findByLabelText(/phone number/i, { selector: 'input' }).as('phoneInput')
+const bioInput = () => cy.findByLabelText(/bio/i).as('bioInput')
+const avatarInput = () =>
+  cy
+    .findByLabelText(/avatar image/i, { selector: 'button' })
+    .parent()
+    .find('input[type="file"]')
+    .as('avatarInput')
+const bannerInput = () =>
+  cy
+    .findByLabelText(/banner image/i, { selector: 'button' })
+    .parent()
+    .find('input[type="file"]')
+    .as('bannerInput')
+const avatarFallbackImage = () => cy.get('img, [title="Avatar Fallback"]').as('avatarFallbackImage')
+const avatarImage = () => cy.findByAltText('Avatar image').as('avatarImage')
+const bannerImage = () => cy.findByAltText('Home Banner').as('bannerImage')
+const changeAvatarButton = () =>
+  cy.findByLabelText(/avatar image/i, { selector: 'button' }).as('changeAvatarButton')
+const removeAvatarButton = () =>
+  cy.findByRole('button', { name: /remove avatar button/i }).as('removeAvatarButton')
+const changeBannerButton = () =>
+  cy.findByLabelText(/banner image/i, { selector: 'button' }).as('changeBannerButton')
+const removeBannerButton = () =>
+  cy.findByLabelText(/remove banner button/i).as('removeBannerButton')
+const saveChangesButton = () =>
+  cy.findByRole('button', { name: /save changes/i }).as('saveChangesButton')
+
+describe('ProfileSettings', () => {
+  it('should render profile settings form elements with initial data', () => {
+    const { environment, queueOperationResolver } = createTestEnvironment()
+    queueOperationResolver({
+      queryName: 'ProfileSettingsForTestingQuery',
+      data: profileSettingsMockData,
+    })
+    cy.mockNextRouter().then((router) => {
+      cy.mount(
+        <AppRouterContext.Provider value={router}>
+          <ProfileSettingsForTesting environment={environment} />
+        </AppRouterContext.Provider>,
+      )
+    })
+
+    cy.findByText('Profile').should('exist')
+    cy.findByText('Manage your personal information you and other people see.').should('exist')
+    nameInput().should('have.value', 'John Doe')
+    usernameInput().should('have.value', 'johndoes')
+    phoneInput().should('have.value', '+1 (555) 123-4567')
+    bioInput().should('have.value', 'John Doe is a software engineer at Google.')
+    avatarFallbackImage().should('exist')
+    changeAvatarButton().should('exist')
+    bannerImage().should('exist')
+    changeBannerButton().should('exist')
+    saveChangesButton().should('be.disabled')
+  })
+
+  it('should show validation errors for invalid input', () => {
+    const { environment, queueOperationResolver } = createTestEnvironment()
+    queueOperationResolver({
+      queryName: 'ProfileSettingsForTestingQuery',
+      data: profileSettingsMockData,
+    })
+    cy.mockNextRouter().then((router) => {
+      cy.mount(
+        <AppRouterContext.Provider value={router}>
+          <ProfileSettingsForTesting environment={environment} />
+        </AppRouterContext.Provider>,
+      )
+    })
+
+    cy.step('Test name validation')
+    nameInput().clear().blur()
+    cy.findByText('Please enter a name.').should('exist')
+    cy.step('Test username validation')
+    usernameInput().clear().type('short').blur()
+    cy.findByText('Username must be at least 8 characters long.').should('exist')
+    cy.get('@usernameInput').clear().type('invalid-username').blur()
+    cy.findByText('Username can only contain letters and numbers').should('exist')
+    saveChangesButton().should('be.disabled')
+  })
+
+  it('should update text fields successfully', () => {
+    const { environment, resolveMostRecentOperation, queueOperationResolver } =
+      createTestEnvironment()
+    queueOperationResolver({
+      queryName: 'ProfileSettingsForTestingQuery',
+      data: profileSettingsMockData,
+    })
+    cy.mockNextRouter().then((router) => {
+      cy.mount(
+        <AppRouterContext.Provider value={router}>
+          <ProfileSettingsForTesting environment={environment} />
+        </AppRouterContext.Provider>,
+      )
+    })
+
+    nameInput().clear().type('Jane Smith')
+    usernameInput().clear().type('janesmith')
+    phoneInput().clear().type('+1123456789')
+    bioInput().clear().type('Jane Smith is a software engineer at Microsoft.')
+    saveChangesButton().should('not.be.disabled')
+    cy.step('Submit the form')
+    cy.get('@saveChangesButton')
+      .click()
+      .then(() => {
+        resolveMostRecentOperation({ data: profileSettingsTextUpdateData })
+      })
+    cy.findByText('Profile updated').should('exist')
+    cy.get('@nameInput').should('have.value', 'Jane Smith')
+    cy.get('@usernameInput').should('have.value', 'janesmith')
+    cy.get('@phoneInput').should('have.value', '+1 (123) 456-789')
+    cy.get('@bioInput').should('have.value', 'Jane Smith is a software engineer at Microsoft.')
+  })
+
+  it('should update and remove avatar image successfully', () => {
+    const { environment, resolveMostRecentOperation, queueOperationResolver } =
+      createTestEnvironment()
+    queueOperationResolver({
+      queryName: 'ProfileSettingsForTestingQuery',
+      data: profileSettingsMockData,
+    })
+    cy.mockNextRouter().then((router) => {
+      cy.mount(
+        <AppRouterContext.Provider value={router}>
+          <ProfileSettingsForTesting environment={environment} />
+        </AppRouterContext.Provider>,
+      )
+    })
+
+    cy.step('Update the avatar image')
+    avatarInput().selectFile('cypress/fixtures/tsl-logo.png', { force: true })
+    changeAvatarButton().should('exist')
+    removeAvatarButton().should('exist')
+    saveChangesButton().should('not.be.disabled')
+    cy.step('Submit the form')
+    cy.get('@saveChangesButton')
+      .click()
+      .then(() => {
+        resolveMostRecentOperation({ data: profileSettingsImageUpdateData })
+      })
+    cy.findByText('Profile updated').should('exist')
+    avatarImage().should('exist')
+    cy.step('Remove the avatar image')
+    cy.findByRole('button', { name: /remove/i })
+      .first()
+      .click()
+    saveChangesButton().should('not.be.disabled')
+    cy.step('Submit the form')
+    cy.get('@saveChangesButton')
+      .click()
+      .then(() => {
+        resolveMostRecentOperation({ data: profileSettingsImageRemoveData })
+      })
+    cy.findByText('Profile updated').should('exist')
+  })
+
+  it('should update and remove banner image successfully', () => {
+    const { environment, resolveMostRecentOperation, queueOperationResolver } =
+      createTestEnvironment()
+    queueOperationResolver({
+      queryName: 'ProfileSettingsForTestingQuery',
+      data: profileSettingsMockData,
+    })
+    cy.mockNextRouter().then((router) => {
+      cy.mount(
+        <AppRouterContext.Provider value={router}>
+          <ProfileSettingsForTesting environment={environment} />
+        </AppRouterContext.Provider>,
+      )
+    })
+
+    cy.step('Update the banner image')
+    bannerInput().selectFile('cypress/fixtures/tsl-logo.png', { force: true })
+    changeBannerButton().should('exist')
+    removeBannerButton().should('exist')
+    saveChangesButton().should('not.be.disabled')
+    cy.step('Submit the form')
+    cy.get('@saveChangesButton')
+      .click()
+      .then(() => {
+        resolveMostRecentOperation({ data: profileSettingsBannerUpdateData })
+      })
+    cy.findByText('Profile updated').should('exist')
+    bannerImage().should('exist')
+    cy.step('Remove the banner image')
+    cy.get('@removeBannerButton').click()
+    cy.get('@saveChangesButton').should('not.be.disabled')
+    cy.step('Submit the form')
+    cy.get('@saveChangesButton')
+      .click()
+      .then(() => {
+        resolveMostRecentOperation({ data: profileSettingsBannerRemoveData })
+      })
+    cy.findByText('Profile updated').should('exist')
+  })
+})
diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__mocks__/requests.ts b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__mocks__/requests.ts
new file mode 100644
index 00000000..64f3b589
--- /dev/null
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__mocks__/requests.ts
@@ -0,0 +1,198 @@
+export const profileSettingsMockData = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: 'profile-123',
+      status: 'ACTIVE',
+      name: 'John Doe',
+      biography: 'John Doe is a software engineer at Google.',
+      image: null,
+      bannerImage: null,
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/johndoes',
+      },
+      owner: {
+        phoneNumber: '+15551234567',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
+
+export const profileSettingsTextUpdateData = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: `profile-123`,
+      status: 'ACTIVE',
+      name: 'Jane Smith',
+      biography: 'Jane Smith is a software engineer at Microsoft.',
+      image: {
+        url: null,
+      },
+      bannerImage: {
+        url: null,
+      },
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/janesmith',
+      },
+      owner: {
+        phoneNumber: '+1123456789',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
+
+export const profileSettingsImageUpdateData = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: `profile-123`,
+      status: 'ACTIVE',
+      name: 'John Doe',
+      biography: 'John Doe is a software engineer at Google.',
+      image: {
+        url: 'https://nyc3.digitaloceanspaces.com/baseapp-production-storage/media/user-avatars/5/6/4/resized/50/50/185a04dfdaa512d218cf9b7a5097e3c9.png',
+      },
+      bannerImage: {
+        url: null,
+      },
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/johndoes',
+      },
+      owner: {
+        phoneNumber: '+1234567890',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
+
+export const profileSettingsImageRemoveData = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: `profile-123`,
+      status: 'ACTIVE',
+      name: 'John Doe',
+      biography: 'John Doe is a software engineer at Google.',
+      image: {
+        url: null,
+      },
+      bannerImage: {
+        url: null,
+      },
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/johndoes',
+      },
+      owner: {
+        phoneNumber: '+1234567890',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
+
+export const profileSettingsBannerUpdateData = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: `profile-123`,
+      status: 'ACTIVE',
+      name: 'John Doe',
+      biography: 'John Doe is a software engineer at Google.',
+      image: {
+        url: null,
+      },
+      bannerImage: {
+        url: 'https://nyc3.digitaloceanspaces.com/baseapp-production-storage/media/user-avatars/5/6/4/resized/50/50/185a04dfdaa512d218cf9b7a5097e3c9.png',
+      },
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/johndoes',
+      },
+      owner: {
+        phoneNumber: '+1234567890',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
+
+export const profileSettingsBannerRemoveData = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: `profile-123`,
+      status: 'ACTIVE',
+      name: 'John Doe',
+      biography: 'John Doe is a software engineer at Google.',
+      image: {
+        url: null,
+      },
+      bannerImage: {
+        url: null,
+      },
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/johndoes',
+      },
+      owner: {
+        phoneNumber: '+1234567890',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
+
+export const mockDataWithBanner = {
+  data: {
+    target: {
+      __typename: 'Profile',
+      id: 'profile-123',
+      status: 'ACTIVE',
+      name: 'John Doe',
+      biography: 'John Doe is a software engineer at Google.',
+      image: {
+        url: 'http://localhost:8000/media/profile_images/5dfe5729-1730-4fe6-b22a-a0f15f65a754.png.96x96_q85.png',
+      },
+      bannerImage: {
+        url: 'http://localhost:8000/media/banner_images/test-banner.png',
+      },
+      isFollowedByMe: false,
+      followersCount: 0,
+      followingCount: 0,
+      canChange: true,
+      urlPath: {
+        path: '/johndoes',
+      },
+      owner: {
+        phoneNumber: '+1234567890',
+      },
+      isBlockedByMe: false,
+    },
+  },
+}
diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__utils__/ProfileSettingsForTesting/index.tsx b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__utils__/ProfileSettingsForTesting/index.tsx
new file mode 100644
index 00000000..5bfc4ce7
--- /dev/null
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/__utils__/ProfileSettingsForTesting/index.tsx
@@ -0,0 +1,24 @@
+import { graphql, useLazyLoadQuery } from 'react-relay'
+
+import { ProfileComponentFragment$key } from '../../../../../../../__generated__/ProfileComponentFragment.graphql'
+import { ProfileSettingsForTestingQuery } from '../../../../../../../__generated__/ProfileSettingsForTestingQuery.graphql'
+import { withComponentCompleteTestProviders } from '../../../../../../tests/web'
+import ProfileSettings from '../../../index'
+import { ProfileSettingsComponentProps } from '../../../types'
+
+const ProfileSettingsForTesting = (props?: Partial<ProfileSettingsComponentProps>) => {
+  const data = useLazyLoadQuery<ProfileSettingsForTestingQuery>(
+    graphql`
+      query ProfileSettingsForTestingQuery @relay_test_operation {
+        target: node(id: "test-id") {
+          ...ProfileComponentFragment
+        }
+      }
+    `,
+    {},
+  )
+
+  return <ProfileSettings {...props} profile={data.target as ProfileComponentFragment$key} />
+}
+
+export default withComponentCompleteTestProviders(ProfileSettingsForTesting)

From 9d72e3843f898348f0e87a082274caf7313b7eb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=BAcio=20BJ?= <lb@tsl.com>
Date: Tue, 19 Aug 2025 10:47:57 -0300
Subject: [PATCH 4/5] Change element identification

---
 .../__tests__/ProfileSettings.cy.tsx                 | 12 ++++++------
 .../profiles/web/ProfileSettingsComponent/index.tsx  |  8 +++-----
 .../web/buttons/FileUploadButton/index.tsx           |  4 ++--
 .../components/web/buttons/FileUploadButton/types.ts |  7 +------
 4 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
index cbd72187..acdfe07c 100644
--- a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
@@ -22,25 +22,25 @@ const phoneInput = () => cy.findByLabelText(/phone number/i, { selector: 'input'
 const bioInput = () => cy.findByLabelText(/bio/i).as('bioInput')
 const avatarInput = () =>
   cy
-    .findByLabelText(/avatar image/i, { selector: 'button' })
+    .findByText(/change image/i)
     .parent()
     .find('input[type="file"]')
     .as('avatarInput')
 const bannerInput = () =>
   cy
-    .findByLabelText(/banner image/i, { selector: 'button' })
+    .findByText(/change banner/i)
     .parent()
     .find('input[type="file"]')
     .as('bannerInput')
 const avatarFallbackImage = () => cy.get('img, [title="Avatar Fallback"]').as('avatarFallbackImage')
 const avatarImage = () => cy.findByAltText('Avatar image').as('avatarImage')
 const bannerImage = () => cy.findByAltText('Home Banner').as('bannerImage')
-const changeAvatarButton = () =>
-  cy.findByLabelText(/avatar image/i, { selector: 'button' }).as('changeAvatarButton')
+// const changeAvatarButton = () =>
+//   cy.findByLabelText(/avatar image/i, { selector: 'button' }).as('changeAvatarButton')
+const changeAvatarButton = () => cy.findByText(/change image/i).as('changeAvatarButton')
 const removeAvatarButton = () =>
   cy.findByRole('button', { name: /remove avatar button/i }).as('removeAvatarButton')
-const changeBannerButton = () =>
-  cy.findByLabelText(/banner image/i, { selector: 'button' }).as('changeBannerButton')
+const changeBannerButton = () => cy.findByText(/change banner/i).as('changeBannerButton')
 const removeBannerButton = () =>
   cy.findByLabelText(/remove banner button/i).as('removeBannerButton')
 const saveChangesButton = () =>
diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx b/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx
index f5c14341..0aa791d3 100644
--- a/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/index.tsx
@@ -150,7 +150,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                     width={144}
                     height={144}
                     hasError={!!getFieldState('image').error}
-                    alt='Avatar image'
+                    alt="Avatar image"
                   />
                   {getFieldState('image').error && (
                     <div className="text-center">
@@ -166,7 +166,6 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                     accept={DEFAULT_IMAGE_FORMATS}
                     maxSize={DEFAULT_IMAGE_MAX_SIZE}
                     label={hasUploadedImage ? 'Change Image' : 'Upload Image'}
-                    aria-label='Avatar image'
                   />
                   {watchImage && (
                     <LoadingButton
@@ -175,7 +174,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                       loading={isMutationInFlight}
                       disabled={isMutationInFlight}
                       onClick={() => handleRemoveImage(PROFILE_FORM_VALUE.image)}
-                      aria-label='Remove avatar button'
+                      aria-label="Remove avatar button"
                     >
                       Remove
                     </LoadingButton>
@@ -246,7 +245,6 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                     maxSize={DEFAULT_BANNER_IMAGE_MAX_SIZE}
                     label={hasUploadedBannerImage ? 'Change Banner' : 'Upload Banner'}
                     sx={{ maxWidth: 'fit-content', justifySelf: 'end' }}
-                    aria-label='Banner image'
                   />
                   {watchBannerImage && (
                     <LoadingButton
@@ -256,7 +254,7 @@ const ProfileSettingsComponent: FC<ProfileSettingsComponentProps> = ({ profile:
                       loading={isMutationInFlight}
                       disabled={isMutationInFlight}
                       sx={{ maxWidth: 'fit-content' }}
-                      aria-label='Remove banner button'
+                      aria-label="Remove banner button"
                     >
                       Remove
                     </LoadingButton>
diff --git a/packages/design-system/components/web/buttons/FileUploadButton/index.tsx b/packages/design-system/components/web/buttons/FileUploadButton/index.tsx
index be4cdbd4..b78892b2 100644
--- a/packages/design-system/components/web/buttons/FileUploadButton/index.tsx
+++ b/packages/design-system/components/web/buttons/FileUploadButton/index.tsx
@@ -12,7 +12,7 @@ import { FileUploadButtonProps } from './types'
 const FileUploadButton: FC<FileUploadButtonProps> = (props) => {
   const fileRef = useRef<HTMLInputElement | undefined>(undefined)
   const { sendToast } = useNotification()
-  const { accept, maxSize, 'aria-label': ariaLabel, ...fileUploadProps } = props
+  const { accept, maxSize, ...fileUploadProps } = props
   const { control, label, name, setFile } = fileUploadProps
 
   return (
@@ -49,7 +49,7 @@ const FileUploadButton: FC<FileUploadButtonProps> = (props) => {
           }
           return (
             <Input
-              inputProps={{ ref: fileRef, accept, 'aria-label': ariaLabel }}
+              inputProps={{ ref: fileRef, accept }}
               value={field.value?.filename}
               onChange={handleOnChange}
               type="file"
diff --git a/packages/design-system/components/web/buttons/FileUploadButton/types.ts b/packages/design-system/components/web/buttons/FileUploadButton/types.ts
index e330d89d..6476254a 100644
--- a/packages/design-system/components/web/buttons/FileUploadButton/types.ts
+++ b/packages/design-system/components/web/buttons/FileUploadButton/types.ts
@@ -21,9 +21,4 @@ type FileInputProps = {
 
 type CustomButtonProps = Exclude<ButtonProps, 'name'>
 
-export type FileUploadButtonProps = CustomButtonProps &
-  ControlProps &
-  AvatarProps &
-  FileInputProps & {
-    'aria-label'?: string
-  }
+export type FileUploadButtonProps = CustomButtonProps & ControlProps & AvatarProps & FileInputProps

From 83f4849f591f020b254d1492b9d5a49496016d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=BAcio=20BJ?= <lb@tsl.com>
Date: Thu, 21 Aug 2025 10:48:27 -0300
Subject: [PATCH 5/5] Remove comment

---
 .../ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
index acdfe07c..394d9e73 100644
--- a/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
+++ b/packages/components/modules/profiles/web/ProfileSettingsComponent/__tests__/ProfileSettings.cy.tsx
@@ -35,8 +35,6 @@ const bannerInput = () =>
 const avatarFallbackImage = () => cy.get('img, [title="Avatar Fallback"]').as('avatarFallbackImage')
 const avatarImage = () => cy.findByAltText('Avatar image').as('avatarImage')
 const bannerImage = () => cy.findByAltText('Home Banner').as('bannerImage')
-// const changeAvatarButton = () =>
-//   cy.findByLabelText(/avatar image/i, { selector: 'button' }).as('changeAvatarButton')
 const changeAvatarButton = () => cy.findByText(/change image/i).as('changeAvatarButton')
 const removeAvatarButton = () =>
   cy.findByRole('button', { name: /remove avatar button/i }).as('removeAvatarButton')