Submission form keyboard navigation accessibility

[dhweddington]

@lgeggleston
Submitted on behalf of University of Virginia (UVA) Library’s Assessment, Communications, and User Experience (ACE) team as part of internal DSpace 9 accessibility audit.

Issue 1: Access Condition Datepicker

Describe the bug

The datepicker component is not fully accessible. Keyboard users cannot open or navigate the calendar dropdown for the access condition types - UVA only and embargo. Also, the date input requires a strict, non‑intuitive date format, or else it will not register the date. No instructions for input formatting is provided before hand, and the error message is not clear on formatting either.

Page

Upload Item (Form)

WCAG Guideline

WCAG 2.1.1, 3.3.1, and 3.3.2

To Reproduce

Relevant code

Grant Access from:
\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<ds-dynamic-date-picker-inline class="ng-star-inserted"\>\<div class="input-group ng-dirty ng-invalid ng-touched"\>\<input ngbdatepicker="" class="form-control ng-untouched ng-pristine ng-invalid" id="accessConditions-0-startDate" name="startDate" placeholder="From" aria-labelledby="label\_startDate"\>\<!----\>\<button type="button" class="btn btn-outline-secondary" aria-labelledby="label\_startDate" aria-disabled="false"\>\<i aria-hidden="true" class="fa-calendar-alt far ng-star-inserted"\>\</i\>\<!----\>\<!----\>\</button\>\</div\>\</ds-dynamic-date-picker-inline\>\<!----\>\</div\>\<small \_ngcontent-dspace-angular-c923424235="" class="text-muted ds-hint ng-star-inserted"\>Select the date from which the related access condition is applied\</small\>\<!----\>\<!----\>\<!----\>\</div\>\<!----\>\<!--→ Grant Access until: \<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<ds-dynamic-date-picker-inline class="ng-star-inserted"\>\<div class="input-group ng-dirty ng-invalid ng-touched"\>\<input ngbdatepicker="" class="form-control ng-untouched ng-pristine ng-invalid" id="accessConditions-0-endDate" name="endDate" placeholder="Until" aria-labelledby="label\_endDate"\>\<!----\>\<button type="button" class="btn btn-outline-secondary" aria-labelledby="label\_endDate" aria-disabled="false"\>\<i aria-hidden="true" class="fa-calendar-alt far ng-star-inserted"\>\</i\>\<!----\>\<!----\>\</button\>\</div\>\</ds-dynamic-date-picker-inline\>\<!----\>\</div\>\<small \_ngcontent-dspace-angular-c923424235="" class="text-muted ds-hint ng-star-inserted"\>Select the date until which the related access condition is applied\</small\>\<!----\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>

Expected behavior

Since calendar dropdowns have known issues with keyboard navigation, 2 short term fixes and a long-term fix:

• Immediate Fix Item 1: Clearly display the required date format next to the field with persistent helper text such as:

“Enter date in YYYY‑MM‑DD format.” This fulfills the requirement to provide clear instructions when input formats are restricted, and allows users to input the date without having to click into the calendar.

• Immediate Fix Item 2: Provide error messages that clearly tell the user what is wrong and how to fix it. It's not enough to say a date is required, it must provide an explanation of how to fix it. “Invalid date. Enter date in YYYY‑MM‑DD format (example: 2026‑02‑18).”

• Long Term Fix: Users must have access via keyboard, so we will eventually need to enable keyboard access to the calendar widget using enter/space and moving with arrow keys.

Suggested fix / example code

