Skip to content

[C2] Improve forms keyboard shortcuts #6997

@ywarnier

Description

@ywarnier

This is a generic task to improve the keyboard navigability of Chamilo 2.

In Chamilo 1, pretty much any screen is keyboard-navigable, which add to accessibility as it allows for screen-readers to be used, as well as for devices without a mouse or a touch screen in general.
If I'm on the course creation page, for example, the cursor is immediately active in the most important field of the page (the course title) and if I press the "tab" key, the "Advanced parameters" button gets highlighted. If I press once more, the "Create" button gets highlighted, and then if I press more I eventually loop back to the main menu items and can select any of them through the keyboard.

Image Image

If I press enter when the cursos is in the title field, and considering there is no other mandatory field, the form is submitted, which is great.

In Chamilo 2, although the "tab" key does iterate through all elements of the form, then navigation elements (at least I think so), there is absolutely no visual clue that those elements are selected. This has to be fixed.

Also:

  • when I load the page for the first time, the cursor is not positioned into the title field
  • when I press enter after giving a title, the form is not sent (nothing happens)
Image

So this task has 3 elements to it, and let's focus on the course creation form first and then develop the model for all other forms:

  • make elements highlight somehow (can be a light dotted line below them or around them) when selected through tabs (or other keyboard shortcuts)
  • activate/select by default the title field or the first visible field for any form
  • allow the "Enter" key to be considered as a submit signal for the form

Do that in one separate commit for the course creation form, and then we can work as several people to replicate to other forms as we work on them.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions