Set the height for the signup input fields and fix web accessibility issues

src/components/Common/ConfirmModal.tsx

@@ -74,21 +74,18 @@ function ConfirmModal(props: ConfirmModalProps): JSX.Element {
                 )}
 
                 {props.mainText ? props.mainText : null}
-
-                <div id="confirmation-code-area">
-                  <FinalField<string>
-                    component={CustomInput}
-                    componentClass="input"
-                    type="text"
-                    label={props.modalFormLabel}
-                    placeholder={props.placeholder}
-                    id={props.id}
-                    name={props.id}
-                    helpBlock={props.helpBlock}
-                    validate={validate}
-                    autoFocus={true}
-                  />
-                </div>
+                <FinalField<string>
+                  component={CustomInput}
+                  componentClass="input"
+                  type="text"
+                  label={props.modalFormLabel}
+                  placeholder={props.placeholder}
+                  id={props.id}
+                  name={props.id}
+                  helpBlock={props.helpBlock}
+                  validate={validate}
+                  autoFocus={true}
+                />
                 {props.resendMarkup ? props.resendMarkup : null}
               </ModalBody>
               <ModalFooter>

src/components/Common/EduIDTextInput.tsx

@@ -32,7 +32,7 @@ export default function TextInput(props: TextInputProps) {
   }
 
   return (
-    <FormGroup id={`${props.input.name}-wrapper`}>
+    <FormGroup id={`${props.input.name}-wrapper`} className="form-wrapper">
       {label && (
         <Label for={props.input.name} aria-label={props.input.name}>
           {label}

src/components/Common/InputWrapper.tsx

@@ -15,7 +15,7 @@ export interface InputWrapperProps extends FieldRenderProps<string> {
  */
 export function InputWrapper(props: InputWrapperProps): JSX.Element {
   return (
-    <FormGroup id={`${props.input.name}-wrapper`}>
+    <FormGroup id={`${props.input.name}-wrapper`} className="form-wrapper">
       <RenderLabelAndHelpText {...props} />
       {props.children}
       <RenderErrorMessage {...props} />

src/components/Common/PersonalDataForm.tsx

@@ -240,28 +240,24 @@ const RenderLockedNames = (props: { labels: NameLabels }) => {
 function RenderEditableNames(props: { readonly labels: NameLabels }) {
   return (
     <article>
-      <fieldset>
-        <Field
-          component={CustomInput}
-          required={true}
-          componentClass="input"
-          type="text"
-          name="given_name"
-          label={props.labels.first}
-          placeholder={props.labels.first}
-        />
-      </fieldset>
-      <fieldset>
-        <Field
-          component={CustomInput}
-          required={true}
-          componentClass="input"
-          type="text"
-          name="surname"
-          label={props.labels.last}
-          placeholder={props.labels.last}
-        />
-      </fieldset>
+      <Field
+        component={CustomInput}
+        required={true}
+        componentClass="input"
+        type="text"
+        name="given_name"
+        label={props.labels.first}
+        placeholder={props.labels.first}
+      />
+      <Field
+        component={CustomInput}
+        required={true}
+        componentClass="input"
+        type="text"
+        name="surname"
+        label={props.labels.last}
+        placeholder={props.labels.last}
+      />
       <p className="help-text">
         <FormattedMessage
           defaultMessage="First and last name will be replaced with your legal name if you verify your eduID with your personal id number."

src/components/Dashboard/AccountId.tsx

@@ -11,16 +11,13 @@ export function AccountId(): JSX.Element {
 
   return (
     <div className="profile-grid-cell figure tight" id="uniqueId-container">
-      <span aria-label={idUserEppn}>
+      <label htmlFor={idUserEppn}>
         <strong>
           <FormattedMessage defaultMessage="Unique ID:" description="Dashboard AccountId" />
-          &nbsp;
         </strong>
-      </span>
-      <div className="display-data">
-        <input readOnly={true} name={eppn} id={idUserEppn} ref={ref} defaultValue={eppn} />
-        <CopyToClipboardButton ref={ref} />
-      </div>
+      </label>
+      <input readOnly={true} name={eppn} id={idUserEppn} ref={ref} defaultValue={eppn} />
+      <CopyToClipboardButton ref={ref} />
     </div>
   );
 }

src/components/Dashboard/Ladok.tsx

@@ -42,8 +42,8 @@ const LadokContainer = (): JSX.Element => {
         />
       </p>
 
-      <fieldset>
-        <form>
+      <form>
+        <fieldset>
           <label className="toggle flex-between" htmlFor="ladok-connection">
             <legend>
               <FormattedMessage defaultMessage={`Link your account to Ladok`} description="Ladok account linking" />
@@ -57,8 +57,8 @@ const LadokContainer = (): JSX.Element => {
             />
             <div className="toggle-switch"></div>
           </label>
-        </form>
-      </fieldset>
+        </fieldset>
+      </form>
       {switchChecked ? <LadokLinkStatus /> : undefined}
       {switchChecked ? <LadokUniversitiesDropdown /> : undefined}
       <p className="help-text">

src/components/Login/UseOtherDevice2.tsx

@@ -106,7 +106,7 @@ function RenderOtherDevice2(props: { data: LoginUseOtherDevice2Response; params:
         )}
         {data.state === "FINISHED" && (
           <FormattedMessage defaultMessage="Request completed." description="Use other device 2" />
-        )}{" "}
+        )}
         <FormattedMessage defaultMessage="You should close this browser window." description="Use other device 2" />
       </p>
     );

src/components/Login/UsernamePw.tsx

@@ -76,10 +76,8 @@ export default function UsernamePw() {
           render={(formProps: FormRenderProps<UsernamePwFormData>) => {
             return (
               <form onSubmit={formProps.handleSubmit}>
-                <fieldset>
-                  <UsernameInputPart />
-                  <PasswordInput name="currentPassword" autoComplete="current-password" />
-                </fieldset>
+                <UsernameInputPart />
+                <PasswordInput name="currentPassword" autoComplete="current-password" />
                 <div className="flex-between">
                   <div className="buttons">
                     <LoginAbortButton />

src/styles/_DashboardMain.scss

@@ -19,6 +19,10 @@
 #uniqueId-container {
   flex-direction: row;
   align-items: baseline;
+
+  button.btn-link {
+    padding: 0.5rem;
+  }
 }
 
 .display-data {

src/styles/_SignupMain.scss

@@ -1,10 +1,6 @@
-#email-wrapper {
-  flex: 1;
-}
-
-#currentPassword-wrapper {
-  margin-top: 2rem !important;
-}
+// #currentPassword-wrapper {
+//   margin-top: 2rem !important;
+// }
 
 h3 {
   &.register-header {

src/styles/_forms.scss

@@ -5,6 +5,10 @@ form {
   display: flex;
   flex-direction: column;
   margin-top: 1.25rem;
+
+  .form-wrapper {
+    height: 5.5rem;
+  }
 }
 
 .input-container {

src/styles/_label.scss

@@ -17,3 +17,7 @@ label,
   border-radius: 10px;
   padding: 16px;
 }
+
+#uniqueId-container label {
+  white-space: nowrap;
+}