Replacing placeholders with labels for institution Role and department (#29425)

* removing placeholders and adding labels

* adding a test

* adding a test back

* deleting comment

* Target the label of department and role

---------

Co-authored-by: Rebeka <o.dekany@gmail.com>
GitOrigin-RevId: 890c2f836a17c360a577bd71280805e3e5408dd6

services/web/frontend/js/features/settings/components/emails/add-email.tsx

@@ -155,9 +155,7 @@ function AddEmail() {
 
   const InputComponent = (
     <>
-      <label htmlFor="affiliations-email" className="visually-hidden">
-        {t('email')}
-      </label>
+      <label htmlFor="affiliations-email">{t('email')}</label>
       <Input
         onChange={handleEmailChange}
         handleAddNewEmail={handleAddNewEmail}

services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx

@@ -50,9 +50,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
     <div className={classnames('dropdown', 'd-block')}>
       <div>
         {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-        <label {...getLabelProps()} className="visually-hidden">
-          {t('country')}
-        </label>
+        <label {...getLabelProps()}>{t('country')}</label>
         <OLFormControl
           {...getInputProps({
             onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -61,7 +59,6 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
             ref: inputRef,
           })}
           append={<i className="caret" aria-hidden />}
-          placeholder={t('country')}
         />
       </div>
       <ul

services/web/frontend/js/features/settings/components/emails/add-email/input.tsx

@@ -186,7 +186,6 @@ function Input({ onChange, handleAddNewEmail }: InputProps) {
         onChange={handleEmailChange}
         onKeyDown={handleKeyDownEvent}
         value={inputValue || ''}
-        placeholder="e.g. johndoe@mit.edu"
         ref={inputRef}
       />
     </div>

services/web/frontend/js/features/settings/components/emails/add-email/institution-fields.tsx

@@ -168,8 +168,8 @@ function InstitutionFields({
             <DownshiftInput
               items={getUniversityItems()}
               inputValue={universityName}
-              placeholder={t('university')}
               label={t('university')}
+              showLabel
               setValue={setUniversityName}
               disabled={!countryCode}
             />
@@ -182,18 +182,18 @@ function InstitutionFields({
             <DownshiftInput
               items={[...defaultRoles]}
               inputValue={role}
-              placeholder={t('role')}
               label={t('role')}
               setValue={setRole}
+              showLabel
             />
           </OLFormGroup>
           <OLFormGroup className="mb-0">
             <DownshiftInput
               items={departments}
               inputValue={department}
-              placeholder={t('department')}
               label={t('department')}
               setValue={setDepartment}
+              showLabel
             />
           </OLFormGroup>
         </>

services/web/frontend/js/features/settings/components/emails/institution-and-role.tsx

@@ -125,8 +125,8 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
               <DownshiftInput
                 items={[...defaultRoles]}
                 inputValue={role}
-                placeholder={t('role')}
                 label={t('role')}
+                showLabel
                 setValue={setRole}
                 ref={roleRef}
               />
@@ -135,8 +135,8 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
               <DownshiftInput
                 items={departments}
                 inputValue={department}
-                placeholder={t('department')}
                 label={t('department')}
+                showLabel
                 setValue={setDepartment}
               />
             </OLFormGroup>

services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx

@@ -23,9 +23,9 @@ describe('<AddEmailInput/>', function () {
   })
 
   describe('on initial render', function () {
-    it('should render an input with a placeholder', function () {
+    it('should render an initial input', function () {
       render(<Input {...defaultProps} />)
-      screen.getByPlaceholderText('e.g. johndoe@mit.edu')
+      screen.getByTestId('affiliations-email')
     })
 
     it('should not dispatch any `change` event', function () {

services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx

@@ -173,14 +173,14 @@ describe('user role and institution', function () {
     const roleValue = 'Dummy role'
     const departmentValue = 'Dummy department'
 
-    const roleInput = screen.getByPlaceholderText(/role/i)
+    const roleInput = screen.getByRole('combobox', { name: 'Role' })
     fireEvent.change(roleInput, {
       target: { value: roleValue },
     })
 
     expect(submitBtn.disabled).to.be.true
 
-    const departmentInput = screen.getByPlaceholderText(/department/i)
+    const departmentInput = screen.getByRole('combobox', { name: 'Department' })
     fireEvent.change(departmentInput, {
       target: { value: departmentValue },
     })