Fix submission form's "serious" accessibility issues

[AndreaBarbasso]

References

• Fixes [Deque Analysis] Submission form's "serious" accessibility issues #1187
• Requires Change style for date pickers DSpace#11450

Description

Added a11y features for "serious" problems occurring in the submission form.

Instructions for Reviewers

List of changes in this PR:

• Added necessary aria attributes in order to pass axe accessibility tests;
• Implemented live region messages for the upload progressbar and for submission error messages.

To test/review the PR, check that the functionality of the submission form has not been altered, and that a11y tests now do not contain serious issues.

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using npm run lint
• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• My PR aligns with Accessibility guidelines if it makes changes to the user interface.
• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[github-actions]

Hi @AndreaBarbasso,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[tdonohue]

@AndreaBarbasso : Apologies for the delay in reviewing this, but I've finally gotten around to testing/reviewing this with the backend PR. Overall, it looks great. However, I think I've found a bug where the "Live Region" isn't updating itself in a timely manner.

Here's what I'm doing:

1. Login as an Admin and start a new submission
2. Open your browser DevTools, and use the "Elements" tab to view the HTML source of the submission form. Find the "" tag, so that you can watch what appears in that region. Initially it'll be empty.
3. Now, in the submission form. Just fill out an Author in the first section and upload a file.
4. In the "" tag, you'll see the upload successful message and error messages for the other required fields (e.g. title, date, type, and license field).
5. Now, add a Title and Date. Upload another file.
6. The "" tag will show a confirmation of file upload. But, you won't see errors for the other fields that are missing (Type and License)
7. Now add a Type and click "Save".
8. The "" will not display the License error even though it's visible on the page.

Essentially, the Live Region doesn't seem to be "synced" with what is visible on the page. There are times that it's correct, but if you add a missing field and save quickly, you'll still see other errors on the page but they'll disappear from the Live Region.

I've verified also that all the accessibility issues except one are fixed in #1187. The only one which is not fixed is this one:

(ID 469928) "Non-decorative content is inserted using CSS pseudo-elements." affects several icons in the form : (1) draggable icon for reordering values
In that case, the draggable icon (for reordering authors, etc) still is using CSS ::before pseudo element. This is optional to fix in this PR, but I wanted to note that it's still appearing.

Everything else though looks good. I've checked everything else listed in #1187 and it's all fixed.

[github-actions]

Hi @AndreaBarbasso,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!