Crate ReNew Updates

DESIGN APPROVED. DEV PENDING. Keir has signed off on Design. Awaiting implementation timeline.

DESIGN APPROVED. DEV COMPLETE. Codebase has been updated.

• TBD: bold field text?

Text Fields

Select / Drop Down Fields

Textarea Fields

Checkboxes

Radio Buttons

Form Element Class Names

Input Elements

<label for="input-example">Input Label <span class="required">Required</span>
<input id="input-example" class="input-md" />

• input-xs
• input-sm
• input-md
• input-lg
• input-xl

Select / Drop Down Elements

<label for="select-example">Select Label <span class="required">Required</span>
<select id="select-example" class="select-md"></select>

• select-xs
• select-sm
• select-md
• select-lg
• select-xl

Textarea Elements

<label for="textarea-example">Textarea Label <span class="required">Required</span>
<textarea id="textarea-example" class="input-md" rows="3"></textarea>

• textarea-xs
• textarea-sm
• textarea-md
• textarea-lg
• textarea-xl

Checkboxes

Input element and label must be immediate siblings. Input element must occur first.

<input id="checkbox1" type="checkbox" class="a11y-checkbox" />
<label for="checkbox1" class="a11y-checkbox-label">Checkbox Label</label>

• a11y-checkbox
• a11y-checkbox-label

Radio Buttons

Input element and label must be immediate siblings. Input element must occur first.

<input id="radio1" type="radio" class="a11y-radio" />
<label for="radio1" class="a11y-radio-label">Radio Button Label</label>

• a11y-radio
• a11y-radio-label

Example

Accessibility Checklist:

Form Validation

• If the form contains errors, a general summary should appear at the beginning of the form.
  • This summary validation element should be empty be default and have text dynamically injected only when an attempting to submit the form with errors. This text may be generic, for example, "Please correct the errors below and resubmit." Consult with UX for recommended phrasing.
  • Keyboard focus should be set to the summary validation element.
• The form fields with errors should have aria-invalid="true" added to them.
  • If the form is resubmitted, those fields that are now valid should either remove this attribute completely or swap the value to false.

Examples:

<div class="validation" id="error-summary" role="alert" tabindex="-1"></div>

<input id="FirstName" aria-invalid="true" />

Text Inputs, Drop Downs, Textareas, Checkboxes, Radio Buttons

• An accessible label is required for every field.
  • The label should have a for attribute whose value matches the id of the corresponding form element.
• Required fields should be clearly be indicated.
  • The "required" text in the label is good and is a best practice.
  • We must also use the required attribute on the form elements on any required fields.
• Color
  • Non-disabled form element borders and text must meet contrast ratio 4.5:1.
  • Focus state cannot be indicated by color alone.
  • Error state cannot be indicated by color alone.
• Inline error messages must be properly associated with the respective form element.
  • This can be done by adding a unique id to the span that will hold the error message and adding aria-describedby to the form element.
  • This span must be empty and have the content injected to prevent the error message from being read prematurely.
• A change of context must not be auto-initiated. For example: drop downs, checkboxes, or radio buttons must not automactically refresh the context via onchange event handlers.

Example:

<label for="FirstName">
    First Name
    <span class="required">Required</span>
</label>
<input id="FirstName"
    name="FirstName"
    type="text"
    maxlength="20"
    autocomplete="shipping given-name"
    class="input-md"
    value=""
    data-val="true"
    required
    data-val-required="&lt;span class='val-error-icon'&gt;Error:&lt;/span&gt;The First Name field is required."
    aria-describedby="FirstNameErrorMsg" />
<span id="FirstNameErrorMsg"
    class="field-validation-valid"
    data-valmsg-for="FirstName"
    data-valmsg-replace="true"></span>

To Do:

• Error states and summary area are still in development!

  ERROR SUMMARY MESSAGE

  We should have a error summary area above the form. This can contain a general "Please correct the errors below and resubmit" message. (Actual text TBD. Consult UX.) This area shoud gain focus when the form is submitted with errors so that the user may easily tab forward through the form to correct any items.

  Older drafts, that will be moved and updated to here, for this can be found at:

  • DRAFT - Crate GR Create Registry Step 1
  • DRAFT - Crate GR Create Registry Step 2

  INLINE ERROR MESSAGES

  We need to either:

  1. Add an error icon to the message
  2. Add the word "Error" to the message

  I recommend Option 1, it's less cognitive load to scan the page and understand the errors that way. The icon needs to be added in such a way that the word "Error" is still available to screen reader users, however.

• Update placeholder color and opacity. (To meet contrast ratio requirement.) Done here, need to add to codebase after giving designers the heads up.
• Add <label> information.