apostrophe icon indicating copy to clipboard operation
apostrophe copied to clipboard

Pro 4440 - accessible/keyboard-able relationship field autocompletes

Open stuartromanek opened this issue 5 months ago • 2 comments

Summary

https://linear.app/apostrophecms/issue/PRO-4440/%5Baccessibility%5D-make-relationship-field-suggestions-accessible

  • Adds relevant aria tags for combo list
  • Adds keyboard controls for making selections via the autocomplete suggestion list

What are the specific steps to test this change?

https://github.com/user-attachments/assets/e98fe742-d973-4838-a847-03852b647a38

  • When you first focus the relationship search input, the suggestion list should appear
  • You should be able to navigate the suggestions with Up and Down arrow keys
  • You should be able to select a suggestion with Enter key
  • The suggestion list can be hidden with Escape
  • If the suggestion list is hidden and the input is focused, you can bring the suggestion list back up with Down or Up arrow keys

What kind of change does this PR introduce?

(Check at least one)

  • [ ] Bug fix
  • [x] New feature
  • [ ] Refactor
  • [ ] Documentation
  • [ ] Build-related changes
  • [ ] Other

Make sure the PR fulfills these requirements:

  • [x] It includes a) the existing issue ID being resolved, b) a convincing reason for adding this feature, or c) a clear description of the bug it resolves
  • [ ] The changelog is updated
  • [ ] Related documentation has been updated
  • [ ] Related tests have been updated

If adding a new feature without an already open issue, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

stuartromanek avatar Sep 16 '24 18:09 stuartromanek