3. Bouwen - RayanSp/vervoerregio-amsterdam GitHub Wiki

Een van de wensen van de opdrachtgever was een plek waar de gebruiker contact kan opnemen, voor meer duidelijkheid over toegankelijkheids richtlijnen. (zie issue)

Ik heb dit gedaan door middel van een formulier, gekoppeld aan een e-mail address. Het e-mail address krijgt een unieke key, die ik verwerk in een hidden input. Deze key heb ik in mijn .env bestand staan en importeer ik naar mijn component.

Om dit te realiseren heb ik onderstaande code gebruikt:

    let status = "";
const handleSubmit = async data => {
  status = 'Submitting...'
  const formData = new FormData(data.currentTarget)
  const object = Object.fromEntries(formData);
  const json = JSON.stringify(object);

  const response = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
      },
      body: json
  });
  const result = await response.json();
  if (result.success) {
      console.log(result);
      status = result.message || "Success"
  }
}

	<section class="bot-right-container">
		<section class="text-container">
			<h3>Contact opnemen?</h3>
			<br />
			<p>
				Indien u vragen heeft of mocht er nog enige onduidelijkheid bestaan, kunt u via 
                onderstaand formulier contact met ons opnemen.
			</p>
            <form on:submit|preventDefault={handleSubmit}>
                <fieldset class="form-vraag">
                <input type="hidden" name="access_key" value={data.vragen}>
                <label for="name">Naam</label>
                <input placeholder="name" type="text" name="name" required />
                <label for="mail">Email</label>
                <input placeholder="email" id="mail" type="email" name="email" required />
                <label for="vraag">Uw vraag</label>
                <textarea id="vraag" name="message" required rows="3"></textarea>
                <input class="form-button" type="submit" />
                </fieldset>
            </form>
		</section>
	</section>

Bron: https://web3forms.com/

Het contrast was niet goed nadat ik dit heb getest met lighthouse en een app genaamd colour contrast analyzer. Zie hieronder de resultaten van deze app:

Wat is er nou precies aangepast? Hier is een foto van de before en een foto van de after:

Ik heb deze aanpassing gemaakt om een erg simpele reden, voor de eindgebruiker. Het is over het algemeen essentieel dat de website die je bouwt, toegankelijk is voor elke gebruiker. Hier probeer ik mij dan ook zeker aan te houden. Hier ontstaat wel een klein conflict, de kleuren die gebruikt worden horen wel allemaal bij de huisstijl, maar de roze kleur die ik heb weggehaald is de primaire kleur.

Ik heb de lightmode/darkmode feature gebouwd, dit was 1 van de taken die nog open stonden op het oude projectboard.

Verder heb ik ook progressive enhancement toegepast. Voor de gebruikers die javascript uit hebben staan, wordt het dark/lightmode icoontje niet vertoond, dat heb ik gedaan met onderstaande code.

	import { onMount } from 'svelte';

	let jsEnabled = false;

	onMount(() => {
		// JavaScript is enabled, toggle the class
		jsEnabled = true;
		let icon = document.querySelector('.disable-js');

		icon.classList.toggle('disable-js');
	});

https://www.youtube.com/watch?v=9LZGB3OLXNQ

Na het bouwen van de lightmode/darkmode, moest er toch nog wat toegevoegd worden. Na het refreshen van de pagina, sprongen de kleuren weer terug naar de oorspronkelijke thema. Door gebruik te maken van localstorage, is het mogelijk om de laatst geselecteerde thema te onthouden. Na het refreshen van de pagina, blijft de laatst geselecteerde thema dus staan. Onderstaande js code heb ik daarvoor gebruikt.

	function toggleLightMode() {
		if (localStorage.getItem('lightMode') === null) {
			document.body.classList.add('lightmode');

			localStorage.setItem('lightMode', isLightMode);
		} else {
			document.body.classList.remove('lightmode');
			localStorage.removeItem('lightMode', isLightMode);
			localStorage.setItem('darkMode', isDarkMode);
		}
	}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors

Before

