Settings cards should use <a> instead of <div>

[Bonapara]

Current Behavior

The field type Settings cards use a div container.

This concerns the field type settings cards, but not the emails and calendar settings cards in Accounts (which use an <a> tag), even though they share the same component.

Desired Behavior

They should use an <a></a> container for accessibility. Design and behavior should remain the same.

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=35741-193252&node-type=frame&t=YZppWDu8cDmzxDmJ-11

[sachinks07]

@Bonapara, I would like to work on this issue.

[ehconitin]

@sachinks07 Thanks for the interest!
Could you pick another good first issue

[ehconitin]

@Bonapara

These cards are wrapped inside tags because they use an UndecoratedLink component with an href attribute. However, in the field type settings cards, there's no href or navigation link to trigger on click. Instead, they use onClick event handlers for interactivity.

[Bonapara]

Can we either use the <button> tag then or add role="button" in the HTML?

[FelixMalfait]

@ehconitin Actually I just found out we have already have the way to pass the field type through the url so we should be able to change the onClick to a proper link: https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts#L38

As part of the issue, could you please also:

• delete all code related to new-field/step-1 (route declaration, story, page), it isn't used anymore
• new-field/step-2 to just /new-field since there is just one step now

[ehconitin]

looking into it!

[Bonapara]

We could also try to fix this one in the same PR: #6967

[ehconitin]

@Bonapara yes, i will try!

[ehconitin]

@ehconitin Actually I just found out we have already have the way to pass the field type through the url so we should be able to change the onClick to a proper link: https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts#L38

As part of the issue, could you please also:

• delete all code related to new-field/step-1 (route declaration, story, page), it isn't used anymore
• new-field/step-2 to just /new-field since there is just one step now

@FelixMalfait
That hook wasnt working as it supposed to due to changes in SettingsObjectNewFieldStep2, fixed it!
But there are still two steps, let me explain -
step 1 checks if there are any fields hidden, if not skips to step 2
inside step 2 there were 2 sub steps for filed selection and configuration, which has been recently changed to one step.
So, we should not remove step 1 related code right?

[FelixMalfait]

@ehconitin yes we should remove entirely the code related to step1, this step was confusing and we have dropped it, it’s not part of the flow anymore. Thanks!

[ehconitin]

We could also try to fix this one in the same PR: #6967

@Bonapara this issue is redundant now right?

[Bonapara]

If we fix it in this PR, yes! Can you mention it in your PR so it closes both issues?

[ehconitin]

Yup!