Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Align label with input field when a notification is present #336

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Fix: Align label with input field when a notification is present #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6d14027
WIP, notifications within horizontally aligned forms styling
HeleenSG Jun 7, 2023
e1d3518
Updates notification styling within forms
HeleenSG Jun 7, 2023
d64ea97
Updating documentation
HeleenSG Jun 7, 2023
84db540
Updated form notification styling
HeleenSG Jun 7, 2023
63e9e66
Adds fieldset notification behaviour
HeleenSG Jun 7, 2023
f8ead58
Adds tests
HeleenSG Jun 8, 2023
5ccb200
Updated documentation
HeleenSG Jun 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
892 changes: 516 additions & 376 deletions docs/documentation/components/form-base-test.html
View file
Open in desktop

Large diffs are not rendered by default.

376 changes: 376 additions & 0 deletions docs/documentation/components/form-fieldset-horizontal-view-notification-test.html
View file
Open in desktop

Large diffs are not rendered by default.

376 changes: 376 additions & 0 deletions docs/documentation/components/form-fieldset-notification-test.html
View file
Open in desktop

Large diffs are not rendered by default.

262 changes: 262 additions & 0 deletions docs/documentation/components/form-fieldset-notification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
<!DOCTYPE html>
<html lang="nl">

<head>
<meta charset="UTF-8" />
<title>Notificatie binnen een formulier met fieldsets</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../../static/css/main.css" rel="stylesheet" />
<link href="../../static/img/favicon.ico" rel="shortcut icon" />
<script defer src="../../static/js/manon.js"></script>
</head>

<body id="index" class="documentation">
<header>
<a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

<nav aria-label="Hoofdnavigatie">
<div>
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../components.html">Componenten</a></li>
<li><a href="../documentation.html">Documentatie</a></li>
</ul>
</div>
</nav>

<nav class="breadcrumb-bar">
<div>
<ul>
<li><a href="../components.html">Componenten</a></li>
<li><a href="./forms.html">Formulieren</a></li>
<li>
<a href="./form-notification.html" aria-current="page">Notificatie binnen een formulier met fieldsets</a>
</li>
</ul>
</div>
</nav>
</header>

<main class="sidemenu" id="main-content" tabindex="-1">
<nav data-open-label="Zijbalknavigatie" data-close-label="Sluit zijbalknavigatie" aria-label="Document-navigatie">
<ul>
<li><a href="./form-notification.html">Introductie</a></li>
<li><a href="#examples">Voorbeelden</a></li>
<li><a href="#requirements">Bijbehorende bestanden</a></li>
<li><a href="#related">Gerelateerde pagina's</a></li>
</ul>
</nav>
<article>
<div>
<section id="introduction">
<h1>Notificatie binnen een formulier met fieldsets</h1>

<h2>Benodigde stappen:</h2>
<ol>
<li>
Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde
en optionele bestanden zie:
<a href="#requirements">Bijbehorende bestanden</a>.
</li>
<li>Voeg de benodigde HTML toe. Voor meer informatie zie <a href="#examples">Voorbeelden</a></li>
</ol>

<h2>Aandachtspunten:</h2>
<ul>
<li>Let op: visuele feedback op het invoerveld is op zichzelf onvoldoende om toegankelijkheid en een goede
gebruikerservaring te waarborgen.</li>
<li>Vertel de gebruiker altijd wat de vervolgstappen zijn die zij kunnen nemen om het probleem op te lossen
of om zelf verder te kunnen.</li>
<li>Voeg de class toe met het type melding op het invoerveld om gebruik te maken van visuele feedback direct
op het invoerveld. Voorbeeld: <code>class="error"</code>.</li>
<li>Voeg voor screenreader gebruikers <code>aria-invalid="true"</code> toe aan invoervelden met een error.
In de HTML-voorbeelden is dit meegenomen.</li>
<li>Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, zodat de gebruiker
eerst de toelichtig leest en daarna het bijbehorende invoerveld tegenkomt. Hierdoor weet de gebruiker hoe
het invoerveld ingevuld dient te worden voordat deze gepresenteerd wordt. Uitzondering hierop zijn
toelichtingsteksten die de gebruiker zelf activeert door middel van de hulpknop. Die teksten worden onder
het gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de gebruiker
interactie mee heeft zo min mogelijk verspringt.</li>
<li>Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker eerst te zien krijgt
wat de context van de foutmelding is. Dit maakt het begrijpen van de foutmelding toegankelijker.</li>
<li>Voor meer informatie over beschikbare notificatie-types en het gebruik zie: <a
href="notifications.html">Notificaties</a>.</li>
</ul>
</section>

<section id="examples">
<h2>Voorbeelden</h2>
<p>Het basisvoorbeeld met een invoerveld en een verzendknop.</p>