Format and Helper text:
\<label for="start-date"\>Start Date\</label\> \<input id="start-date" name="startDate" class="form-control" aria-describedby="start-date-format-error" placeholder="YYYY-MM-DD" (blur)="validateDate($event)"/\> \<!-- Format instructions --\> \<small id="start-date-format-error" class="text-muted"\>Enter date in YYYY-MM-DD format.\</small\> 2. Provide clear error messages: **Please check JS and edit as needed* validateDate(event: any) { const value = event.target.value.trim(); const parsed = new Date(value); // If the date is invalid, show a corrective error message if (isNaN(parsed.getTime())) { this.dateError = 'Invalid date. Enter date in YYYY-MM-DD format (example: 2026-02-18).'; } else { this.dateError = null;}} 3. Keyboard input for calendar dropdown: \<button type="button" aria-label="Open calendar" (keydown.enter)="openCalendar()(keydown.space)="openCalendar()"\>

Issue 2: Date Keyboard Trap (Main Form)

Describe the bug

In Safari, when filling out the form to create/import a new item, the navigation gets stuck around the date picker area. The focus will not tab into the date picker; it goes from the previous form field (Title) to the window. If you click into the date picker and enter dates, you still can't tab into the next form field (Publisher) after the date picker. Additionally, the up/down arrows are not in focus order for safari.

In Chrome, the keyboard navigation is not trapped, but not all the interactive elements receive focus order consistently. The up/down buttons don't always receive focus and are unusable with keyboard navigation.

Page

Upload Item (Form)

WCAG Guideline

WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2

To Reproduce

Relevant code

Start of code snippet:
\<ds-dynamic-form-control-container \_nghost-dspace-angular-c923424235="" class="col-sm-4 d-flex flex-column justify-content-start ng-pristine ng-invalid ng-star-inserted ng-touched"\>\<div \_ngcontent-dspace-angular-c923424235="" class="mb-2 ng-pristine ng-valid ng-touched"\>\<!----\>\<!----\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<ds-date-picker \_nghost-dspace-angular-c495258356="" class="ng-star-inserted" style=""\>\<div \_ngcontent-dspace-angular-c495258356=""\>\<fieldset \_ngcontent-dspace-angular-c495258356="" class="d-flex"\>\<legend \_ngcontent-dspace-angular-c495258356="" id="legend\_dc\_date\_issued" class="ng-star-inserted"\> Date of Issue

Expected behavior

Keyboard traps when tabbing to the date picker (Safari) Likely causes here: tabindex="0" on container custom elements (<ds-number-picker tabindex="0">) makes the host focusable. In Safari, focusing a host element that doesn’t delegate focus (no delegatesFocus) can behave inconsistently and can interact badly with any global key handlers. This can look like “focus disappears” or “jumps to a top-level area.” Key handlers on the component (or higher up in the app shell) may be calling preventDefault() on Tab or Shift+Tab (even unintentionally, e.g., a generic keydown handler intended for arrow keys), which causes traps. Arrow key inconsistencies between fields and states Causes: Inputs are type="text" and rely on custom keydown logic. If the logic differs per field or depends on a “parsed value present” state, you’ll see the “sometimes arrows work, sometimes not” effect. maxlength="6" on Month suggests free text (e.g., “March”), but the buttons say “Increment/Decrement month” (implies numeric). Mixed expectations → inconsistent behavior.

Suggested fix / example code

1. Remove tabindex="0" from non-interactive container: <ds-number-picker> ... </ds-number-picker> Only keep focus on the actual interactive controls (the button and input), not the wrapper component.
2. Don’t add tabindex="0" to native focusable controls Buttons are already focusable. The extra tabindex increases complexity and sometimes reorders focus. <button type="button">...</button>
3. Never call preventDefault() or stopPropagation() for Tab / Shift+Tab In your keydown handlers for the inputs and buttons, always early‑exit on Tab: if (event.key === 'Tab') return; // no preventDefault; allow normal tabbing
4. Make month input consistent with behavior Decide: numeric month (1–12) or named month (Jan…Dec). If you keep increment/decrement, numeric is simplest. If you keep free text (“March”), you cannot have meaningful increment/decrement without mapping—pick one model and stick with it. Remove maxlength="6" on Month if switching to numeric; use type="number" min="1" max="12".Ensure your increment() clamps to min/max to avoid invalid values.

Issue 3: Date Keyboard Trap

Describe the bug

In Safari, when filling out the form to create/import a new person, keyboard navigation gets stuck around the date picker area. The focus will not tab into the date picker; it goes from the previous form field to the window. If you click into the date picker and enter dates, you still can't tab into the next form field after that.

In Chrome, the keyboard navigation is not trapped, but not all the interactive elements receive focus order. The up/down buttons don't receive focus and are unusable with keyboard navigation.

Page

Upload Person (Form)

WCAG Guideline

WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2

To Reproduce

Relevant code

\<ds-date-picker \_nghost-dspace-angular-c495258356="" class="ng-star-inserted"\>\<div \_ngcontent-dspace-angular-c495258356=""\>\<fieldset \_ngcontent-dspace-angular-c495258356="" class="d-flex"\>\<legend \_ngcontent-dspace-angular-c495258356="" id="legend\_person\_birthDate" class="ng-star-inserted"\> Birth date \<!----\>\</legend\>\<!----\>\<ds-number-picker \_ngcontent-dspace-angular-c495258356="" tabindex="0" \_nghost-dspace-angular-c91338046="" class="ng-untouched ng-pristine ng-valid"\>\<div \_ngcontent-dspace-angular-c91338046="" class="d-flex flex-column align-items-center justify-content-around me-3"\>\<button \_ngcontent-dspace-angular-c91338046="" type="button" tabindex="0" class="btn btn-link-focus" aria-disabled="false"\>\<span \_ngcontent-dspace-angular-c91338046="" class="chevron"\>\</span\>\<span \_ngcontent-dspace-angular-c91338046="" class="sr-only"\>Increment year\</span\>\</button\>\<input \_ngcontent-dspace-angular-c91338046="" type="text" class="form-control d-inline-block text-center ng-untouched ng-pristine ng-valid" id="person\_birthDate\_year" size="4" placeholder="Year" title="Year" aria-label="Year" maxlength="4"\>\<button \_ngcontent-dspace-angular-c91338046="" type="button" tabindex="0" class="btn btn-link-focus" aria-disabled="false"\>\<span \_ngcontent-dspace-angular-c91338046="" class="chevron bottom"\>\</span\>\<span \_ngcontent-dspace-angular-c91338046="" class="sr-only"\>Decrement year\</span\>\</button\>\</div\>\</ds-number-picker\>\<ds-number-picker \_ngcontent-dspace-angular-c495258356="" tabindex="0" \_nghost-dspace-angular-c91338046="" class="ng-untouched ng-pristine"\>\<div \_ngcontent-dspace-angular-c91338046="" class="d-flex flex-column align-items-center justify-content-around me-3"\>\<button \_ngcontent-dspace-angular-c91338046="" type="button" tabindex="0" class="btn btn-link-focus disabled" aria-disabled="true"\>\<span \_ngcontent-dspace-angular-c91338046="" class="chevron"\>\</span\>\<span \_ngcontent-dspace-angular-c91338046="" class="sr-only"\>Increment month\</span\>\</button\>\<input \_ngcontent-dspace-angular-c91338046="" type="text" class="form-control d-inline-block text-center ng-untouched ng-pristine" id="person\_birthDate\_month" size="6" placeholder="Month" title="Month" readonly="" aria-label="Month" maxlength="6" disabled=""\>\<button \_ngcontent-dspace-angular-c91338046="" type="button" tabindex="0" class="btn btn-link-focus disabled" aria-disabled="true"\>\<span \_ngcontent-dspace-angular-c91338046="" class="chevron bottom"\>\</span\>\<span \_ngcontent-dspace-angular-c91338046="" class="sr-only"\>Decrement month\</span\>\</button\>\</div\>\</ds-number-picker\>\<ds-number-picker \_ngcontent-dspace-angular-c495258356="" tabindex="0" \_nghost-dspace-angular-c91338046="" class="ng-untouched ng-pristine"\>\<div \_ngcontent-dspace-angular-c91338046="" class="d-flex flex-column align-items-center justify-content-around me-3"\>\<button \_ngcontent-dspace-angular-c91338046="" type="button" tabindex="0" class="btn btn-link-focus disabled" aria-disabled="true"\>\<span \_ngcontent-dspace-angular-c91338046="" class="chevron"\>\</span\>\<span \_ngcontent-dspace-angular-c91338046="" class="sr-only"\>Increment day\</span\>\</button\>\<input \_ngcontent-dspace-angular-c91338046="" type="text" class="form-control d-inline-block text-center ng-untouched ng-pristine" id="person\_birthDate\_day" size="2" placeholder="Day" title="Day" readonly="" aria-label="Day" maxlength="2" disabled=""\>\<button \_ngcontent-dspace-angular-c91338046="" type="button" tabindex="0" class="btn btn-link-focus disabled" aria-disabled="true"\>\<span \_ngcontent-dspace-angular-c91338046="" class="chevron bottom"\>\</span\>\<span \_ngcontent-dspace-angular-c91338046="" class="sr-only"\>Decrement day\</span\>\</button\>\</div\>\</ds-number-picker\>\</fieldset\>\</div\>\<div \_ngcontent-dspace-angular-c495258356="" class="clearfix"\>\</div\>\</ds-date-picker\>

Expected behavior

Keyboard traps when tabbing to the date picker (Safari) Likely causes here: tabindex="0" on container custom elements (<ds-number-picker tabindex="0">) makes the host focusable. In Safari, focusing a host element that doesn’t delegate focus (no delegatesFocus) can behave inconsistently and can interact badly with any global key handlers. This can look like “focus disappears” or “jumps to a top-level area.” Key handlers on the component (or higher up in the app shell) may be calling preventDefault() on Tab or Shift+Tab (even unintentionally, e.g., a generic keydown handler intended for arrow keys), which causes traps. Arrow key inconsistencies between fields and states Causes: Inputs are type="text" and rely on custom keydown logic. If the logic differs per field or depends on a “parsed value present” state, you’ll see the “sometimes arrows work, sometimes not” effect. maxlength="6" on Month suggests free text (e.g., “March”), but the buttons say “Increment/Decrement month” (implies numeric). Mixed expectations → inconsistent behavior.

Suggested fix / example code

1. Remove tabindex="0" from non-interactive container: <ds-number-picker> ... </ds-number-picker>
2. Only keep focus on the actual interactive controls (the button and input), not the wrapper component.
3. Don’t add tabindex="0" to native focusable controls Buttons are already focusable. The extra tabindex increases complexity and sometimes reorders focus. <button type="button">...</button>
4. Never call preventDefault() or stopPropagation() for Tab / Shift+Tab In your keydown handlers for the inputs and buttons, always early‑exit on Tab: if (event.key === 'Tab') return; // no preventDefault; allow normal tabbing
5. Make month input consistent with behavior Decide: numeric month (1–12) or named month (Jan…Dec). If you keep increment/decrement, numeric is simplest. If you keep free text (“March”), you cannot have meaningful increment/decrement without mapping—pick one model and stick with it. Remove maxlength="6" on Month if switching to numeric; use type="number" min="1" max="12".Ensure your increment() clamps to min/max to avoid invalid values.

Issue 4: Access Condition Datepicker

Describe the bug

The datepicker component is not fully accessible. Keyboard users cannot open or navigate the calendar dropdown for the access condition types - UVA only and embargo. Also, the date input requires a strict, non‑intuitive date format, or else it will not register the date. No instructions for input formatting is provided before hand, and the error message is not clear on formatting either.

Page

Upload Person (Form)

WCAG Guideline

WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2

To Reproduce

Relevant code

\<ds-dynamic-form-control-container \_ngcontent-dspace-angular-c3311061650="" \_nghost-dspace-angular-c923424235="" class="mb-3 access-condition-group col ng-untouched ng-pristine ng-valid ng-star-inserted"\>\<div \_ngcontent-dspace-angular-c923424235="" class="ps-1 pe-1 ng-untouched ng-pristine ng-valid"\>\<!----\>\<!----\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<ds-dynamic-form-group class="ng-star-inserted"\>\<div style="width: 100%;"\>\<div role="group" id="accessConditions-0-accessConditionGroup" class="row ng-untouched ng-pristine ng-valid"\>\<ds-dynamic-form-control-container \_nghost-dspace-angular-c923424235="" class="col-12 ng-untouched ng-pristine ng-valid ng-star-inserted"\>\<div \_ngcontent-dspace-angular-c923424235="" class="mb-2 ng-untouched ng-pristine ng-valid"\>\<label \_ngcontent-dspace-angular-c923424235="" class="form-label col-form-label name-label ng-star-inserted" id="label\_name" for="accessConditions-0-name"\>Access condition type\</label\>\<!----\>\<!----\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<dynamic-ng-bootstrap-select class="ng-star-inserted"\>\<select class="form-control ng-untouched ng-pristine ng-valid" id="accessConditions-0-name" name="name" tabindex="0"\>\<option value="0: openaccess" class="ng-star-inserted"\>openaccess\</option\>\<option value="1: UVA Only" class="ng-star-inserted"\>UVA Only\</option\>\<option value="2: embargo" class="ng-star-inserted"\>embargo\</option\>\<option value="3: administrator" class="ng-star-inserted"\>administrator\</option\>\<!----\>\</select\>\<!----\>\</dynamic-ng-bootstrap-select\>\<!----\>\</div\>\<small \_ngcontent-dspace-angular-c923424235="" class="text-muted ds-hint ng-star-inserted"\>Select an access condition to apply on the file once the item is deposited\</small\>\<!----\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\</ds-dynamic-form-control-container\>\<ds-dynamic-form-control-container \_nghost-dspace-angular-c923424235="" class="col-6 ng-untouched ng-pristine ng-valid ng-star-inserted"\>\<div \_ngcontent-dspace-angular-c923424235="" class="mb-2 ng-untouched ng-pristine ng-valid"\>\<label \_ngcontent-dspace-angular-c923424235="" class="form-label col-form-label ng-star-inserted" id="label\_startDate" for="accessConditions-0-startDate"\>Grant access from *\</label\>\<!----\>\<!----\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<ds-dynamic-date-picker-inline class="ng-star-inserted"\>\<div class="input-group ng-untouched ng-pristine ng-valid"\>\<input ngbdatepicker="" class="form-control ng-untouched ng-pristine" id="accessConditions-0-startDate" name="startDate" placeholder="From" aria-labelledby="label\_startDate" disabled=""\>\<!----\>\<button type="button" class="btn btn-outline-secondary disabled" aria-labelledby="label\_startDate" aria-disabled="true"\>\<i aria-hidden="true" class="fa-calendar-alt far ng-star-inserted"\>\</i\>\<!----\>\<!----\>\</button\>\</div\>\</ds-dynamic-date-picker-inline\>\<!----\>\</div\>\<small \_ngcontent-dspace-angular-c923424235="" class="text-muted ds-hint ng-star-inserted"\>Select the date from which the related access condition is applied\</small\>\<!----\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\</ds-dynamic-form-control-container\>\<ds-dynamic-form-control-container \_nghost-dspace-angular-c923424235="" class="col-6 ng-untouched ng-pristine ng-valid ng-star-inserted"\>\<div \_ngcontent-dspace-angular-c923424235="" class="mb-2 ng-untouched ng-pristine ng-valid"\>\<label \_ngcontent-dspace-angular-c923424235="" class="form-label col-form-label ng-star-inserted" id="label\_endDate" for="accessConditions-0-endDate"\>Grant access until *\</label\>\<!----\>\<!----\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<div \_ngcontent-dspace-angular-c923424235=""\>\<ds-dynamic-date-picker-inline class="ng-star-inserted"\>\<div class="input-group ng-untouched ng-pristine ng-valid"\>\<input ngbdatepicker="" class="form-control ng-untouched ng-pristine" id="accessConditions-0-endDate" name="endDate" placeholder="Until" aria-labelledby="label\_endDate" disabled=""\>\<!----\>\<button type="button" class="btn btn-outline-secondary disabled" aria-labelledby="label\_endDate" aria-disabled="true"\>\<i aria-hidden="true" class="fa-calendar-alt far ng-star-inserted"\>\</i\>\<!----\>\<!----\>\</button\>\</div\>\</ds-dynamic-date-picker-inline\>\<!----\>\</div\>\<small \_ngcontent-dspace-angular-c923424235="" class="text-muted ds-hint ng-star-inserted"\>Select the date until which the related access condition is applied\</small\>\<!----\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\</ds-dynamic-form-control-container\>\<!----\>\</div\>\<!----\>\</div\>\</ds-dynamic-form-group\>\<!----\>\</div\>\<!----\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\<!----\>\<!----\>\</div\>\</ds-dynamic-form-control-container\>

Expected behavior

Since calendar dropdowns have known issues with keyboard navigation, I am providing a 2 required immediate fixes, and a post-launch longterm fix.

• Immediate Fix Item 1: Clearly display the required date format next to the field with persistent helper text such as:

“Enter date in YYYY‑MM‑DD format.” This fulfills the requirement to provide clear instructions when input formats are restricted, and allows users to input the date without having to click into the calendar.

• Immediate Fix Item 2: Provide error messages that clearly tell the user what is wrong AND how to fix it. It's not enough to say a date is required, it must provide an explanation of how to fix it.

“Invalid date. Enter date in YYYY‑MM‑DD format (example: 2026‑02‑18).”

• Long Term Fix: Users must have access via keyboard, so we will eventually need to enable keyboard access to the calendar widget using enter/space and moving with arrow keys.

Suggested fix / example code

Format and Helper text:

\<label for="start-date"\>Start Date\</label\> \<input id="start-date" name="startDate" class="form-control" aria-describedby="start-date-format-error" placeholder="YYYY-MM-DD" (blur)="validateDate($event)" /\> \<!-- Format instructions --\> \<small id="start-date-format-error" class="text-muted"\> Enter date in YYYY-MM-DD format. \</small\> 2. Provide clear error messages: **Please check JS and edit as needed* validateDate(event: any) { const value = event.target.value.trim(); const parsed = new Date(value); // If the date is invalid, show a corrective error message if (isNaN(parsed.getTime())) { this.dateError = 'Invalid date. Enter date in YYYY-MM-DD format (example: 2026-02-18).'; } else { this.dateError = null; } } 3. Keyboard input for calendar dropdown: \<button type="button" aria-label="Open calendar" (keydown.enter)="openCalendar()" (keydown.space)="openCalendar()" \>

Related work

#4584