search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
9 stars 1 forks source link

Generic code fragments for form fields #112

Closed macedvisioned closed 8 months ago

macedvisioned commented 3 years ago

Generic form fields conventions according the WCAG

These generic form instructions are based on the following WCAG succescriteria 1.1, 1.3, 1.4, 2.1, 2.2, 2.4, 2.5.2, 2.5.3, 3.1, 3.2, 3.3 en 4.1

Exceptions: not applicable at this moment for forms design: 1.3.4, 1,4,2, 2.2.2, 2.3.1, 2.5.1, 2.5.4.

Read more about the applicable WCAG description

  1. Waarneembaar [https://www.w3.org/Translations/WCAG21-nl/#waarneembaar]()
  2. Bedienbaar [https://www.w3.org/Translations/WCAG21-nl/#bedienbaar]()
  3. Onderscheidbaar [https://www.w3.org/Translations/WCAG21-nl/#onderscheidbaar]()
  4. Robuust [https://www.w3.org/Translations/WCAG21-nl/#robuust]()

Discussion:

Active field after a previous field has been filled in and trigger next fields in not allowed for keyboard focus according the WCAG, read more on https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html

Webforms need to be placed between main area.

<div id="main" role="main"> <!--add formfields here...-->

Code fragments per form field

Textfields formatting according to WCAG guidelines

Numeric fields formatting according to WCAG guidelines

Checkbox fields formatting according to WCAG guidelines

Textarea fields formatting according to WCAG guidelines See more on issue 40 [https://github.com/nl-design-system/backlog/issues/40]

Radio button fields formatting according to WCAG guidelines

Dropdownlist fields formatting according to WCAG guidelines

Section fields formatting according to WCAG guidelines Section fields are used for multi step forms to wrap more interdependency fields See more on issue 124 [https://github.com/nl-design-system/backlog/issues/124]

Date fields formatting according to WCAG guidelines

Date fields formatting according to WCAG guidelines

Page language formatting according to WCAG guidelines

Buttons language formatting according to WCAG guidelines Standard we have the following button types like 'Submit', 'Reset', 'Save', 'Print' and 'Search' buttons
For accessibility-use please use a button which is at least 44 px high.

See more on issue 38 [https://github.com/nl-design-system/backlog/issues/38]

Samples of patterns in formfields

/validatie bsn nummer/

<script>
if (this.rawValue != "" &amp;&amp; this.rawValue != null){
    var vChars = this.rawValue.length;
    if (vChars == 9)
    {
        var vNum1 = this.rawValue;
        var vString = vNum1.toString();
        var vSplit = vString.split("");
        var vNum2 = (((vSplit[0] * 9) + (vSplit[1] * 8) + (vSplit[2] * 7) + (vSplit[3] * 6) + (vSplit[4] * 5) + (vSplit[5] * 4) + (vSplit[6] * 3) + (vSplit[7] * 2) - vSplit[8])/11);
        var vNum3 = (Math.round(vNum2) - vNum2);
        if (vNum3 != 0)
        {
            xfa.host.messageBox("U heeft geen geldig BSN nummer ingegeven.\n\nVul een geldig BSN nummer in a.u.b.", "Validatie fout",1);
            xfa.host.setFocus(this);
            //this.rc = false;
            this.rawValue = "";
        }
        else
        this.rc = true;
    }
    else
    {
        xfa.host.messageBox("U heeft geen geldig BSN nummer ingegeven.\nEen BSN nummer bestaat uit 9 cijfers.\n\nVul een geldig BSN nummer in a.u.b.", "Validatie fout",1);
        xfa.host.setFocus(this);
        //this.rc = false;
        this.rawValue = "";
    }
}
else{
    // Er is niets ingevuld, dus true
    this.rc = true;
}
</script>

/Validatie e-mailadres in dynamische pdf maar ook te gebruiken in andere formulieroplossingen/

<script contentType="application/x-javascript">// Validate the email address.
//handmatig gefixt script. 2018-02-07 Ed Boon
var r = new RegExp("^[0-9A-Za-z_\\-\\.]+\\@[0-9A-Za-z_\\-\\.]+\\.[a-z]{2,3}$"); // Create a new Regular Expression Object.
//bug Adobe reader DC, handmatig gefixt zie hierboven de juiste versie
//var r = new RegExp("^[a-z0-9_\\-\\.]+\\@[a-z0-9_\\-\\.]+\\.[a-z]{2,4}$"); // Create a new Regular Expression Object.
// Set the regular expression to look for  an email address in general form.

var result = r.test(this.rawValue); // Test the rawValue of the current object to see
// if it fits the general form of an email address.

if (result == true) // If it fits the general form,
    true;           // all is well.
else                // Otherwise,
    false;          // fail the validation.
</script>

/Validatie telefoonnummer/

function Telefoon(vField)
{
    var vGREP = /^[0][0-9]{9}$/;

    if (vField.rawValue != null &amp;&amp; vField.rawValue != "")
    {
        if (vGREP.test(vField.rawValue) == true)
        {
            vField.rc = true;
            var f = vField.rawValue;
            vField.rawValue = f.toUpperCase();
        }
        else
        {
            this.messageBox("Ongeldig telefoonnummer. Vul hier een geldig telefoonnummer in.", "Validatie fout",1);
            vField.rawValue = "";
            this.setFocus(vField);
            vField.rc = false;
        }
    }
}

/Validatie datumvergelijking voor berekening aantal maanden/

var oneDay = (24*60*60*1000);
var firstDate = new Date(StartDatum.rawValue);
var secondDate = new Date(EindDatum.rawValue);  
Math.abs(secondDate.getTime() - firstDate.getTime()) / oneDay / 30.4583333333;

//validatie postcode

var vCode1 = /^[1-9][0-9]{3}\s?[A-Za-z]{2}$/;

if (vCode1.test(this.rawValue) == false && this.rawValue!= null)
{
    this.messageBox("U heeft een ongeldige postcode ingevuld.\n\nVul hier de vier cijfers en de twee letters van uw postcode in.", "Validatie fout",1);
    this.rawValue = "";
    this.setFocus(this);
    //false;
}
else {
    //true;
    this.rawValue = this.rawValue.toUpperCase();
}

To be discussed @usethetics @Robbert @Yolijn

macedvisioned commented 3 years ago

Skiplink code snippet

<!--Skiplink-->
Added to issue [https://github.com/nl-design-system/backlog/issues/74](url)
<h2>Skiplink to go to the maincontent</h2>
<a href="#subheader" class="bypass" tabindex="0">Go to maincontent</a>
<!--end main-->
usethetics commented 3 years ago

Let’s move these individual code snippets to their respective components on the backlog!

macedvisioned commented 3 years ago

Goedemiddag Rogier,

Ik ben vandaag bezig met het verplaatsen van 112 naar de verschillende componenten.

Ik verwacht dat ik daar maandag nog meer verder ga.

Groet,

Ed

Rogier Barendregt schreef op 2021-04-30 11:11:

Let's move these individual code snippets to their respective components on the backlog!

-- You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [1], or unsubscribe [2].

Links:

[1] https://github.com/nl-design-system/backlog/issues/112#issuecomment-829958196 [2] https://github.com/notifications/unsubscribe-auth/AAPVKXEC2SH4ZA2Z6TXPBIDTLJX5BANCNFSM43IIQZKA

macedvisioned commented 3 years ago

Radiobutton snippet opgenomen onder https://github.com/nl-design-system/backlog/issues/65 Textinput snippet opgenomen onder https://github.com/nl-design-system/backlog/issues/5

macedvisioned commented 3 years ago

Het lijkt me goed om de algemene conventies

Generic form fields conventions according the WCAG

in een apart issue te plaatsen, inclusief de gequote discussie.

usethetics commented 3 years ago

Hoi Ed,

Super, bedankt!

Fijn weekend, Rogier

On 30 Apr 2021, at 14:52, Ed Boon @.***> wrote:

Goedemiddag Rogier,

Ik ben vandaag bezig met het verplaatsen van 112 naar de verschillende componenten.

Ik verwacht dat ik daar maandag nog meer verder ga.

Groet,

Ed

Rogier Barendregt schreef op 2021-04-30 11:11:

Let's move these individual code snippets to their respective components on the backlog!

-- You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [1], or unsubscribe [2].

Links:

[1] https://github.com/nl-design-system/backlog/issues/112#issuecomment-829958196 [2] https://github.com/notifications/unsubscribe-auth/AAPVKXEC2SH4ZA2Z6TXPBIDTLJX5BANCNFSM43IIQZKA — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nl-design-system/backlog/issues/112#issuecomment-830073413, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAB4YWJ7TX63ACFWVAWLUO3TLKRZJANCNFSM43IIQZKA.

macedvisioned commented 3 years ago

Hoi @usethetics @Robbert,

Ik heb de code snippets geplaatst in de components. Verder heb ik nog een aantal issues toegevoegd voor: Sections: See more on issue 124 https://github.com/nl-design-system/backlog/issues/124 Numeric fields: See more on issue 125 https://github.com/nl-design-system/backlog/issues/125 Form page language (komt nog een filmpje bij) See more on issue 126 https://github.com/nl-design-system/backlog/issues/126

Vraag: is er ook een issue voor patterns, dan zouden daar de validaties in kunnen geplaatst worden.

Ik denk dat we #112 in tact moeten laten voor de algemene conventies. Mee eens?

Hoor graag,

Groet, Ed

Robbert commented 3 years ago

Ja, ik denk dat we deze wel open kunnen houden. Op het moment dat we een aantal form input components gemaakt hebben, kunnen we deze checklist er even bij houden en de componenten checken op volledigheid, daarna kan dit issue gesloten worden.

macedvisioned commented 3 years ago

Hoi @Robbert @usethetics

Ik heb nog een issue gevonden terwijl ik aan het werk was met PowerApps (forms) -opvolger van Microsoft InfoPath. Helaas sluipt dit er nog steeds in bij Microsoft. Het heeft te maken met spaties in formuliervelden. Niet dat ik dat gebruik maar het is wel een tip voor andere ontwikkelaars om de CamelCase te gebruiken voor formuliervelden. Ik wil dit nog verwijzen naar de Conventie voor schrijfwijze formuliernamen. Als je namelijk spaties gebruikt in formuliernamen in een SharePoint toepassing dan wordt er de volgende code gegenereerd: x0020 Dat betekent dus 7 karakters gebruik je meerdere spaties tussen meerdere namen dan wordt zo'n veld behoorlijk lang. Het kan nl. nogal van invloed zijn bij calculaties en concatenations. Er is een oplossing: 1. gebruik altijd de CamelCase name convention met prefix: num[BegrijpelijkeNaam] maar als je spaties gebruikt hebt dan is dit 2. de alternatieve oplossing. https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-Overcome-Delegation-with-SUM-function/m-p/363835

Yolijn commented 8 months ago

Opgenomen in de richtlijnen voor formulieren.