Unclear unavailable affordance with in Add New Test Plan Dialog

[jkva]

When opening the "Add New Test Plan to the Test Queue" dialog, the "Add" button is initially disabled.

The reason for this is that each input field within this dialog has mandatory input requirements; hence the "Add" button becomes available once all input requirements have been satisfied.

From a UX and cognitive accessibility perspective, it is preferred that a data-entry interface notifies the user of its requirements. Hence the "Add" button should be available at all times, and the interface should potentially display one or more requirements that were not met when this button is used. Besides this, required text-input fields (AT Version, Browser Version) should be indicated as requiring mandatory input.

Besides this, the "disabled" styling of such affordances makes them difficult to see.

Proposed modifications:

Since this is not a classic form with submit element, the required attribute on the text input field isn't useful. Hence:

• Indicate each text input field as required via aria-required;
• add a "required" signifier to each required input's label, ignored by AT via aria-hidden;
• enable the "Add" button by default; and
• when the "Add" button is clicked and not all input requirements are unsatisfied, mark these input fields as having insufficient input as such, and move focus to a rendered list of input failures, each item in the list as a link which places focus on the associated input field.