[Deque Analysis] ARIA / Label Issues in Submission form (Critical)

[tdonohue]

Critical: This issue results in blocked content for people with disabilities, and will definitely prevent them from accessing fundamental features or content. This type of issue puts your organization at risk. Prioritize fixing as soon as possible, within the week if possible. Remediation should be a top priority.

Deque Analysis Summary

Two remaining Submission form critical issues exist after #1252. Both of these seem to be caused by external libraries.

1. (Issue ID: 469503) The aria-multiline attribute is invalid on combobox role (it currently appears for dc.subject field). See https://www.w3.org/TR/wai-aria-1.1/#aria-multiline It should be removed.
   • the aria is added by the ngbTypeahead component,
   • This appears to be dependent on Move away from @ng-dynamic-forms #2216 because the @ng-dynamic-forms library is blocking us from upgrading to the latest version of ng-bootstrap (and Bootstrap 5) where this bug is fixed.
2. (Issue ID: 469538) The <select> for the dc.identifier field doesn't have a <label> or an aria-label attribute.
   • That element is added by the form library

The full list of these issues (which includes links for more info) can be found at this link (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues?activeTab=dt-issue&page=0&pageSize=100&sortField=ordinal&sortDir=asc&row=9&filter%5Bseverity%5D=4&filter%5Bpage_number%5D=10&filter%5Bpage_number%5D=11

More Information / Tools

• Consider using Deque's free Chrome plugin to check your work

[atarix83]

@tdonohue

(Issue ID: 469503) The aria-multiline attribute is invalid on combobox role (it currently appears for dc.subject field). See https://www.w3.org/TR/wai-aria-1.1/#aria-multiline It should be removed.
the aria is added by the ngbTypeahead component,

I've opened an issue to ng-bootstrap, since I don't see other ways to fix this issue

ng-bootstrap/ng-bootstrap#4181

[tdonohue]

@atarix83 : Thanks for letting me know. In that case, we'll wait to see if there's response from ng-bootstrap on how to fix that first issue. If we need to, we can separate that out into a different ticket & make it a lower priority, since it's not something we can take action on.

In that case, I'd just recommend seeing if we can solve
(Issue ID: 469538) The <select> for the dc.identifier field doesn't have a <label> or an aria-label attribute.