<h3>Notificatie op invoerveld</h3>
<h4>Visueel voorbeeld foutmelding:</h4>
<form action="" method="post">
<label for="input-error">Input</label>
<input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
aria-invalid="true">
<p class="error" id="input-error-message">
<span>Foutmelding:</span> Lorem ipsum dolor set amet
</p>
<button type="submit">Verzend</button>
</form>

<p>Html-voorbeeld:</p>
<pre>
<code>
&lt;form action="" method="post">
&lt;label for="input-error">Input&lt;/label>
&lt;input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
&lt;p class="error" id="input-error-message">
&lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
&lt;/p>
&lt;button type="submit">Verzend&lt;/button>
&lt;/form>
</code>
</pre>

<h4>Visueel voorbeeld toelichting:</h4>
<form action="" method="post">
<label for="input-explanation">Input</label>
<p class="explanation" id="input-explanation-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet
</p>
<input id="input-explanation" class="explanation" value="Lorem ipsum"
aria-describedby="input-explanation-message" aria-invalid="true">
<button type="submit">Verzend</button>
</form>

<p>Html-voorbeeld:</p>
<pre>
<code>
&lt;form action="" method="post">
&lt;label for="input-explanation">Input&lt;/label>
&lt;p class="explanation" id="input-explanation-message">
&lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
&lt;/p>
&lt;input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
&lt;button type="submit">Verzend&lt;/button>
&lt;/form>
</code>
</pre>

<h4>Visueel voorbeeld waarschuwing:</h4>
<form action="" method="post">
<label for="input-warning">Input</label>
<p class="warning" id="input-warning-message">
<span>Waarschuwing:</span> Lorem ipsum dolor set amet
</p>
<input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message"
aria-invalid="true">
<button type="submit">Verzend</button>
</form>

<p>Html-voorbeeld:</p>
<pre>
<code>
&lt;form action="" method="post">
&lt;label for="input-warning">Input&lt;/label>
&lt;p class="warning" id="input-warning-message">
&lt;span>Waarschuwing:&lt;/span> Lorem ipsum dolor set amet
&lt;/p>
&lt;input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
&lt;button type="submit">Verzend&lt;/button>
&lt;/form>
</code>
</pre>

<h4>Visueel voorbeeld bevestiging:</h4>
<form action="" method="post">
<label for="input-confirmation">Input</label>
<p class="confirmation" id="input-confirmation-message">
<span>Bevestiging:</span> Lorem ipsum dolor set amet
</p>
<input id="input-confirmation" class="confirmation" value="Lorem ipsum"
aria-describedby="input-confirmation-message" aria-invalid="true">
<button type="submit">Verzend</button>
</form>

<p>Html-voorbeeld:</p>
<pre>
<code>
&lt;form action="" method="post">
&lt;label for="input-confirmation">Input&lt;/label>
&lt;p class="confirmation" id="input-confirmation-message">
&lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
&lt;/p>
&lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
&lt;button type="submit">Verzend&lt;/button>
&lt;/form>
</code>
</pre>

<h4>Visueel voorbeeld systeembericht</h4>
<form action="" method="post">
<label for="input-system">Input</label>
<p class="system" id="input-system-message">
<span>Systeembericht:</span> Lorem ipsum dolor set amet
</p>
<input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message"
aria-invalid="true">
<button type="submit">Verzend</button>
</form>

<p>Html-voorbeeld:</p>
<pre>
<code>
&lt;form action="" method="post">
&lt;label for="input-system">Input&lt;/label>
&lt;p class="system" id="input-system-message">
&lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
&lt;/p>
&lt;input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
&lt;button type="submit">Verzend&lt;/button>
&lt;/form>

</code>
</pre>
</section>

<section id="requirements">
<h2>Bijbehorende bestanden</h2>
<p>
Voor meer informatie over importeren en instellen van componenten. Zie:
<a href="../import-styling.html">Componenten gebruiken en styling toevoegen</a>
</p>

<h3>Gerelateerd:</h3>
<ul>
<li>Voor meer informatie over beschikbare notificatie-types en het gebruik zie: <a
href="notifications.html">Notificaties</a>.</li>
</ul>

<h3>Importeer component via NPM</h3>

<h4>CSS-voorbeeld:</h4>
<pre>
<code>
/* Notification base component */
@use "@minvws/manon/notification";

/* Notification types, import what is needed */
@use "@minvws/manon/notification-block-element";
@use "@minvws/manon/notification-paragraph";
@use "@minvws/manon/notification-table";
@use "@minvws/manon/notification-error";
@use "@minvws/manon/notification-warning";
@use "@minvws/manon/notification-explanation";
@use "@minvws/manon/notification-confirmation";
@use "@minvws/manon/notification-system-message";
</code>
</pre>
</section>

<section id="related">
<h2>Gerelateerde pagina's</h2>
<a href="./form-fieldset-notification-test.html">Test- en voorbeelden-pagina</a>
</section>
</div>
</article>
</main>
</body>

</html>
Loading