From c98e05d549ce45d824c2ccbecad853b29fa14d0b Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Mon, 19 Feb 2024 16:54:56 +0000
Subject: [PATCH] accessibility amends misc

---
 components/account/personaldetails.js  | 368 +++++++++++-----------
 components/elements/index.js           |  33 +-
 components/footer.js                   | 418 +++++++++++++------------
 components/homepage/casesearch.js      | 107 +++----
 components/homepage/dns.js             |   7 +-
 components/search/advancedsearch.js    |   7 +-
 components/search/pagination.js        |  12 +-
 components/search/searchresults.js     |   8 +-
 pages/auth/error.js                    |   6 +-
 pages/auth/signin.js                   |   6 +-
 pages/auth/verify-request.js           |   6 +-
 pages/logout.js                        |  19 +-
 pages/myportal/index.js                |  25 +-
 styles/sass/patterns/_card.scss        |   3 +-
 styles/sass/welshgov/_application.scss |  67 +++-
 15 files changed, 569 insertions(+), 523 deletions(-)

diff --git a/components/account/personaldetails.js b/components/account/personaldetails.js
index 58043e5f..57ff9074 100644
--- a/components/account/personaldetails.js
+++ b/components/account/personaldetails.js
@@ -161,14 +161,11 @@ 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>
@@ -178,8 +175,8 @@ const RenderPickList = ({
                     <select
                         {...input}
                         className="govuk-select "
-                        id={name}
-                        name={name}
+                        id={datafieldname}
+                        name={datafieldname}
                     >
                         <option>Select...</option>
                         {Object.keys(optionsArr).map((key, index) => {
@@ -237,189 +234,188 @@ let PersonalDetails = (props) => {
         setPersonalDetailsComplete(true);
     };
 
-    return <>
-        {props.accountUpdatedComplete == false ? (
-            props.personalDetailsComplete == false ? (
-                <form onSubmit={handleSubmit(onHandleSubmit)}>
-                    <fieldset className="govuk-fieldset">
-                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-                            <h2 className="govuk-fieldset__heading">
-                                {t("account:account-about-you-label")}
-                            </h2>
-                        </legend>
-                        <div className="govuk-form-group ">
-                            <span className="govuk-label ">
-                                {t("account:account-role-label")}:{" "}
-                                {
-                                    props.props.accountDetails
-                                        .accountDetails[
-                                        "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
-                                    ]
+    return (
+        <>
+            {props.accountUpdatedComplete == false ? (
+                props.personalDetailsComplete == false ? (
+                    <form onSubmit={handleSubmit(onHandleSubmit)}>
+                        <fieldset className="govuk-fieldset">
+                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+                                <h2 className="govuk-fieldset__heading">
+                                    {t("account:account-about-you-label")}
+                                </h2>
+                            </legend>
+                            <div className="govuk-form-group ">
+                                <span className="govuk-label ">
+                                    {t("account:account-role-label")}:{" "}
+                                    {
+                                        props.props.accountDetails
+                                            .accountDetails[
+                                            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </span>
+                            </div>
+                            <Field
+                                name="pinswg_preferredlanguage"
+                                component={RenderPickList}
+                                datafieldname={"pinswg_preferredlanguage"}
+                                optionsArr={["English", "Welsh"]}
+                                className="govuk-input govuk-input--width-20 govuk-radios--inline"
+                                validate={[required]}
+                                label={t(
+                                    "account:account-preferred-language-label"
+                                )}
+                                errorMsg="Is required"
+                            />
+
+                            <Field
+                                name="firstname"
+                                id="firstname"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-20"
+                                validate={[required]}
+                                label={t("account:account-first-name-label")}
+                                errorMsg="Is required"
+                            />
+                            <Field
+                                name="lastname"
+                                id="lastname"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-20"
+                                validate={[required]}
+                                label={t("account:account-last-name-label")}
+                                errorMsg="Is required"
+                            />
+                            <Field
+                                name="emailaddress1"
+                                id="emailaddress1"
+                                component={RenderTextfield}
+                                type="email"
+                                className="govuk-input govuk-input--width-20"
+                                validate={[required, email]}
+                                label={t("account:account-email-address-label")}
+                                disabled
+                            />
+                            <Field
+                                name="telephone1"
+                                id="telephone1"
+                                component={RenderTextfield}
+                                type="number"
+                                className="govuk-input govuk-input--width-20"
+                                validate={[required, phoneNumber]}
+                                label={t("account:account-telephone-label")}
+                            />
+                            <Field
+                                name="company"
+                                id="company"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-20"
+                                label={t("account:account-company-group-label")}
+                                errorMsg="Is required"
+                            />
+                        </fieldset>
+                        <fieldset className="govuk-fieldset">
+                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+                                <h2 className="govuk-fieldset__heading">
+                                    {t("account:account-your-address-label")}
+                                </h2>
+                            </legend>
+
+                            <Field
+                                name="address1_line1"
+                                id="address1_line1"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-20"
+                                label={t(
+                                    "account:account-address-line-1-label"
+                                )}
+                                validate={[required]}
+                                errorMsg="Is required"
+                            />
+                            <Field
+                                name="address1_line2"
+                                id="address1_line2"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-20"
+                                label={t(
+                                    "account:account-address-line-2-label"
+                                )}
+                                errorMsg="Is required"
+                            />
+                            <Field
+                                name="address1_city"
+                                id="address1_city"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-10"
+                                label={t("account:account-town-city-label")}
+                                validate={[required]}
+                                errorMsg="Is required"
+                            />
+                            <Field
+                                name="address1_county"
+                                id="address1_county"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-10"
+                                label={t("account:account-county-label")}
+                                validate={[required]}
+                                errorMsg="Is required"
+                            />
+                            <Field
+                                name="address1_postalcode"
+                                id="address1_postalcode"
+                                component={RenderTextfield}
+                                type="text"
+                                className="govuk-input govuk-input--width-5"
+                                label={t("account:account-postcode-label")}
+                                validate={[required]}
+                                errorMsg="Is required"
+                            />
+                        </fieldset>
+                        <div className="govuk-button-group">
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                {t("common:continue-button")}
+                            </button>
+                            <Link
+                                href={
+                                    "/myportal?q=" +
+                                    props.props.accountDetails.loggedinUserId
                                 }
-                            </span>
+                                className="govuk-link"
+                            >
+                                {t("common:cancel-link")}
+                            </Link>
                         </div>
-
-                        <Field
-                            name="pinswg_preferredlanguage"
-                            component={RenderPickList}
-                            datafieldname="pinswg_preferredlanguage"
-                            optionsArr={["English", "Welsh"]}
-                            className="govuk-input govuk-input--width-20 govuk-radios--inline"
-                            validate={[required]}
-                            label={t(
-                                "account:account-preferred-language-label"
-                            )}
-                            errorMsg="Is required"
-                        />
-
-                        <Field
-                            name="firstname"
-                            id="firstname"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-20"
-                            validate={[required]}
-                            label={t("account:account-first-name-label")}
-                            errorMsg="Is required"
-                        />
-                        <Field
-                            name="lastname"
-                            id="lastname"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-20"
-                            validate={[required]}
-                            label={t("account:account-last-name-label")}
-                            errorMsg="Is required"
-                        />
-                        <Field
-                            name="emailaddress1"
-                            id="emailaddress1"
-                            component={RenderTextfield}
-                            type="email"
-                            className="govuk-input govuk-input--width-20"
-                            validate={[required, email]}
-                            label={t("account:account-email-address-label")}
-                            disabled
-                        />
-                        <Field
-                            name="telephone1"
-                            id="telephone1"
-                            component={RenderTextfield}
-                            type="number"
-                            className="govuk-input govuk-input--width-20"
-                            validate={[required, phoneNumber]}
-                            label={t("account:account-telephone-label")}
-                        />
-
-                        <Field
-                            name="company"
-                            id="company"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-20"
-                            label={t("account:account-company-group-label")}
-                            errorMsg="Is required"
-                        />
-                    </fieldset>
-                    <fieldset className="govuk-fieldset">
-                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-                            <h2 className="govuk-fieldset__heading">
-                                {t("account:account-your-address-label")}
-                            </h2>
-                        </legend>
-
-                        <Field
-                            name="address1_line1"
-                            id="address1_line1"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-20"
-                            label={t(
-                                "account:account-address-line-1-label"
-                            )}
-                            validate={[required]}
-                            errorMsg="Is required"
-                        />
-                        <Field
-                            name="address1_line2"
-                            id="address1_line2"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-20"
-                            label={t(
-                                "account:account-address-line-2-label"
-                            )}
-                            errorMsg="Is required"
-                        />
-                        <Field
-                            name="address1_city"
-                            id="address1_city"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-10"
-                            label={t("account:account-town-city-label")}
-                            validate={[required]}
-                            errorMsg="Is required"
-                        />
-                        <Field
-                            name="address1_county"
-                            id="address1_county"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-10"
-                            label={t("account:account-county-label")}
-                            validate={[required]}
-                            errorMsg="Is required"
-                        />
-                        <Field
-                            name="address1_postalcode"
-                            id="address1_postalcode"
-                            component={RenderTextfield}
-                            type="text"
-                            className="govuk-input govuk-input--width-5"
-                            label={t("account:account-postcode-label")}
-                            validate={[required]}
-                            errorMsg="Is required"
-                        />
-                    </fieldset>
-                    <div className="govuk-button-group">
-                        <button
-                            type="submit"
-                            className="govuk-button"
-                            data-module="govuk-button"
-                        >
-                            {t("common:continue-button")}
-                        </button>
-                        <Link
-                            href={
-                                "/myportal?q=" +
-                                props.props.accountDetails.loggedinUserId
+                    </form>
+                ) : (
+                    <>
+                        <BuildCheckPersonalDetails
+                            props={props}
+                            setPersonalDetailsComplete={
+                                setPersonalDetailsComplete
                             }
-                            className="govuk-link">
-
-                            {t("common:cancel-link")}
-
-                        </Link>
-                    </div>
-                </form>
+                            setAccountUpdatedComplete={
+                                setAccountUpdatedComplete
+                            }
+                        />
+                    </>
+                )
             ) : (
-                <>
-                    <BuildCheckPersonalDetails
-                        props={props}
-                        setPersonalDetailsComplete={
-                            setPersonalDetailsComplete
-                        }
-                        setAccountUpdatedComplete={
-                            setAccountUpdatedComplete
-                        }
-                    />
-                </>
-            )
-        ) : (
-            <PersonalDetailsComplete props={props} />
-        )}
-    </>;
+                <PersonalDetailsComplete props={props} />
+            )}
+        </>
+    );
 };
 
 const mapStateToProps = (state) => {
diff --git a/components/elements/index.js b/components/elements/index.js
index 4c05952c..6be54d64 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -251,11 +251,10 @@ export function MultiLinefield(props) {
             {parentField != false ? (
                 showIfHasParentShowValue && (
                     <div>
-                        <h1 className="govuk-label-wrapper">
-                            <label className="govuk-label" htmlFor={props.name}>
-                                {FieldsTranslations(props.label)}
-                            </label>
-                        </h1>
+                        <label className="govuk-label" htmlFor={props.name}>
+                            {FieldsTranslations(props.label)}
+                        </label>
+
                         <div
                             id={props.name + "-hint"}
                             className="govuk-hint govuk-!-font-size-14"
@@ -277,11 +276,9 @@ export function MultiLinefield(props) {
                 )
             ) : (
                 <div className="govuk-form-group">
-                    <h1 className="govuk-label-wrapper">
-                        <label className="govuk-label" htmlFor={props.name}>
-                            {FieldsTranslations(props.label)}
-                        </label>
-                    </h1>
+                    <label className="govuk-label" htmlFor={props.name}>
+                        {FieldsTranslations(props.label)}
+                    </label>
                     <div
                         id={props.name + "-hint"}
                         className="govuk-hint govuk-!-font-size-14"
@@ -390,11 +387,9 @@ export function RichMultiLinefield(props) {
             {parentField != false ? (
                 showIfHasParentShowValue && (
                     <div>
-                        <h1 className="govuk-label-wrapper">
-                            <label className="govuk-label" htmlFor={props.name}>
-                                {FieldsTranslations(props.label)}
-                            </label>
-                        </h1>
+                        <label className="govuk-label" htmlFor={props.name}>
+                            {FieldsTranslations(props.label)}
+                        </label>
                         <div
                             id={props.name + "-hint"}
                             className="govuk-hint govuk-!-font-size-14"
@@ -416,11 +411,9 @@ export function RichMultiLinefield(props) {
                 )
             ) : (
                 <div className="govuk-form-group">
-                    <h1 className="govuk-label-wrapper">
-                        <label className="govuk-label" htmlFor={props.name}>
-                            {FieldsTranslations(props.label)}
-                        </label>
-                    </h1>
+                    <label className="govuk-label" htmlFor={props.name}>
+                        {FieldsTranslations(props.label)}
+                    </label>
                     <div
                         id={props.name + "-hint"}
                         className="govuk-hint govuk-!-font-size-14"
diff --git a/components/footer.js b/components/footer.js
index a3de78f3..df8f2e88 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -13,7 +13,10 @@ export default function Footer(props) {
 
     const linksBlock = Object.keys(linksArr).map((key) => (
         <li className="govuk-footer__inline-list-item" key={key}>
-            <Link href={linksArr[key].path || "/"} className="govuk-footer__link">
+            <Link
+                href={linksArr[key].path || "/"}
+                className="govuk-footer__link"
+            >
                 {linksArr[key].title}
             </Link>
         </li>
@@ -34,214 +37,214 @@ export default function Footer(props) {
         " " +
         t("common:gov-wales-label").toLowerCase();
 
-    return <>
-        <div className="sharebar" id="sharebar">
-            <div className="sharebar__components container-fluid">
-                <div className="main__sharebar">
-                    <div
-                        className={
-                            showShareState
-                                ? "block-share active"
-                                : "block-share"
-                        }
-                    >
-                        <button
-                            id="sharePage"
-                            aria-controls="sharePageLinks"
-                            aria-expanded="true"
-                            onClick={() => {
-                                shareState();
-                            }}
-                        >
-                            {t("common:social-bar-share-link")}
-                        </button>
-                        <ul
+    return (
+        <>
+            <div
+                className="sharebar"
+                id="sharebar"
+                role="complementary"
+                aria-label="Share this page"
+            >
+                <div className="sharebar__components container-fluid">
+                    <div className="main__sharebar">
+                        <div
                             className={
                                 showShareState
                                     ? "block-share active"
                                     : "block-share"
                             }
-                            id="sharePageLinks"
-                            aria-labelledby="sharePage"
                         >
-                            <li>
-                                <a
-                                    href={
-                                        "https://twitter.com/intent/tweet?url=" +
-                                        shareBodyStr
-                                    }
-                                    className="twitter"
-                                >
-                                    <span className="vo_hidden">
-                                        {t(
-                                            "common:social-bar-share-via-link"
-                                        )}{" "}
-                                    </span>
-                                    Twitter
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href={
-                                        "https://www.facebook.com/sharer/sharer.php?u=" +
-                                        shareBodyStr
-                                    }
-                                    className="facebook"
-                                >
-                                    <span className="vo_hidden">
-                                        Share this page via{" "}
-                                    </span>
-                                    Facebook
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    href={
-                                        "mailto:?body=" +
-                                        shareBodyStr +
-                                        "&subject=" +
-                                        shareSubjectStr
-                                    } //</li>https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
-                                    className="email"
-                                >
-                                    <span className="vo_hidden">
-                                        Share this page via{" "}
-                                    </span>
-                                    Email
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                    <div
-                        id="sharebar__backtotop"
-                        className="btn--outlined btn--arrow-up"
-                    >
-                        <a href="#page_wrapper">
-                            {t("common:back-to-top-link")}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <footer className="govuk-footer " role="contentinfo">
-            <div className="govuk-width-container ">
-                <div className="govuk-footer__meta">
-                    <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
-                        <h2 className="govuk-visually-hidden">
-                            Support links
-                        </h2>
-                        <nav
-                            role="navigation"
-                            aria-labelledby="footer_links"
-                        >
-                            <ul className="govuk-footer__inline-list">
-                                <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold govuk-!-margin-right-7">
+                            <button
+                                id="sharePage"
+                                aria-controls="sharePageLinks"
+                                aria-expanded="true"
+                                onClick={() => {
+                                    shareState();
+                                }}
+                            >
+                                {t("common:social-bar-share-link")}
+                            </button>
+                            <ul
+                                className={
+                                    showShareState
+                                        ? "block-share active"
+                                        : "block-share"
+                                }
+                                id="sharePageLinks"
+                                aria-labelledby="sharePage"
+                            >
+                                <li>
                                     <a
-                                        href={t(
-                                            "common:footer-guidance-link"
-                                        )}
-                                        className="nav-link"
+                                        href={
+                                            "https://twitter.com/intent/tweet?url=" +
+                                            shareBodyStr
+                                        }
+                                        className="twitter"
                                     >
-                                        {t(
-                                            "common:footer-guidance-link-label"
-                                        )}
+                                        <span className="vo_hidden">
+                                            {t(
+                                                "common:social-bar-share-via-link"
+                                            )}{" "}
+                                        </span>
+                                        Twitter
                                     </a>
                                 </li>
-                                <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold">
+                                <li>
                                     <a
-                                        href={t(
-                                            "common:footer-contact-us-link"
-                                        )}
-                                        className="govuk-footer__link"
-                                        id="aContactUs"
+                                        href={
+                                            "https://www.facebook.com/sharer/sharer.php?u=" +
+                                            shareBodyStr
+                                        }
+                                        className="facebook"
                                     >
-                                        {t(
-                                            "common:footer-contact-us-link-label"
-                                        )}
+                                        <span className="vo_hidden">
+                                            Share this page via{" "}
+                                        </span>
+                                        Facebook
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href={
+                                            "mailto:?body=" +
+                                            shareBodyStr +
+                                            "&subject=" +
+                                            shareSubjectStr
+                                        } //</li>https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
+                                        className="email"
+                                    >
+                                        <span className="vo_hidden">
+                                            Share this page via{" "}
+                                        </span>
+                                        Email
                                     </a>
                                 </li>
                             </ul>
-                            <ul
-                                className="govuk-footer__inline-list"
-                                id="footer_links"
+                        </div>
+                        <div
+                            id="sharebar__backtotop"
+                            className="btn--outlined btn--arrow-up"
+                        >
+                            <a href="#page_wrapper">
+                                {t("common:back-to-top-link")}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <footer className="govuk-footer " role="contentinfo">
+                <div className="govuk-width-container ">
+                    <div className="govuk-footer__meta">
+                        <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
+                            <h2 className="govuk-visually-hidden">
+                                Support links
+                            </h2>
+                            <nav
+                                role="navigation"
+                                aria-labelledby="footer_links"
                             >
-                                <li className="govuk-footer__inline-list-item">
-                                    <Link
-                                        href={
-                                            router.locale == "cy"
-                                                ? "/hygyrchedd"
-                                                : "/accessibility"
-                                        }
-                                        className="govuk-footer__link"
-                                        id="aAccessibility">
+                                <ul className="govuk-footer__inline-list">
+                                    <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold govuk-!-margin-right-7">
+                                        <a
+                                            href={t(
+                                                "common:footer-guidance-link"
+                                            )}
+                                            className="nav-link"
+                                        >
+                                            {t(
+                                                "common:footer-guidance-link-label"
+                                            )}
+                                        </a>
+                                    </li>
+                                    <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold">
+                                        <a
+                                            href={t(
+                                                "common:footer-contact-us-link"
+                                            )}
+                                            className="govuk-footer__link"
+                                            id="aContactUs"
+                                        >
+                                            {t(
+                                                "common:footer-contact-us-link-label"
+                                            )}
+                                        </a>
+                                    </li>
+                                </ul>
+                                <ul
+                                    className="govuk-footer__inline-list"
+                                    id="footer_links"
+                                >
+                                    <li className="govuk-footer__inline-list-item">
+                                        <Link
+                                            href={
+                                                router.locale == "cy"
+                                                    ? "/hygyrchedd"
+                                                    : "/accessibility"
+                                            }
+                                            className="govuk-footer__link"
+                                            id="aAccessibility"
+                                        >
+                                            {t(
+                                                "common:footer-accessibility-link-label"
+                                            )}
+                                        </Link>
+                                    </li>
 
-                                        {t(
-                                            "common:footer-accessibility-link-label"
-                                        )}
+                                    <li className="govuk-footer__inline-list-item">
+                                        <Link
+                                            href={
+                                                router.locale == "cy"
+                                                    ? "/help/cwcis"
+                                                    : "/help/cookies"
+                                            }
+                                            id="aCookies"
+                                            className="govuk-footer__link"
+                                        >
+                                            {t("common:footer-cookies-link")}
+                                        </Link>
+                                    </li>
+                                    <li className="govuk-footer__inline-list-item">
+                                        <a
+                                            href={t(
+                                                "common:footer-copyright-link"
+                                            )}
+                                            className="govuk-footer__link"
+                                            id="Access"
+                                        >
+                                            {t(
+                                                "common:footer-copyright-link-label"
+                                            )}
+                                        </a>
+                                    </li>
 
-                                    </Link>
-                                </li>
+                                    <li className="govuk-footer__inline-list-item">
+                                        <Link
+                                            href={t(
+                                                "common:footer-privacy-link"
+                                            )}
+                                            id="aPrivacy"
+                                            className="govuk-footer__link"
+                                        >
+                                            {t(
+                                                "common:footer-privacy-link-label"
+                                            )}
+                                        </Link>
+                                    </li>
 
-                                <li className="govuk-footer__inline-list-item">
-                                    <Link
-                                        href={
-                                            router.locale == "cy"
-                                                ? "/help/cwcis"
-                                                : "/help/cookies"
-                                        }
-                                        id="aCookies"
-                                        className="govuk-footer__link">
-
-                                        {t(
-                                            "common:footer-cookies-link"
-                                        )}
-
-                                    </Link>
-                                </li>
-                                <li className="govuk-footer__inline-list-item">
-                                    <a
-                                        href={t(
-                                            "common:footer-copyright-link"
-                                        )}
-                                        className="govuk-footer__link"
-                                        id="Access"
-                                    >
-                                        {t(
-                                            "common:footer-copyright-link-label"
-                                        )}
-                                    </a>
-                                </li>
-
-                                <li className="govuk-footer__inline-list-item">
-                                    <Link
-                                        href={t(
-                                            "common:footer-privacy-link"
-                                        )}
-                                        id="aPrivacy"
-                                        className="govuk-footer__link">
-
-                                        {t(
-                                            "common:footer-privacy-link-label"
-                                        )}
-
-                                    </Link>
-                                </li>
-
-                                <li className="govuk-footer__inline-list-item">
-                                    <Link
-                                        href={t(
-                                            "common:footer-terms-conditions-link"
-                                        )}
-                                        id="aTermsConds"
-                                        className="govuk-footer__link">
-
-                                        {t(
-                                            "common:footer-terms-conditions-link-label"
-                                        )}
-
-                                    </Link>
-                                </li>
-                                {/* <li className="govuk-footer__inline-list-item">
+                                    <li className="govuk-footer__inline-list-item">
+                                        <Link
+                                            href={t(
+                                                "common:footer-terms-conditions-link"
+                                            )}
+                                            id="aTermsConds"
+                                            className="govuk-footer__link"
+                                        >
+                                            {t(
+                                                "common:footer-terms-conditions-link-label"
+                                            )}
+                                        </Link>
+                                    </li>
+                                    {/* <li className="govuk-footer__inline-list-item">
                                     <a
                                         href={t(
                                             "common:footer-alternative-languages-link"
@@ -256,25 +259,26 @@ export default function Footer(props) {
                                         )}
                                     </a>
                                 </li> */}
-                            </ul>
-                        </nav>
-                        <div
-                            className="footer_logo container-fluid"
-                            id="footer_logo"
-                        >
-                            <a
-                                href={t("common:gov-wales-link")}
-                                className="footer__logo"
-                                id="footerlogo"
+                                </ul>
+                            </nav>
+                            <div
+                                className="footer_logo container-fluid"
+                                id="footer_logo"
                             >
-                                <span className="visually-hidden">
-                                    {t("common:gov-wales-label")}
-                                </span>
-                            </a>
+                                <a
+                                    href={t("common:gov-wales-link")}
+                                    className="footer__logo"
+                                    id="footerlogo"
+                                >
+                                    <span className="visually-hidden">
+                                        {t("common:gov-wales-label")}
+                                    </span>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </footer>
-    </>;
+            </footer>
+        </>
+    );
 }
diff --git a/components/homepage/casesearch.js b/components/homepage/casesearch.js
index 56517f78..c3e34250 100644
--- a/components/homepage/casesearch.js
+++ b/components/homepage/casesearch.js
@@ -94,62 +94,63 @@ let CaseSearch = (props) => {
         });
     };
 
-    return <>
-        <div className="card" id="casesearch-card">
-            <form onSubmit={handleSubmit(onHandleSubmit)}>
-                <div className="card-body">
-                    <h3 className="heading-small card-heading">
-                        {t("home:casesearch-card-title")}
-                    </h3>
+    return (
+        <>
+            <div className="card" id="casesearch-card">
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <div className="card-body">
+                        <h2 className="heading-small card-heading">
+                            {t("home:casesearch-card-title")}
+                        </h2>
 
-                    <Field
-                        validate={[
-                            required(
-                                t(
-                                    "home:casesearch-search-validation-required"
-                                )
-                            ),
-                            minLength(
-                                t(
-                                    "home:casesearch-search-validation-minlength"
-                                )
-                            ),
-                        ]}
-                        className="govuk-input"
-                        component={RenderTextfield}
-                        id="basicSearch"
-                        name="basicSearch"
-                        type="text"
-                        aria-describedby="basicSearch-hint"
-                        hint1={t("home:casesearch-card-search-hint")}
-                        hint2={t(
-                            "home:casesearch-card-search-example-label-1"
-                        )}
-                        hint3={t(
-                            "home:casesearch-card-search-example-label-2"
-                        )}
-                    />
+                        <Field
+                            validate={[
+                                required(
+                                    t(
+                                        "home:casesearch-search-validation-required"
+                                    )
+                                ),
+                                minLength(
+                                    t(
+                                        "home:casesearch-search-validation-minlength"
+                                    )
+                                ),
+                            ]}
+                            className="govuk-input"
+                            component={RenderTextfield}
+                            id="basicSearch"
+                            name="basicSearch"
+                            type="text"
+                            aria-describedby="basicSearch-hint"
+                            hint1={t("home:casesearch-card-search-hint")}
+                            hint2={t(
+                                "home:casesearch-card-search-example-label-1"
+                            )}
+                            hint3={t(
+                                "home:casesearch-card-search-example-label-2"
+                            )}
+                        />
 
-                    <div className="govuk-form-group">
-                        <button type="submit" className="govuk-button">
-                            {t("home:casesearch-card-button")}
-                        </button>
+                        <div className="govuk-form-group">
+                            <button type="submit" className="govuk-button">
+                                {t("home:casesearch-card-button")}
+                            </button>
+                        </div>
+                        <Link
+                            href={
+                                router.locale == "cy"
+                                    ? "/chwiliouwch"
+                                    : "/advancedsearch"
+                            }
+                            className="govuk-link--no-underline"
+                        >
+                            {t("home:casesearch-card-advanced-link")}
+                        </Link>
                     </div>
-                    <Link
-                        href={
-                            router.locale == "cy"
-                                ? "/chwiliouwch"
-                                : "/advancedsearch"
-                        }
-                        className="govuk-link--no-underline">
-
-                        {t("home:casesearch-card-advanced-link")}
-
-                    </Link>
-                </div>
-            </form>
-        </div>
-    </>;
+                </form>
+            </div>
+        </>
+    );
 };
 
 const mapStateToProps = (state) => {
diff --git a/components/homepage/dns.js b/components/homepage/dns.js
index 7c7a43e4..b6534b9d 100644
--- a/components/homepage/dns.js
+++ b/components/homepage/dns.js
@@ -16,7 +16,7 @@ export default function Dns() {
     //         : setShowSpinnerState(true);
     // };
     return (
-        <div className="card" id="casesearch-card">
+        <div className="card" id="dns-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("home:dns-card-title")}
@@ -36,10 +36,9 @@ export default function Dns() {
                         // onClick={() => {
                         //     spinnerState();
                         // }}
-                        className="govuk-button withChevron govuk-button-cta">
-
+                        className="govuk-button withChevron govuk-button-cta"
+                    >
                         {t("home:dns-card-button")}
-
                     </Link>
                 </div>
             </div>
diff --git a/components/search/advancedsearch.js b/components/search/advancedsearch.js
index e6eacd30..12fb1ca4 100644
--- a/components/search/advancedsearch.js
+++ b/components/search/advancedsearch.js
@@ -94,10 +94,7 @@ const RenderCaseStatusList = ({
                     {name}
                 </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>
@@ -290,7 +287,7 @@ let AdvancedSearch = (props) => {
                     </label>
                     {touched && error && (
                         <span
-                            id="passport-issued-error"
+                            id={name + "-error"}
                             className="govuk-error-message"
                         >
                             <span className="govuk-visually-hidden">
diff --git a/components/search/pagination.js b/components/search/pagination.js
index 8126e9fe..f627741f 100644
--- a/components/search/pagination.js
+++ b/components/search/pagination.js
@@ -91,7 +91,7 @@ const PaginationControl = (props) => {
                     <div className="govuk-grid-row paginationWrapper">
                         <div className="govuk-grid-column-one-quarter paginationPrevious">
                             {props.currentView.currentPage != 1 ? (
-                                <span
+                                <button
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                     onClick={() => {
                                         spinnerState(),
@@ -108,7 +108,7 @@ const PaginationControl = (props) => {
                                     }}
                                 >
                                     {t("common:previous-link-button")}
-                                </span>
+                                </button>
                             ) : (
                                 <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
                                     {t("common:previous-link-button")}
@@ -132,7 +132,7 @@ const PaginationControl = (props) => {
                                         {e}
                                     </span>
                                 ) : (
-                                    <span
+                                    <button
                                         className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                         key={i}
                                         onClick={() => {
@@ -146,13 +146,13 @@ const PaginationControl = (props) => {
                                         }}
                                     >
                                         {e}
-                                    </span>
+                                    </button>
                                 )
                             )}
                         </div>
                         <div className="govuk-grid-column-one-quarter paginationNext">
                             {props.currentView.currentPage < pagesCount ? (
-                                <span
+                                <button
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                     onClick={() => {
                                         spinnerState(),
@@ -169,7 +169,7 @@ const PaginationControl = (props) => {
                                     }}
                                 >
                                     {t("common:next-link-button")}
-                                </span>
+                                </button>
                             ) : (
                                 <span className="govuk-body rightTextButton govuk-!-font-weight-bold">
                                     {" "}
diff --git a/components/search/searchresults.js b/components/search/searchresults.js
index 92afa10f..14dc51f9 100644
--- a/components/search/searchresults.js
+++ b/components/search/searchresults.js
@@ -497,7 +497,7 @@ const SearchResults = (props) => {
                                                 .length >
                                                 0 ==
                                             true ? (
-                                                <span
+                                                <button
                                                     className="govuk-summary-list__actionLink watched_link"
                                                     onClick={() => {
                                                         confirm(
@@ -521,9 +521,9 @@ const SearchResults = (props) => {
                                                     )}
                                                 >
                                                     <span className="eye"></span>
-                                                </span>
+                                                </button>
                                             ) : (
-                                                <span
+                                                <button
                                                     className="govuk-summary-list__actionLink watchLink"
                                                     onClick={() => {
                                                         confirm(
@@ -546,7 +546,7 @@ const SearchResults = (props) => {
                                                     )}
                                                 >
                                                     <span className="eye"></span>
-                                                </span>
+                                                </button>
                                             )}
                                         </dd>
                                     )}
diff --git a/pages/auth/error.js b/pages/auth/error.js
index cdcbc568..fe998efa 100644
--- a/pages/auth/error.js
+++ b/pages/auth/error.js
@@ -45,7 +45,11 @@ const Error = (props) => {
                 <div className="govuk-width-container govuk-!-padding-bottom-9">
                     <Breadcrumbs />
 
-                    <main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
+                    <main
+                        className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
+                        id="main-content"
+                        role="main"
+                    >
                         <div className="govuk-grid-row ">
                             <div className="govuk-grid-column-two-thirds ">
                                 <h1>{t("auth:auth-error-heading")}</h1>
diff --git a/pages/auth/signin.js b/pages/auth/signin.js
index 9b6a6fba..13ef525b 100644
--- a/pages/auth/signin.js
+++ b/pages/auth/signin.js
@@ -33,7 +33,11 @@ const SignIn = (props) => {
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container govuk-!-padding-bottom-9">
                     <Breadcrumbs />
-                    <main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
+                    <main
+                        className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
+                        id="main-content"
+                        role="main"
+                    >
                         <div className="govuk-grid-row ">
                             <div className="govuk-grid-column-two-thirds ">
                                 <h1>{t("auth:auth-page-title")} </h1>
diff --git a/pages/auth/verify-request.js b/pages/auth/verify-request.js
index 93ffbd68..73f2328f 100644
--- a/pages/auth/verify-request.js
+++ b/pages/auth/verify-request.js
@@ -26,7 +26,11 @@ const SignIn = (props) => {
                 <div className="govuk-width-container govuk-!-padding-bottom-9">
                     <Breadcrumbs />
 
-                    <main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9">
+                    <main
+                        className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
+                        id="main-content"
+                        role="main"
+                    >
                         <div className="govuk-grid-row ">
                             <div className="govuk-grid-column-two-thirds ">
                                 <h1>{t("auth:auth-check-email-page-title")}</h1>
diff --git a/pages/logout.js b/pages/logout.js
index b1ecb71a..edc2f773 100644
--- a/pages/logout.js
+++ b/pages/logout.js
@@ -88,14 +88,19 @@ const LogOut = (props) => {
             <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName="Appeals Casework Portal" />
-                <div className="govuk-width-container">
-                    <h2>{t("common:logged-out-title")}</h2>
-                    <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
-                        <Link href={locale == "cy" ? "/cy" : "/"} legacyBehavior>
-                            {t("common:logged-out-link")}
-                        </Link>
+                <main>
+                    <div className="govuk-width-container">
+                        <h1>{t("common:logged-out-title")}</h1>
+                        <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
+                            <Link
+                                href={locale == "cy" ? "/cy" : "/"}
+                                legacyBehavior
+                            >
+                                {t("common:logged-out-link")}
+                            </Link>
+                        </div>
                     </div>
-                </div>
+                </main>
                 <Footer footerLinks={footerLinks} />
             </div>
         </div>
diff --git a/pages/myportal/index.js b/pages/myportal/index.js
index d506a0b4..3ee09214 100644
--- a/pages/myportal/index.js
+++ b/pages/myportal/index.js
@@ -264,12 +264,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
             const [
                 myCasesDetails,
                 watchedCasesDetails,
-                awaitingSubmissionDetails,
+                //awaitingSubmissionDetails,
                 myRepresentationsDetails,
             ] = await Promise.all([
                 await getDetails(myCases, "myCases"),
                 await getDetails(watchedCases, "myWatchedCases"),
-                await getDetails(awaitingSubmission, "awaitingSubmission"),
+                //await getDetails(awaitingSubmission, "awaitingSubmission"),
                 await getDetails(myRepresentations, "myRepresentations"),
             ]);
 
@@ -386,25 +386,7 @@ const getDetails = (resultsObj, detailsType) => {
 
         //console.log(detailsType, " case id : ", caseID);
 
-        if (searchDetail.pinswg_appealcasetype == null) {
-            // console.log(
-            //     "detailsObj:",
-            //     detailsType,
-            //     detailsType == "myCases" && searchDetail.pinswg_title,
-            //     detailsType == "myWatchedCases" &&
-            //         searchDetail[
-            //             "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
-            //         ],
-            //     detailsType == "awaitingSubmission" &&
-            //         searchDetail.ticketnumber,
-            //     detailsType == "myRepresentations" && searchDetail.casereference
-            // );
-            console.log(
-                "=====================================\n",
-                detailsType + "\n",
-                "=====================================\n"
-            );
-        } else {
+        searchDetail.pinswg_appealcasetype != null &&
             detailsArr.push(
                 getPortalModuleDetails(
                     getFormCollectionByID(searchDetail.pinswg_appealcasetype)
@@ -417,7 +399,6 @@ const getDetails = (resultsObj, detailsType) => {
                     //       ]
                 )
             );
-        }
     });
 
     let detArr = Promise.all(detailsArr);
diff --git a/styles/sass/patterns/_card.scss b/styles/sass/patterns/_card.scss
index 814ec9ef..e8a0cf41 100644
--- a/styles/sass/patterns/_card.scss
+++ b/styles/sass/patterns/_card.scss
@@ -81,6 +81,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
 
     .card-heading {
         margin-top: 0;
+        font-size: 1.17rem;
     }
 
     .card-body {
@@ -266,7 +267,7 @@ div.cardModuleItem:last-of-type {
             margin-right: 10px;
         }
 
-        a {}
+
     }
 
     .cardModuleRemoveCase {
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 981781cf..5c256212 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -200,6 +200,19 @@ a.longLinkBreak {
                 letter-spacing: 1px;
                 padding: 5px 8px 4px;
             }
+
+            .govuk-phase-banner__content {
+                line-height: 1.5;
+            }
+
+            .govuk-tag.govuk-phase-banner__content__tag {
+                line-height: 1.5;
+            }
+
+            .govuk-phase-banner__text {
+                line-height: 1.5;
+            }
+
         }
     }
 }
@@ -1140,8 +1153,10 @@ textarea,
         }
 
         &:focus {
-            border: none;
+            // border: none;
+            // box-shadow: none;
             box-shadow: none;
+            border: #ffd530 solid 3px
         }
     }
 }
@@ -1903,10 +1918,22 @@ ul#sharePageLinks.active {
 
             &.activePaginationItem {
                 color: #b80d0d;
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
+
                 // &:before {
                 //     content: "";
                 //     background-image: url(/assets/images/arrow-left--active.svg);
                 // }
+                &:focus {
+                    background-color: #ffd530 !important;
+                    border-color: transparent !important;
+                    color: #1f1f1f !important;
+                    outline: 2px solid #1f1f1f;
+                    text-decoration: none !important;
+                    box-shadow: none;
+                }
             }
 
             @media screen and (max-width: 768px) {
@@ -1942,6 +1969,19 @@ ul#sharePageLinks.active {
 
         .activePaginationItem {
             color: #b80d0d;
+            border: none;
+            background: none;
+            cursor: pointer;
+
+
+            &:focus {
+                background-color: #ffd530 !important;
+                border-color: transparent !important;
+                color: #1f1f1f !important;
+                outline: 2px solid #1f1f1f;
+                text-decoration: none !important;
+                box-shadow: none;
+            }
         }
 
         @media screen and (max-width: 768px) {
@@ -1966,11 +2006,23 @@ ul#sharePageLinks.active {
 
             &.activePaginationItem {
                 color: #b80d0d;
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
 
                 &:after {
                     content: "";
                     background-image: url(/assets/images/arrow-right--active.svg);
                 }
+
+                &:focus {
+                    background-color: #ffd530 !important;
+                    border-color: transparent !important;
+                    color: #1f1f1f !important;
+                    outline: 2px solid #1f1f1f;
+                    text-decoration: none !important;
+                    box-shadow: none;
+                }
             }
 
             @media screen and (max-width: 768px) {
@@ -2047,13 +2099,18 @@ ul#sharePageLinks.active {
         color: #0b0c0c;
         background-color: #ffdd00;
         -webkit-box-shadow: 0 2px 0 #0b0c0c;
-        box-shadow: 0 2px 0 #0b0c0c;
+        box-shadow: 0 0px 0 #0b0c0c;
+
+        & .eye:before {
+            background-color: #ffdd00;
+            border: solid 1px #ffdd00;
+        }
     }
 
     &.watched_link {
         color: $black !important;
         background-color: $white;
-        width: 13px;
+        width: 24px;
         display: block;
 
         .eye {
@@ -2068,7 +2125,7 @@ ul#sharePageLinks.active {
 
 
     &.watchLink {
-        width: 13px;
+        width: 24px;
         display: block;
     }
 
@@ -2081,7 +2138,7 @@ ul#sharePageLinks.active {
         position: relative;
         transform: rotate(45deg);
         display: block;
-        top: 3.5px;
+        top: 0.5px;
         background-color: white;
     }