Highlight incomplete fields

[swashbuck]

Subject of the enhancement

Consider highlighting any incomplete fields. Mostly would apply to components with multiple items like Matching and Text Input.

1. What would the highlight look like? Border, icon, etc.
2. If using a border, it should always have proper contrast with surrounding elements
3. Would this be needed for all question components or just Matching where it would be the most useful? If only used with Matching, does this create an inconsistent UI?

[oliverfoster]

It wonder if we should move the 'has-error` code into core so that the components can implement their own error styling?

Or make matching instructionError aware?

[swashbuck]

It wonder if we should move the 'has-error` code into core so that the components can implement their own error styling?

Not a bad idea to move this to core since we already have showInstructionError() there.

Or make matching instructionError aware?

Yep, then the .has-error styles could be specific to Matching's Less and any other question that wants to use it.

[kirsty-hames]

1. What would the highlight look like? Border, icon, etc.

Border seems to be the standard. Note, this will need to be compatible with Vanilla buttons PR. The PR uses box-shadow for the application of borders so using border should be fine but raising for awareness.

2. If using a border, it should always have proper contrast with surrounding elements

Agreed, and this can be handled via the theme.

3. Would this be needed for all question components or just Matching where it would be the most useful? If only used with Matching, does this create an inconsistent UI?

I think this is most useful for components with multiple questions/entries, as it identifies which of the items require further input. This applies to Matching and Textinput. See below for Textinput example. Please flag if there's other components I've missed.

In addition, if we are going to visually highlight which items require further input then we should do the same programatically? Looking into this, I think aria-invalid would provide this.

Ref: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21
Ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid

[swashbuck]

It wonder if we should move the 'has-error` code into core so that the components can implement their own error styling?

I've created this PR for the has-error class:
adaptlearning/adapt-contrib-core#595

[swashbuck]

1. What would the highlight look like? Border, icon, etc.

Border seems to be the standard. Note, this will need to be compatible with Vanilla buttons PR. The PR uses box-shadow for the application of borders so using border should be fine but raising for awareness.

@kirsty-hames There's also the possibility of a pseudo-element like a ::before element with a border. This would only work if we never show the error border and an icon (ex. marking) at the same time. Otherwise, we may need to account for the icon width which would be difficult. Since the marking / correctness icons are only shown after submission and a successful submission would remove the error border, I don't believe it would be a problem. That said, I'm totally fine using whatever is the simplest and most compatible method.

3. Would this be needed for all question components or just Matching where it would be the most useful? If only used with Matching, does this create an inconsistent UI?

I think this is most useful for components with multiple questions/entries, as it identifies which of the items require further input. This applies to Matching and Textinput. See below for Textinput example. Please flag if there's other components I've missed.

Thanks, I always forget that Text Input can have multiple items. I've updated the ticket description above.

In addition, if we are going to visually highlight which items require further input then we should do the same programatically? Looking into this, I think aria-invalid would provide this.

Nice! I think that would work well here.