Make content more navigable and accessible

astro.config.mjs

@@ -10,7 +10,8 @@ export default defineConfig({
     adapter: node({
         mode: 'standalone',
     }),
-    integrations: [preact(), global()],
+    // eslint-disable-next-line no-undef
+    integrations: [preact({ devtools: process.env.NODE_ENV === 'development' }), global()],
     i18n: {
         defaultLocale: 'en',
         locales: ['en'],

src/components/ComplaintLandingPage/AskAuthority.astro

@@ -4,31 +4,28 @@ import Base from '../../layouts/base.astro';
 import { absUrl } from '../../lib/util';
 import TextRaw from '../TextRaw.astro';
 import { dpas } from '../../lib/dpas';
+import RadioForm from '../RadioForm.astro';
 
 interface Props {
     token: string;
+    complaintAuthority: string | null;
 }
 
-const { token } = Astro.props;
+const { token, complaintAuthority } = Astro.props;
 ---
 
 <Base title={t('complaint-landing-askAuthority', 'heading')}>
     <p>
         <TextRaw scope="complaint-landing-askAuthority" id="question" />
     </p>
 
-    <div class="col66 col100-mobile">
-        <div class="radio-group radio-group-vertical radio-group-padded">
-            {
-                Object.values(dpas).map((d) => (
-                    <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/askAuthority`)}>
-                        <input type="hidden" name="answer" value={d.slug} />
-                        <button type="submit" class="radio-label">
-                            {d.name}
-                        </button>
-                    </form>
-                ))
-            }
-        </div>
-    </div>
+    <RadioForm
+        actionUrl={absUrl(`/p/${token}/complain/askAuthority/answer`)}
+        options={Object.keys(dpas).reduce((agg: Record<string, string>, key: string) => {
+            agg[key] = dpas[key]!.name;
+            return agg;
+        }, {})}
+        value={complaintAuthority}
+        idPrefix="askAuthority"
+    />
 </Base>

src/components/ComplaintLandingPage/AskComplaintType.astro

@@ -3,12 +3,14 @@ import { t } from '../../i18n/server';
 import Base from '../../layouts/base.astro';
 import { absUrl } from '../../lib/util';
 import TextRaw from '../TextRaw.astro';
+import RadioForm from '../RadioForm.astro';
 
 interface Props {
     token: string;
+    complaintType: string | null | undefined;
 }
 
-const { token } = Astro.props;
+const { token, complaintType } = Astro.props;
 ---
 
 <Base title={t('complaint-landing-askComplaintType', 'heading')}>
@@ -21,18 +23,16 @@ const { token } = Astro.props;
         <li>{t('complaint-landing-askComplaintType', 'informal-complaint-explanation')}</li>
     </ol>
 
-    <div class="col66 col100-mobile">
-        <div class="radio-group radio-group-vertical radio-group-padded">
-            {
-                (['formal', 'informal'] as const).map((type) => (
-                    <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/askComplaintType`)}>
-                        <input type="hidden" name="answer" value={type} />
-                        <button type="submit" class="radio-label">
-                            {t('complaint-landing-askComplaintType', `${type}-complaint-button`)}
-                        </button>
-                    </form>
-                ))
-            }
-        </div>
-    </div>
+    <RadioForm
+        actionUrl={absUrl(`/p/${token}/complain/askComplaintType/answer`)}
+        options={(['formal', 'informal'] as const).reduce(
+            (agg, type) =>
+                Object.assign(agg, {
+                    [type]: t('complaint-landing-askComplaintType', `${type}-complaint-button`),
+                }),
+            {},
+        )}
+        value={complaintType}
+        idPrefix="askComplaintType"
+    />
 </Base>

src/components/ComplaintLandingPage/AskDeveloperAddress.astro

@@ -29,7 +29,7 @@ const { token, developerName, privacyPolicyUrl } = Astro.props;
     </p>
 
     <div class="col66 col100-mobile">
-        <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/askDeveloperAddress`)}>
+        <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/askDeveloperAddress/answer`)}>
             <div class="form-group">
                 <label for="developerAddress">{t('complaint-landing-askDeveloperAddress', 'address')}</label><br />
                 <textarea

src/components/ComplaintLandingPage/AskDeviceHasRegisteredSimCard.astro

@@ -3,34 +3,31 @@ import { t } from '../../i18n/server';
 import Base from '../../layouts/base.astro';
 import { absUrl } from '../../lib/util';
 import TextRaw from '../TextRaw.astro';
+import RadioForm from '../RadioForm.astro';
 
 interface Props {
     token: string;
+    deviceHasRegisteredSimCard: boolean | null;
 }
 
