Merge pull request #93 from virtualidentityag/feat/DIAKONIE-215-regis…

…tration-a11y

Feat/diakonie 215 registration a11y

src/extensions/components/legalPageWrapper/legalPageWrapper.styles.scss

@@ -6,6 +6,7 @@
 	}
 
 	.template {
+		width: 100%;
 		max-width: 700px;
 
 		h2,

src/extensions/components/registration/Registration.tsx

@@ -356,6 +356,11 @@ export const Registration = () => {
 												disabled={disabledNextButton}
 												variant="contained"
 												onClick={onRegisterClick}
+												type={
+													disabledNextButton
+														? 'button'
+														: 'submit'
+												}
 											>
 												{t('registration.register')}
 											</Button>
@@ -366,6 +371,11 @@ export const Registration = () => {
 												variant="contained"
 												onClick={onNextClick}
 												sx={{ width: 'unset' }}
+												type={
+													disabledNextButton
+														? 'button'
+														: 'submit'
+												}
 											>
 												{t('registration.next')}
 											</Button>

src/extensions/components/registration/accountData/AccountData.tsx

@@ -200,6 +200,7 @@ export const AccountData: VFC<{
 				}
 				onInputChange={setRepeatPassword}
 				value={repeatPassword}
+				info="&nbsp;"
 				label={t('registration.account.repeatPassword.label')}
 				isValueValid={async (val) =>
 					val === password && password.length > 0
@@ -209,7 +210,7 @@ export const AccountData: VFC<{
 					'registration.account.repeatPassword.success'
 				)}
 			/>
-			<FormGroup sx={{ mt: '40px' }}>
+			<FormGroup sx={{ mt: '20px' }}>
 				<FormControlLabel
 					onClick={() => {
 						setDataProtectionChecked(!dataProtectionChecked);

src/extensions/components/registration/agencySelection/AgencySelectionResults.tsx

@@ -50,11 +50,14 @@ export const AgencySelectionResults = ({
 	const { setDisabledNextButton, registrationData } =
 		useContext(RegistrationContext);
 	const { consultant: preselectedConsultant } = useContext(UrlParamsContext);
-
 	const [selectedAgency, setSelectedAgency] = useState<AgencyDataInterface>(
 		registrationData?.agency
 	);
 
+	const onlyExternalAgencies = results?.every((agency) => agency.external);
+	const isSingleResultAndNotOnlyExternal =
+		results?.length === 1 && !onlyExternalAgencies;
+
 	useEffect(() => {
 		if (
 			// only external agencies
@@ -100,8 +103,6 @@ export const AgencySelectionResults = ({
 		}
 	}, [selectedAgency, results, onChange, setDisabledNextButton, zipcode]);
 
-	const onlyExternalAgencies = results?.every((agency) => agency.external);
-
 	return (
 		<>
 			{!!results && !preselectedConsultant && (
@@ -213,7 +214,7 @@ export const AgencySelectionResults = ({
 			)}
 
 			{/* one Result */}
-			{results?.length === 1 && !onlyExternalAgencies && (
+			{isSingleResultAndNotOnlyExternal && (
 				<FormControl sx={{ width: '100%' }}>
 					<RadioGroup
 						data-cy="agency-selection-radio-group"

src/extensions/components/registration/topicSelection/TopicSelection.tsx

@@ -367,6 +367,7 @@ const TopicSelect = ({
 				value={topic?.id}
 				control={
 					<Radio
+						tabIndex={0}
 						onClick={onChange}
 						checked={checked}
 						checkedIcon={

src/extensions/components/registration/zipcodeInput/ZipcodeInput.tsx

@@ -25,7 +25,11 @@ export const ZipcodeInput: VFC<{
 	useEffect(() => {
 		if (REGISTRATION_DATA_VALIDATION.zipcode.validation(value)) {
 			setDisabledNextButton(false);
-			onChange({ zipcode: value });
+			onChange({
+				zipcode: value,
+				agencyId: undefined,
+				agency: undefined
+			});
 		} else {
 			setDisabledNextButton(true);
 		}