Skip to content

Commit

Permalink
Improve A11Y by adding label for inputs in demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@samiheikki
samiheikki committed Oct 20, 2018
1 parent cf768ee commit 13432bd
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 42 deletions.
24 changes: 12 additions & 12 deletions demo/form-layout-columns-rows-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@ <h3>Custom Responsive Steps</h3>
<vaadin-form-layout class="custom-steps">

<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
<label slot="label" for="firstname">First Name</label>
<input id="firstname" class="full-width" value="Jane">
</vaadin-form-item>

<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
<label slot="label" for="lastname">Last Name</label>
<input id="lastname" class="full-width" value="Doe">
</vaadin-form-item>

<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
<label slot="label" for="email">Email</label>
<input id="email" class="full-width" value="jane.doe@example.com">
</vaadin-form-item>

</vaadin-form-layout>
Expand Down Expand Up @@ -109,18 +109,18 @@ <h3>Custom CSS Properties</h3>
<vaadin-form-layout>

<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
<label slot="label" for="email">Email</label>
<input id="email" class="full-width" value="jane.doe@example.com">
</vaadin-form-item>

<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
<label slot="label" for="lastname">Last Name</label>
<input id="lastname" class="full-width" value="Doe">
</vaadin-form-item>

<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
<label slot="label" for="email">Email</label>
<input id="email" class="full-width" value="jane.doe@example.com">
</vaadin-form-item>

</vaadin-form-layout>
Expand Down
46 changes: 19 additions & 27 deletions demo/form-layout-form-item-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,38 @@
<h3>Form Item</h3>
<p>
Any content can be used in the <code>&lt;vaadin-form-item&gt;</code> element. For instance,
you can add multiple input elements with surrounding text. The label can be any element.
you can add multiple input elements with surrounding text.
</p>
<vaadin-demo-snippet id="form-layout-basic-demos-basic-usage">
<template preserve-content>
<vaadin-form-layout>

<vaadin-form-item>
<label slot="label">First Name</label>
<input class="full-width" value="Jane">
<label slot="label" for="firstname">First Name</label>
<input id="firstname" class="full-width" value="Jane">
</vaadin-form-item>

<vaadin-form-item>
<label slot="label">Last Name</label>
<input class="full-width" value="Doe">
<label slot="label" for="lastname">Last Name</label>
<input id="lastname" class="full-width" value="Doe">
</vaadin-form-item>

<vaadin-form-item>
<label slot="label">Email</label>
<input class="full-width" value="jane.doe@example.com">
<label slot="label" for="email">Email</label>
<input id="email" class="full-width" value="jane.doe@example.com">
</vaadin-form-item>

<vaadin-form-item>
<span slot="label">Date of Birth</span>
<input placeholder="YYYY" size="4"> -
<input placeholder="MM" size="2"> -
<input placeholder="DD" size="2"><br>
<label slot="label">
Date of Birth
</label>

<label>
<input placeholder="YYYY" size="4"> -
<input placeholder="MM" size="2"> -
<input placeholder="DD" size="2">
<em>Example: 1900-01-01</em>
</label>
</vaadin-form-item>

</vaadin-form-layout>
Expand All @@ -53,22 +59,8 @@ <h3>Form Item</h3>
<vaadin-form-layout>

<vaadin-form-item colspan="2">
<label slot="label">Conference Abstract</label>
<textarea rows="6" class="full-width" style="display: inline-flex; vertical-align: top;"></textarea>
</vaadin-form-item>

</vaadin-form-layout>
</template>
</vaadin-demo-snippet>

<p>The label is optional and can be omitted:</p>

<vaadin-demo-snippet id="form-layout-basic-demos-no-label">
<template preserve-content>
<vaadin-form-layout>

<vaadin-form-item>
<input type="checkbox"> Subscribe to our Newsletter
<label slot="label" for="abstract">Conference Abstract</label>
<textarea id="abstract" rows="6" class="full-width" style="display: inline-flex; vertical-align: top;"></textarea>
</vaadin-form-item>

</vaadin-form-layout>
Expand Down
2 changes: 0 additions & 2 deletions test/visual/css-properties.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ <h3>Custom CSS Properties</h3>
<dom-module id="my-form">
<template>
<style>

vaadin-form-layout {
--vaadin-form-layout-column-spacing: 4em;
}
Expand All @@ -36,7 +35,6 @@ <h3>Custom CSS Properties</h3>
--vaadin-form-item-label-spacing: 1em;
--vaadin-form-item-row-spacing: 1.25em;
}

</style>
<vaadin-form-layout>

Expand Down
1 change: 0 additions & 1 deletion theme/material/vaadin-form-layout-styles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<dom-module id="material-form-layout" theme-for="vaadin-form-layout">
<template>
<style>

</style>
</template>
</dom-module>

0 comments on commit 13432bd

Please sign in to comment.