Sprint Review 28-11

[Jason2426]

Notulen

Gepresenteerd aan Declan waar we mee bezig zijn geweest de afgelopen sprint

Feedback Yujing,

Nadenken over wat een component precies is en wanneer het handig is, een input zou bijvoorbeeld ook al een component op zichzelf kunnen zijn.

• Waarom een heel "form" als component, en niet alleen input veld? Een input veld is veel generieker dan een heel form. De beste manier om je component te kunnen testen, is door het te implementeren in verschillende situaties.
• gebruiker moet 1 keer de kans hebben om het fout te doen. Pas na geprobeerd te submitten de error message geven.

Feedback Jason:

• label of aria-label op input: label vertelt dit element doet dit. De designer kiest in design om geen label te gebruiken, waardoor jij in je technische implementatie een aria-label te gebruiken. Waarom word er geen label getoond? Is het voor iedereen duidelijk dat de input, die er uit ziet als een lijntje, een search bar is?
• Een placeholder is anders dan label. Label: geboortedatum, placeholder: DD/MM/YYYY
• Het design is gewoon niet semantisch goed, ligt niet aan jou.
• Waar is het design van de state wanneer er gezocht word op een value?
• Kijk die video
• w3.org/WAI/aria/apg/patterns/listbox/

Feedback Lisa:

• Zet bij de tekst wat het is. Bij de agency zet je agency, bij plaats city, bij expertise expertise, etc etc.

[yujing-student]

doorvragen bij het form

Declan Waarom heb je niet voor een input component gekozen

Yu Jing omdat ik er niet aan gedacht had ik dacht dat het form zelf ook een goed component was en ook omdat ik dan 1 geheel onderdeel af heb en een alleen input zelf best klein is

Declan Je input die zit in het inschrijfformulier als je hier een component van maakt kan je het testen in verschillende situaties

Yu Jing : hoe kan ik bij fte doen dat er geen lege option is en hoe pas je wat jij zei goed toe op meerde componenten in een form?

Declan ik laat de website van pathe zien en de code dit is wel in een andere programmeertaal en als je met componenten werkt is het handig om op een lager niveau te gaan kijken voordat je 1 form maakt wat minder vaak herbruikt word dan een input field

Yu Jing Met het voorbeeld van pathe en de code snap ik het en ga ik de volgende sprint review er mee aan de slag

samenvatting

dit stuk code wat in het form staat is een input en moet een aparte component worden met props zoals in het voorbeeld laten zein

https://svelte.dev/docs/svelte/$props

text component

 <label class="form-label" for="functie">
            <span class="star"> Functie</span>
            <input aria-required="true"
                   id="functie"
                   name="functie"
                   required type="text"/>
        </label>

email component

   <label class="form-label" for="email">
            <span class="star">E-mail</span>
            <input aria-required="true"
                   autocomplete="email"
                   id="email"

                   name="email"
                   required type="email"/>
        </label`>

mobile input

  <label class="form-label" for="Mobiel">
            <span class="star">Mobiel</span>
            <input aria-required="true"
                   autocomplete="tel"
                   id="Mobiel"
                   name="Mobiel"
                   required
                   type="number"/>
        </label>

textarea component

        <label class="form-label input-textfield" for="ik-wil-graag-lid-worden-omdat">
            <span class="star">Ik wil graag lid worden omdat </span>
            <textarea aria-required="true" cols="5" placeholder="" required
                      rows="1"></textarea>
        </label>

select fte

<label class="dropown" for="FTE">
            <span class="star">FTE</span>
            <select aria-required="true"
                    bind:value={selectedValue}
                    id="FTE"
                    name="FTE"
                    required>

                <option value="">
                </option>
                <option value="">
                    1-9
                </option>
                <option value="10-24">
                    10-24
                </option>
                <option value="25-49">
                    25-49
                </option>
                <option value="50-99">
                    50-99
                </option>
                <option value="100-249">
                    100-249
                </option>
                <option value="250+">
                    250
                </option>
            </select>

        </label>

deze losse componenten moeten dan met import component naam geïmporteerd worden in het form