Keyboard submission

[DanGastardelli]

References

• Fixes Unable to Navigate Submission Form Using Keyboard Only #4584

Description

The "button" tag was inserted into the file "src/app/shared/collection-dropdown/collection-dropdown.component.html" to allow correct keyboard navigation. The "tabindex" of the "ds-number-picker" tag in the file "src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html" was also modified so that it is possible to choose the date using the keyboard that can be passed from this field and finalize the submission.

Instructions for Reviewers

*Adding the "li" tag on line 30 and replacing "li" that was already in the code with "button" on line 31 in the file "‎src/app/shared/collection-dropdown/collection-dropdown.component.html";

*Changing the value "0" in the "tabindex" of the "Number Picker" component call with the ordered values ​​"1", "2", and "3" in the file "‎src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html".

[tdonohue]

@DanGastardelli : Thanks for this contribution. Unfortunately, though, the PR seems to be erroring out in the build process because our accessibility scanner is throwing an error saying your new tabindex values are accessibility violations. See inline comment below.

[tdonohue]

These changes to the tabIndexes are throwing accessibility violations from our accessibility scanner. This is why the build is failing for this PR. The error says this:

1 accessibility violation was detected
[
  {
    id: 'tabindex',
    impact: 'serious',
    description: 'Ensure tabindex attribute values are not greater than 0',
    helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/tabindex?application=axeAPI',
    nodes: 3,
    html: [
      '<ds-number-picker _ngcontent-dspace-angular-c3081051052="" tabindex="1" _nghost-dspace-angular-c91338046="" class="ng-untouched ng-pristine ng-valid">',
      '<ds-number-picker _ngcontent-dspace-angular-c3081051052="" tabindex="2" _nghost-dspace-angular-c91338046="" class="ng-untouched ng-pristine">',
      '<ds-number-picker _ngcontent-dspace-angular-c3081051052="" tabindex="3" _nghost-dspace-angular-c91338046="" class="ng-untouched ng-pristine">'
    ]
  }
]

It links to this resource which describes that you should try to use tabindex=0 at all times: https://dequeuniversity.com/rules/axe/4.10/tabindex?application=axeAPI

[DanGastardelli]

Understood @tdonohue, I'll see how I can improve this. Thanks for the feedback.

[DanGastardelli]

Hi @tdonohue!

I made a modification that allows tab navigation in the date field, enabling the entry of the complete date using only the keyboard. However, since I had to remove the "blur," the requirement only appears when trying to finalize the submission. Unfortunately, I haven't been able to find another way yet, but for now, it's possible to navigate via tab.

Looking forward to your feedback,

Daniel Pais (Neki-it)