Text input demo code is not accessible

[Vinnl]

The Text Input atom's documentation currently includes the following demo code:

<section class="grid grid__two-column demo">
	<section>
		<div class="input-wrap"><label>Label:</label><input type="text" placeholder="First Name"/></div>
		<div class="input-wrap"><label>Label:</label><input type="text" placeholder="Placeholder Text" active/></div>
		<div class="input-wrap"><label>Label:</label><input type="text" placeholder="Placeholder Text" invalid/></div>
		<div class="input-wrap"><label>Label:</label><input type="text" placeholder="Placeholder Text" readonly/></div>
	</section>
	<section>
		<div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-lock"></span></label><input readonly="" type="text" placeholder="Placeholder Text" /></div>
		<div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-lock"></span></label><input  type="text" placeholder="Placeholder Text"/></div>
		<div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-user"></span></label><input type="text" placeholder="Placeholder Text" active/></div>
		<div class="input-wrap input-wrap--inline"><label><span class="icon fa fa-file"></span></label><input type="text" placeholder="Placeholder Text" invalid/></div>

	</section>
</section>

Here, the <label> elements are not associated with their respective <input>s (so I can't click the label to focus the input). Either the labels need a for attribute referring to the input's id, or the input should be wrapped inside the label.