Skip to content
@erikakers/slate

Form controls

input, select, textarea, fieldset, legend, label, and the two states a reader has to be able to see. No type of Slate's own on any control: @erikakers/typography's reset gives every one of them font: inherit for WCAG 1.4.12, and a role written here would take that override straight back out.

Text controls

Your detailsWe use it to reply, and for nothing else.

Why legend takes h6

legend is the third of @erikakers/typography's "not yet covered" elements, for the same reason as summary: a <legend> is the accessible name of a <fieldset>, announced with every control inside it: it names a group, and is a heading in everything but the tag. Same role, same reason, arrived at independently. The spacing Slate writes for it is inline rather than block: padding-inline so the text has air where it interrupts the fieldset's border, and a matching negative margin-inline-start so the legend's text lines up with the group's content while its background still cuts the border cleanly.

Disabled, without colour alone

The state is carried by border-style: dashed: a texture difference that survives greyscale, every colour vision deficiency and a forced-colours mode (WCAG 1.4.1). Not opacity: at 45% the control boundary composited from 3.69:1 to 1.67:1 light, well under the 3:1 a control needs to be found at all: a disabled control is exempt from 1.4.11, which is not a reason to make it unreadable.

Disabled

Invalid, without colour alone

:user-invalid, never :invalid: :invalid matches a required empty field from the moment the page loads, marking every answer wrong before the reader has typed a character. :user-invalid waits until the reader has interacted with the control and the value has been checked. The state is carried by colour and a doubled border weight (the weight is what survives greyscale), and even that is only half of WCAG 3.3.1: a border of any colour or weight says where the error is and cannot say what it is, so the message (.slate-field-error, wired with aria-describedby) is the other half. Slate ships the styling; only the author can ship the sentence.

Try itEnter an email address, like you@example.com.

Handed back to the platform

Nine input types are handed back to the UA with revert, plus accent-color: a checkbox, a radio, a range, a colour well, a file picker and an image button stay at the platform's own rendering in every state, because a hand-drawn box loses the platform's forced-colours behaviour. submit, reset and button go one step further and are drawn as the button component, because they are buttons.

Handed back

Keyboard interaction

  • Tab/Shift+Tab move between controls in document order, including a disabled one being skipped entirely.
  • Typing fills a text field; a checkbox or radio toggles on Space; a radio group cycles on the arrow keys.
  • <label> wraps its control, so clicking or tapping the label text focuses the field: no for/id pair required, though one still works.
  • A disabled control is entirely removed from the tab order: the UA's own behaviour, not something this layer adds or removes.