e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make TextInput label real, add aria-label to icon buttons

Browse source
This commit is contained in:
Ken-Håvard Lieng 2020-05-12 07:48:12 +02:00
parent 9581a63e81
commit 4b8491cf99
7 changed files with 124 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/js/components/ui/Checkbox.js
View file

@ -1,9 +1,9 @@
import React from 'react';
import classnames from 'classnames';
const Checkbox = ({ name, label, topLabel, ...props }) => (
const Checkbox = ({ name, label, topLabel, classNameLabel, ...props }) => (
<label
className={classnames('checkbox', {
className={classnames('checkbox', classNameLabel, {
'top-label': topLabel
})}
htmlFor={name}

10
client/js/components/ui/TextInput.js
View file

@ -58,6 +58,7 @@ export default class TextInput extends PureComponent {
className={field.value && 'value'}
type="text"
name={name}
id={name}
autoCapitalize="off"
autoCorrect="off"
autoComplete="off"
@ -100,16 +101,17 @@ export default class TextInput extends PureComponent {
}
}}
/>
<span
className={classnames('textinput-1', {
<label
htmlFor={name}
className={classnames('textinput-label', 'textinput-1', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}
>
{label}
</span>
</label>
<span
className={classnames('textinput-2', {
className={classnames('textinput-label', 'textinput-2', {
value: field.value,
error: form.touched[name] && form.errors[name]
})}