Form Error Msg Handling

dubrod commented 9 years ago

We need better, more distinct error messaging on all forms. IE - ARIA labels and focus http://webaim.org/techniques/formvalidation/

dubrod commented 8 years ago

@theboxer can we start by trying to fix the # 1 error when adding a new resource?

add aria-required
add aria-describedby when error happens, error DIV needs a unique ID
re-focus the Page title input field
add aria-live="assertive" to error div

<input aria-required="true" aria-labelledby="" type="text" size="20" autocomplete="on" msgtarget="under" id="modx-resource-pagetitle" name="pagetitle" class="x-form-text x-form-field x-form-invalid" title="" style="width: 772px;">
<div class="x-form-invalid-msg" id="ext-gen379" style="width: 744px; display: block;" aria-live="assertive">This field is required</div>

theboxer commented 8 years ago

I tried to cover all 4 bullets on resource pagetitle field. Can you please verify it's working as it should?

dubrod commented 8 years ago

the markup looks correct to me

<input 
    type="text" size="20" autocomplete="on" 
    msgtarget="under" 
    id="modx-resource-pagetitle" 
    name="pagetitle" 
    class="x-form-text x-form-field x-form-invalid" 
    aria-describedby="ext-gen278" aria-required="true" style="width: 676px;">

<div class="x-form-invalid-msg" id="ext-gen278" aria-live="assertive" style="width: 648px; display: block;">This field is required</div>

@paulbohman @kensgists can we get a real world test ?

add new resource page
Page title input should have error aria labels

modxcms / a11y

Form Error Msg Handling #31