-const { token } = Astro.props;
+const { token, deviceHasRegisteredSimCard } = Astro.props;
 ---
 
 <Base title={t('complaint-landing-askDeviceHasRegisteredSimCard', 'heading')}>
     <p>
         <TextRaw scope="complaint-landing-askDeviceHasRegisteredSimCard" id="explanation" />
     </p>
 
-    <div class="col66 col100-mobile">
-        <div class="radio-group radio-group-vertical radio-group-padded">
-            {
-                (['yes', 'no'] as const).map((p) => (
-                    <form
-                        class="radio-wrapper"
-                        method="POST"
-                        action={absUrl(`/p/${token}/complain/askDeviceHasRegisteredSimCard`)}>
-                        <input type="hidden" name="answer" value={p} />
-                        <button type="submit" class="radio-label">
-                            {t('complaint-landing-askDeviceHasRegisteredSimCard', p)}
-                        </button>
-                    </form>
-                ))
-            }
-        </div>
-    </div>
+    <RadioForm
+        actionUrl={absUrl(`/p/${token}/complain/askDeviceHasRegisteredSimCard/answer`)}
+        options={(['yes', 'no'] as const).reduce(
+            (agg, p) =>
+                Object.assign(agg, {
+                    [p]: t('common', p),
+                }),
+            {},
+        )}
+        value={deviceHasRegisteredSimCard === null ? null : deviceHasRegisteredSimCard ? 'yes' : 'no'}
+        idPrefix="askDeviceHasRegisteredSimCard"
+    />
 </Base>

src/components/ComplaintLandingPage/AskIsUserOfApp.astro

@@ -3,31 +3,33 @@ import { t } from '../../i18n/server';
 import Base from '../../layouts/base.astro';
 import { absUrl } from '../../lib/util';
 import TextRaw from '../TextRaw.astro';
+import RadioForm from '../RadioForm.astro';
 
 interface Props {
     token: string;
+    complainantIsUserOfApp: boolean | null;
 }
 
-const { token } = Astro.props;
+const { token, complainantIsUserOfApp } = Astro.props;
+const isChecked = (p: string) =>
+    (complainantIsUserOfApp === true && p === 'yes') || (complainantIsUserOfApp === false && p === 'no');
 ---
 
 <Base title={t('complaint-landing-askIsUserOfApp', 'heading')}>
     <p>
         <TextRaw scope="complaint-landing-askIsUserOfApp" id="question" />
     </p>
 
-    <div class="col66 col100-mobile">
-        <div class="radio-group radio-group-vertical radio-group-padded">
-            {
-                (['yes', 'no'] as const).map((p) => (
-                    <form class="radio-wrapper" method="POST" action={absUrl(`/p/${token}/complain/askIsUserOfApp`)}>
-                        <input type="hidden" name="answer" value={p} />
-                        <button type="submit" class="radio-label">
-                            {t('common', p)}
-                        </button>
-                    </form>
-                ))
-            }
-        </div>
-    </div>
+    <RadioForm
+        actionUrl={absUrl(`/p/${token}/complain/askIsUserOfApp/answer`)}
+        options={(['yes', 'no'] as const).reduce(
+            (agg, p) =>
+                Object.assign(agg, {
+                    [p]: t('common', p),
+                }),
+            {},
+        )}
+        value={complainantIsUserOfApp === null ? null : complainantIsUserOfApp ? 'yes' : 'no'}
+        idPrefix="askIsUserOfApp"
+    />
 </Base>

src/components/ComplaintLandingPage/AskLoggedIntoAppStore.astro

@@ -3,13 +3,15 @@ import { t } from '../../i18n/server';
 import Base from '../../layouts/base.astro';
 import { absUrl } from '../../lib/util';
 import TextRaw from '../TextRaw.astro';
+import RadioForm from '../RadioForm.astro';
 
 interface Props {
     token: string;
     platform: 'ios' | 'android';
+    loggedIntoAppStore: boolean | null;
 }
 
-const { token, platform } = Astro.props;
+const { token, platform, loggedIntoAppStore } = Astro.props;
 
 const store = t('common', `store-${platform}`);
 ---
@@ -19,21 +21,16 @@ const store = t('common', `store-${platform}`);
         <TextRaw scope="complaint-landing-askLoggedIntoAppStore" id="explanation" fields={{ store }} />
     </p>
 
