accessibility amends for reps

components/case/representation/representationElements.js

@@ -491,14 +491,11 @@ export const RenderPickList = ({
                         : "govuk-form-group "
                 }
             >
-                <label className="govuk-label" htmlFor="sort">
+                <label className="govuk-label" htmlFor={datafieldname}>
                     {label}
                 </label>
                 {touched && error && (
-                    <span
-                        id="passport-issued-error"
-                        className="govuk-error-message"
-                    >
+                    <span id={name + "-error"} className="govuk-error-message">
                         <span className="govuk-visually-hidden">Error:</span>{" "}
                         {errorMsg}
                     </span>
@@ -508,8 +505,8 @@ export const RenderPickList = ({
                     <select
                         {...input}
                         className="govuk-select "
-                        id={name}
-                        name={name}
+                        id={datafieldname}
+                        name={datafieldname}
                     >
                         <option>Select...</option>
                         {Object.keys(optionsArr).map((key, index) => {
@@ -793,11 +790,9 @@ export function MultiLinefield(props) {
 
     return (
         <div className="govuk-form-group">
-            <h1 className="govuk-label-wrapper">
-                <label className="govuk-label" htmlFor={props.name}>
-                    {props.label}
-                </label>
-            </h1>
+            <label className="govuk-label" htmlFor={props.name}>
+                {props.label}
+            </label>
             <div
                 id={props.name + "-hint"}
                 className="govuk-hint govuk-!-font-size-14"