robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibility amends misc

Browse Source
This commit is contained in:
robbond
2024-02-19 16:54:56 +00:00
parent cf04ceba50
commit c98e05d549
15 changed files with 569 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/account/personaldetails.js
+11 -15
View File
@@ -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,7 +234,8 @@ let PersonalDetails = (props) => {
setPersonalDetailsComplete(true);
};
return <>
return (
<>
{props.accountUpdatedComplete == false ? (
props.personalDetailsComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}>
@@ -258,11 +256,10 @@ let PersonalDetails = (props) => {
}
</span>
</div>
<Field
name="pinswg_preferredlanguage"
component={RenderPickList}
datafieldname="pinswg_preferredlanguage"
datafieldname={"pinswg_preferredlanguage"}
optionsArr={["English", "Welsh"]}
className="govuk-input govuk-input--width-20 govuk-radios--inline"
validate={[required]}
@@ -311,7 +308,6 @@ let PersonalDetails = (props) => {
validate={[required, phoneNumber]}
label={t("account:account-telephone-label")}
/>
<Field
name="company"
id="company"
@@ -396,10 +392,9 @@ let PersonalDetails = (props) => {
"/myportal?q=" +
props.props.accountDetails.loggedinUserId
}
className="govuk-link">
className="govuk-link"
>
{t("common:cancel-link")}
</Link>
</div>
</form>
@@ -419,7 +414,8 @@ let PersonalDetails = (props) => {
) : (
<PersonalDetailsComplete props={props} />
)}
</>;
</>
);
};
const mapStateToProps = (state) => {
components/elements/index.js
+1 -8
View File
@@ -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>
<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>
<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>
<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>
<div
id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14"
components/footer.js
+23 -19
View File
@@ -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,8 +37,14 @@ export default function Footer(props) {
" " +
t("common:gov-wales-label").toLowerCase();
return <>
<div className="sharebar" id="sharebar">
return (
<>
<div
className="sharebar"
id="sharebar"
role="complementary"
aria-label="Share this page"
>
<div className="sharebar__components container-fluid">
<div className="main__sharebar">
<div
@@ -173,12 +182,11 @@ export default function Footer(props) {
: "/accessibility"
}
className="govuk-footer__link"
id="aAccessibility">
id="aAccessibility"
>
{t(
"common:footer-accessibility-link-label"
)}
</Link>
</li>
@@ -190,12 +198,9 @@ export default function Footer(props) {
: "/help/cookies"
}
id="aCookies"
className="govuk-footer__link">
{t(
"common:footer-cookies-link"
)}
className="govuk-footer__link"
>
{t("common:footer-cookies-link")}
</Link>
</li>
<li className="govuk-footer__inline-list-item">
@@ -218,12 +223,11 @@ export default function Footer(props) {
"common:footer-privacy-link"
)}
id="aPrivacy"
className="govuk-footer__link">
className="govuk-footer__link"
>
{t(
"common:footer-privacy-link-label"
)}
</Link>
</li>
@@ -233,12 +237,11 @@ export default function Footer(props) {
"common:footer-terms-conditions-link"
)}
id="aTermsConds"
className="govuk-footer__link">
className="govuk-footer__link"
>
{t(
"common:footer-terms-conditions-link-label"
)}
</Link>
</li>
{/* <li className="govuk-footer__inline-list-item">
@@ -276,5 +279,6 @@ export default function Footer(props) {
</div>
</div>
</footer>
</>;
</>
);
}
components/homepage/casesearch.js
+8 -7
View File
@@ -94,13 +94,14 @@ let CaseSearch = (props) => {
});
};
return <>
return (
<>
<div className="card" id="casesearch-card">
<form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="card-body">
<h3 className="heading-small card-heading">
<h2 className="heading-small card-heading">
{t("home:casesearch-card-title")}
</h3>
</h2>
<Field
validate={[
@@ -141,15 +142,15 @@ let CaseSearch = (props) => {
? "/chwiliouwch"
: "/advancedsearch"
}
className="govuk-link--no-underline">
className="govuk-link--no-underline"
>
{t("home:casesearch-card-advanced-link")}
</Link>
</div>
</form>
</div>
</>;
</>
);
};
const mapStateToProps = (state) => {
components/homepage/dns.js
+3 -4
View File
@@ -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>
components/search/advancedsearch.js
+2 -5
View File
@@ -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">
components/search/pagination.js
+6 -6
View File
@@ -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">
{" "}
components/search/searchresults.js
+4 -4
View File
@@ -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>
)}
pages/auth/error.js
+5 -1
View File
@@ -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>
pages/auth/signin.js
+5 -1
View File
@@ -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>
pages/auth/verify-request.js
+5 -1
View File
@@ -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>
pages/logout.js
+7 -2
View File
@@ -88,14 +88,19 @@ const LogOut = (props) => {
<div id="page_wrapper">
<CookieBanner />
<Header courseName="Appeals Casework Portal" />
<main>
<div className="govuk-width-container">
<h2>{t("common:logged-out-title")}</h2>
<h1>{t("common:logged-out-title")}</h1>
<div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
<Link href={locale == "cy" ? "/cy" : "/"} legacyBehavior>
<Link
href={locale == "cy" ? "/cy" : "/"}
legacyBehavior
>
{t("common:logged-out-link")}
</Link>
</div>
</div>
</main>
<Footer footerLinks={footerLinks} />
</div>
</div>
pages/myportal/index.js
+3 -22
View File
@@ -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);
styles/sass/patterns/_card.scss
+2 -1
View File
@@ -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 {
styles/sass/welshgov/_application.scss
+62 -5
View File
@@ -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;
}