progressive enhancement submit feature / form page

lisavanmansom commented 1 week ago

progressive enhancement submit feature / form page

In het ontwerp staat er 1 fieldset op de pagina gelijk. Momenteel staan alle fieldsets onder elkaar op de pagina. Als enhancement wil ik het zoals het ontwerp maken. Ik wil hiermee de UX verhogen, door dit te doen staat er maar 1 vraag op de page ipv meerdere, hierdoor is het behapbaarder en overzichtelijker tijdens het invullen van de vragenlijst voor de gebruiker.

takenlijst

[x] Analyseren / PvA / onderzoek / can i use
[x] Bouwen
[x] Testen

Core functionality

Enhancement

lisavanmansom commented 3 days ago

Analyse

Ik wil gebruik maken van mediaquery scripting die een verschillende layout laat zien gebaseerd op de instellingen van de gebruiker. Hierbij heeft de gebruiker JS aan of uit en krijgt die bij JS een andere layout te zien dan als het aan staat.

VB snippet code (bron)

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}

Can I use

Ik heb gekeken bij 'CANIUSE' of het toegankelijk is bij alle browser voordat ik ben begonnen met coderen.

Media Queries Level 5

https://www.w3.org/TR/mediaqueries-5/#scripting

The scripting media feature is used to query whether scripting languages, such as JavaScript, are supported on the current document.

enabled

Indicates that the user agent supports scripting of the page, and that scripting in the current document is enabled for the lifetime of the document.

initial-only

Indicates that the user agent supports scripting of the page, and that scripting in the current document is enabled during the initial page load, but is not supported afterwards. Examples are printed pages, or pre-rendering network proxies that render a page on a server and send a nearly-static version of the page to the user.

none

Indicates that the user agent will not run scripts for this document; either it doesn’t support a scripting language, or the support isn’t active for the current document. Some user agents have the ability to turn off scripting support on a per script basis or per domain basis, allowing some, but not all, scripts to run in a particular document.

The scripting media feature does not allow fine grained detection of which script is allowed to run. In this scenario, the value of the scripting media feature should be enabled or initial-only if scripts originating on the same domain as the document are allowed to run, and none otherwise.

lisavanmansom commented 3 days ago

Bouwen

JS

In de JS heb ik een let currentStep = 0; toegevoegd, dit is de indicator bij welke step / fieldset die is. Als de gebruiker op de button drukt waar 'volgende' opstaat komt de volgende stap in beeld. Ik heb dit. gedaan met function nextStep() if (currentStep < questions.length - 1) currentStep++;, om terug te gaan naar de vorige stap heb ik function nextStep() { if (currentStep < questions.length - 1) currentStep++; } gebruikt

HTML

In de html heb ik een aantal aanpassingen gedaan, o.a. heb ik bij het component index={index} currentStep={currentStep} toegevoegd zodat het je heen en weer kan gaan in de vragenlijst als de JS aanstaat. Daarnaast heb ik 3 buttons toegevoegd waarmee je navigeert. Er is een 'previous', 'next' en een 'submit' toegevoegd. Bij de 'previous' en 'next' button maak ik gebruik van on:click={prevStep} disabled={currentStep === 0} en on:click={nextStep} disabled={currentStep === questions.length - 1} waardoor het navigeren tussen fieldsets mogelijk is. Als je bij de laatste fieldset aankomt wordt de 'next' button een 'submit' button, dit heb ik gedaan d.m.v. {#if currentStep === questions.length - 1}<button type="submit">Submit</button> {/if}

CSS

In de CSS maak ik gebruik van mediaqueries die een andere layout laten zien gebaseerd op de gebruikersinstellingen. Als de gebruiker JS aan hebt staan krijgt hij 1 vraag op zijn scherm, terwijl met JS uit krijgt hij de gehele form te zien. Daarnaast heb ik ook container queries toegepast om het responsive te krijgen.

<script>
  import QuestionSet from '../molecules/question-set.svelte';
  let currentStep = 0;

  let questions = [{...
  }]

  function nextStep() {
    if (currentStep < questions.length - 1) currentStep++;
  }

  function prevStep() {
    if (currentStep > 0) currentStep--;
  }
</script>

<!-- form component-->
<form  method="POST" action="?/submit">
  <div>
  {#each questions as question, index}
    <!-- QuestionSet / fieldsets-->
    <QuestionSet
      index={index}
      currentStep={currentStep}
      legend={question.legend}
      name={question.name}
      options={question.options}
    />
  {/each}
  </div>

  <div>
    <button class="curButton" type="button" on:click={prevStep} disabled={currentStep === 0}>
      Terug</button>
    <button class="curButton" type="button" on:click={nextStep} disabled={currentStep === questions.length - 1}>
      Volgende</button>
    {#if currentStep === questions.length - 1}
      <button type="submit">Submit</button>
    {/if}
  </div>

  <button class="submitButton" type="submit">Submit</button>
</form>

<style>
  /* media query if script is on */
  @media (scripting: enabled) {
    .submitButton { display: none; }
    div:nth-of-type(1) {
      height: 40em;
    }
    @container form-banner (width > 22em) {
      div:nth-of-type(1) { 
        height: 32em;
      }
      div:nth-of-type(2) {
        gap: 2em;
      }
    }

    @container form-banner (width > 40em) {
      div:nth-of-type(1) { 
        height: 25em;
      }
      div:nth-of-type(2) {
        gap: 4em;
      }
    }
  }

  /* media query if script is off */
  @media (scripting: none) {
    .curButton { display: none; }
  }
</style>

Result w/o JS

Result w. JS

commit

lisavanmansom commented 3 days ago

Testing

Omdat ik aanpassingen heb gedaan doe ik alle testen opnieuw zodat ik de voortgang kan zien na aanpassingen. Hierdoor is het duidelijk of de aanpassingen een positief effect hebben of een negatief effect hebben.

Accessibility

Performance / desktop

Performance / mobile

Performance / opportunities

Tabtest

Ik heb een tabtest gedaan om te checken of alles bereikbaar is als een gebruiker een keyboard gebruikt. Hierdoor had ik al een tabtest gedaan, toen was het resultaat dat alles bereikbaar was. Tijdens deze tabtest was dat ook. De toegevoegde buttons krijgen een focus erom heen zodat het zichtbaar is waar de gebruiker aan het tabben is, daarnaast kan je met het keyboard naar de volgende of vorige vraag.

Screenreader

De screenreader leest alles netjes voor en skipt geen elementen, het is eenvoudig om de form in te vullen d.m.v de screenreader.

fdnd-agency / drop-and-heal