keyboard navigation for field selection

[ehconitin]

Adressing #6954
@Bonapara

How about this behaviour? The field wont be selected initially and then it is persistent once selected?

2024-09-10.18-16-32.mp4

Key navigation -
I couldnt show key strokes on screen like u do :)

2024-09-10.18-09-55.mp4

[greptile-apps]

PR Summary

This pull request implements keyboard navigation for field type selection in the data model settings, addressing issue #6954. Key changes include:

• Added keyboard navigation using Tab, Shift+Tab, and Enter keys in SettingsDataModelFieldTypeSelect component
• Introduced new SettingsDataModelHotkeyScope enum for managing hotkey scopes
• Created SettingsDataModelFieldConfigurationForm component for improved field configuration UI
• Updated SettingsObjectNewFieldStep2 to support toggling between field type selection and configuration steps
• Implemented styling updates for focused and active states to improve visual feedback

These changes enhance user experience and accessibility in the custom field creation process, aligning with the desired behavior outlined in the issue.

_{4 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings}

[Bonapara]

As discussed in the video call, let's deactivate the navigation in the breadcrumb step selector when no field type has been selected. Additionally, disable the Cancel and Save buttons on step one!

[ehconitin]

@Bonapara
Thanks for the help, this looks much cleaner! :)

2024-09-11.13-58-00.mp4

[ehconitin]

@lucasbordeau could you please review this one?

Thanks

[lucasbordeau]

Could you please add a story so the coverage gets above 50 % ?

[ehconitin]

@lucasbordeau These already have their corresponding stories!
Not sure if you are asking for something else.

[Bonapara]

@ehconitin, can the Cancel button on step-2 redirect to the Settings > objects > object page and not to step-1?

[ehconitin]

@Bonapara ofcourse!

[bosiraphael]

Enregistrement.de.l.ecran.2024-09-24.a.18.13.41.mov

I find it weird that the field type stays selected when you go back on the field type form even when you hit tab.

[ehconitin]

Enregistrement.de.l.ecran.2024-09-24.a.18.13.41.mov
I find it weird that the field type stays selected when you go back on the field type form even when you hit tab.

Isn't it supposed to stay selected?

 background: ${({ theme, isActive, isFocused }) =>
    isActive
      ? theme.background.quaternary
      : isFocused
        ? theme.background.tertiary
        : theme.background.secondary};

The selected or 'isActive' field uses a quaternary background, while 'isFocused' or hovered fields have a tertiary background. Now that you mention it, it does feel a bit odd, especially since the tertiary and quaternary backgrounds are visually similar in grayscale.
Do you think we should style focused fields differently?

Any thoughts on how we can improve this?

[bosiraphael]

Enregistrement.de.l.ecran.2024-09-24.a.18.13.41.mov
I find it weird that the field type stays selected when you go back on the field type form even when you hit tab.

Isn't it supposed to stay selected?

 background: ${({ theme, isActive, isFocused }) =>
    isActive
      ? theme.background.quaternary
      : isFocused
        ? theme.background.tertiary
        : theme.background.secondary};

The selected or 'isActive' field uses a quaternary background, while 'isFocused' or hovered fields have a tertiary background. Now that you mention it, it does feel a bit odd, especially since the tertiary and quaternary backgrounds are visually similar in grayscale. Do you think we should style focused fields differently?

Any thoughts on how we can improve this?

@Bonapara, what are your thoughts on this?

[ehconitin]

Enregistrement.de.l.ecran.2024-09-24.a.18.13.41.mov
I find it weird that the field type stays selected when you go back on the field type form even when you hit tab.

Isn't it supposed to stay selected?

 background: ${({ theme, isActive, isFocused }) =>
    isActive
      ? theme.background.quaternary
      : isFocused
        ? theme.background.tertiary
        : theme.background.secondary};

The selected or 'isActive' field uses a quaternary background, while 'isFocused' or hovered fields have a tertiary background. Now that you mention it, it does feel a bit odd, especially since the tertiary and quaternary backgrounds are visually similar in grayscale. Do you think we should style focused fields differently?
Any thoughts on how we can improve this?

@Bonapara, what are your thoughts on this?

@Bonapara and I had discussed this earlier - #6969 (comment)

[bosiraphael]

Once we hit tab inside the data model we are stuck inside it and can't reach the menu nor the exit buttons, I'm not sure that it's great for accessibility. What are your thoughts on this @Bonapara?

[ehconitin]

Once we hit tab inside the data model we are stuck inside it and can't reach the menu nor the exit buttons, I'm not sure that it's great for accessibility. What are your thoughts on this @Bonapara?

You mean not accessible through keystrokes right? Yep I agree! I guess its the same reason hotscope was removed from serverless functions in #7235

Could we do something like on pressing esc the hotscope is removed?

[Bonapara]

Once we hit tab inside the data model we are stuck inside it and can't reach the menu nor the exit buttons, I'm not sure that it's great for accessibility. What are your thoughts on this @Bonapara?

Nothing happens if we press Escape?

[ehconitin]

Once we hit tab inside the data model we are stuck inside it and can't reach the menu nor the exit buttons, I'm not sure that it's great for accessibility. What are your thoughts on this @Bonapara?

You mean not accessible through keystrokes right? Yep I agree! I guess its the same reason hotscope was removed from serverless functions in #7235

Could we do something like on pressing esc the hotscope is removed?

I don’t think this would work :( Even if we unscope on Esc, pressing Tab would re-enable the hotkey scope!
@Bonapara, the main issue here is that using Tab becomes restrictive when hotkey scoping is active.

Once we hit tab inside the data model we are stuck inside it and can't reach the menu nor the exit buttons, I'm not sure that it's great for accessibility. What are your thoughts on this @Bonapara?

Nothing happens if we press Escape?

Nope!

[Bonapara]

What do you think is the best option @ehconitin?