https://www.youtube.com/watch?v=9eRj1802p90 https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/

Bron: https://www.youtube.com/watch?v=sEJB7FtBoug

Na het bouwen van mijn formulier voor de opdrachtgever, heb ik wat testen uitgevoerd. Hieruit bleek dat er nog wat verbeterpunten waren op basis van accessibility. Dit is natuurlijk erg belangrijk om te verbeteren voor een betere ervaring van de eindgebruiker.

Na het optimaliseren van de toegankelijkheid had ik een betere score en is de website een stuk gebruikersvriendelijk geworden.

...

Na het invullen en versturen van een formulier, wordt het verstuurd naar hygraph:

Hier is het terug te vinden in hygraph:

De code die hiervoor wordt gebruikt:

export const prerender = false;
 
// Data naar Hygraph sturen
export const actions = {
    default: async ({ request, url }) => {
 
        const formData = await request.formData();
 
        let name = formData.get("name");
        let email = formData.get("email");
        let vraag = formData.get("vraag");
        // Maak nieuwe content aan voor Hygraph
        const mutation = `
        mutation {
            createContact(data: { name: "${name}", email: "${email}", vraag: "${vraag}" }) {
                name
                email
                vraag
            }
        }
        `;
 
        // Hygraph url
        const endpoint =
            "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/clbe0zp4u2fkz01uj486xdza4/master";
 
        // Hygraph autorisatie
        const HYGRAPH_TOKEN = import.meta.env.VITE_HYGRAPH_KEY;
        const headers = {
            Authorization: `Bearer ${HYGRAPH_TOKEN}`,
        };
 
        // Voer de mutatie uit
        const postData = await graphqlRequest(
            endpoint,
            mutation,
            undefined,
            headers
        );
        return { success: true, postData };
    },
};

Hieronder is de code die ik gebruik om mijn formulier te enhancen. Bij het verzenden van het formulier zie je in beeld 'versturen...' staan, die laat zien aan de gebruiker dat er wordt gewerkt aan het versturen van het formulier.

<form action="/info" use:enhance={handleEnhance} on:submit={() => (isSubmitting = true)} method="POST">

  let isSubmitting = false;
  let successMessage = "";
  let errorMessage = "";

  function handleEnhance({ formElement }) {
    const handleSubmit = async ({ result }) => {
      isSubmitting = false;
      successMessage = "";
      errorMessage = "";

      if (result.type === "failure") {
        errorMessage = result.data.error;
      } else if (result.type === "success") {
        formElement.reset();
        successMessage = result.data.message;
      }
    };
    return handleSubmit;
  }

<button type="submit" class="form-button" disabled={isSubmitting}>
  {#if isSubmitting}
     versturen...
  {:else}
     Verstuur
  {/if}
</button>

Voor het versturen:

Tijdens het versturen:

Error na het versturen:

De criteria vertaling switch is een feature die ik heb gebouwd, waarbij de standaard w3c tekst die wordt gebruikt op de tool van vervoerregio, een vertaling moet krijgen zodat het makkelijker te begrijpen is. Hiervoor heb ik samen met Eliza eerst de criteria vertaald en in een word document gezet, vervolgens heb ik de vertaling in hygraph gezet.

Met onderstaande query heb ik de vertaalde tekst opgehaald, dit is te vinden in toolboard.js in het mapje 'queries'.

criteria {
  text
}

Vervolgens moest ik een button maken die ervoor zorgt dat er geswitched wordt tussen de 2 teksten. Dit was nogal lastig gezien elke button alleen de tekst moest vertalen van de criteria waar die bij stond. Met onderstaande code doe ik dat, Cyd heeft mij hier ook bij geholpen en gechecked.

    function translate(event, criteriumNumber) {
        console.log(event, criteriumNumber);
		// Get clicked button with event.target
		const button = event.target
		//  
		const activeSection = button.closest('details')

		const uitleg = activeSection.querySelector('.richtlijn-uitleg')

		uitleg.classList.toggle('moeiluk')
		button.classList.toggle('moeiluk')
}