Visual field type presentation is misleading in regard of the keyboard interaction

Problem/Motivation

For sighted users it is not apparent that the list of field types is a list of radio buttons - in Claro you have a radio button per field type/field group. Therefore sighted users might expect a different keyboard interaction pattern, they might try to use the tab key as well as the up and down arrow key alongside the left and right arrow keys (check field_types_keyboard_interaction.mp4).

By using the tab key you can see you only get the first field type in focus. then you get to the continue button next, shift tab then gets you first to the last field type telephone number and then out of the grid. If you get now into the grid again by pressing the tab key and then use the arrow keys instead, you would expect maybe the arrow up and down keys would work the same as the arrow left and right keys, but they don’t, only the arrow left and right keys work.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

• Go to admin/structure/types/manage/page/fields/add-field and try to navigate the field type and field group selection by keyboard.

Proposed resolution

• Make the visual presentation and the keyboard interaction pattern consistent. There is already an issue in the core queue: 📌 Grid-style field type keyboard navigation Needs work , but due to the fact that the visual presentation of the field type cards differs for Gin, it might make sense to explore the issue from the perspective of Gin as well.

Remaining tasks

User interface changes

API changes

Data model changes