-    <div class="col66 col100-mobile">
-        <div class="radio-group radio-group-vertical radio-group-padded">
-            {
-                (['yes', 'no'] as const).map((p) => (
-                    <form
-                        class="radio-wrapper"
-                        method="POST"
-                        action={absUrl(`/p/${token}/complain/askLoggedIntoAppStore`)}>
-                        <input type="hidden" name="answer" value={p} />
-                        <button type="submit" class="radio-label">
-                            {t('complaint-landing-askLoggedIntoAppStore', p, { store })}
-                        </button>
-                    </form>
-                ))
-            }
-        </div>
-    </div>
+    <RadioForm
+        actionUrl={absUrl(`/p/${token}/complain/askLoggedIntoAppStore/answer`)}
+        options={(['yes', 'no'] as const).reduce(
+            (agg, p) =>
+                Object.assign(agg, {
+                    [p]: t('complaint-landing-askLoggedIntoAppStore', p, { store }),
+                }),
+            {},
+        )}
+        value={loggedIntoAppStore === null ? null : loggedIntoAppStore ? 'yes' : 'no'}
+        idPrefix="askLoggedIntoAppStore"
+    />
 </Base>

src/components/ComplaintLandingPage/AskUserNetworkActivity.astro

@@ -17,7 +17,10 @@ const { token, platform } = Astro.props;
         <TextRaw scope="complaint-landing-askUserNetworkActivity" id={`explanation-${platform}`} />
     </p>
 
-    <form action={absUrl(`/p/${token}/complain/askUserNetworkActivity`)} enctype="multipart/form-data" method="post">
+    <form
+        action={absUrl(`/p/${token}/complain/askUserNetworkActivity/answer`)}
+        enctype="multipart/form-data"
+        method="post">
         <label for="upload" class="sr-only">{t('complaint-landing-askUserNetworkActivity', 'choose-file')}</label>
         <input type="file" id="upload" name="upload" accept={platform === 'android' ? '.csv' : '.ndjson'} required />
         <button class="button button-primary button-small" type="submit">

src/components/RadioForm.astro

@@ -0,0 +1,53 @@
+---
+import { t } from '../i18n/server';
+
+interface Props {
+    actionUrl: string;
+    idPrefix: string;
+    options: Record<string, string>;
+    value: string | null | undefined;
+}
+
+const { idPrefix, actionUrl, options, value } = Astro.props;
+---
+
+<div class="col66 col100-mobile">
+    <div class="radio-group radio-group-vertical radio-group-padded">
+        <form method="POST" id={`${idPrefix}-form`} action={actionUrl} class="astro-radio-form">
+            {
+                Object.keys(options).map((option) => (
+                    <div class="radio-wrapper">
+                        <input
+                            id={`${idPrefix}-radio-${option}`}
+                            type="radio"
+                            name="answer"
+                            class="form-element"
+                            value={option}
+                            checked={option === value}
+                            required="true"
+                        />
+                        <label class={`radio-label `} for={`${idPrefix}-radio-${option}`}>
+                            {options[option]}
+                        </label>
+                    </div>
+                ))
+            }
+            <button type="submit" class="button sr-only">{t('common', 'continue')}</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    const forms = document.getElementsByClassName('astro-radio-form') as HTMLCollectionOf<HTMLFormElement>;
+
+    for (const form of forms) {
+        const inputs = form.querySelectorAll('div.radio-wrapper');
+
+        // The "click" event is also triggered by chnage events for radio buttons (https://www.w3.org/TR/2012/WD-html5-20121025/content-models.html#interactive-content)
+        // Because of that, we use `mouseup` here, to specifically only check for actual clicks
+        for (const input of inputs)
+            input.addEventListener('mouseup', (e) => {
+                if ((e as MouseEvent).button === 0) form.submit();
+            });
+    }
+</script>

src/i18n/en.json

@@ -6,7 +6,8 @@
         "store-ios": "Apple App Store",
         "yes": "Yes",
         "no": "No",
-        "submit": "Submit"
+        "submit": "Submit",
+        "continue": "Continue"
     },
     "base": {
         "skip-to-content": "Skip to content",

src/pages/p/[platform]/[appId]/index.ts

@@ -19,7 +19,13 @@ export const POST: APIRoute = async ({ params, redirect, currentLocale, clientAd
 
     const token = nanoid();
 
-    const appMeta = await getAppMeta({ platform, appId, language: currentLocale || 'en' });
+    let appMeta;
+    try {
+        appMeta = await getAppMeta({ platform, appId, language: currentLocale || 'en' });
+    } catch (e) {
+        // TODO: Proper error handling
+        return new Response('Getting the apps’s metadata failed.', { status: 500 });
+    }
     if (!appMeta) return new Response('App not found.', { status: 404 });
 
     const { token: analysisToken } = await startAnalysis(platform, appMeta.appId);