fix: Make the entire advanced mode toggle container clickable

[Vardhaman619]

In this PR:

• Use a real <input type="checkbox" /> element in the <Toggle /> component
• Create an accessibility module in the twenty-ui package
• Export the VISIBILITY_HIDDEN CSS object to hide visually any element
• Export a <VisibilityHidden /> component from the twenty-ui package to add visually hidden textual information easily
• Export a <VisibilityHiddenInput /> component to create custom form control components easily
• Use a <label> element for the "Advanced:" text; it will naturally toggle the advanced settings

Fixes #7756

[greptile-apps]

PR Summary

This pull request modifies the AdvancedSettingsToggle component to improve usability by making the entire container clickable for toggling advanced mode.

• Added cursor: pointer and flex-grow: 1 to StyledText in AdvancedSettingsToggle.tsx
• Introduced toogleAdvancedMode function to handle click events
• Implemented onClick handler for StyledText to toggle advanced mode
• Enhanced user experience by allowing clicks anywhere in the Advanced Mode container

_{1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[charlesBochet]

I think we should make the Container clickable
@Devessier what's your recommendation here ? use a button?

I feel the "Advanced" is actually a label for the toggle

[Devessier]

Thanks for mentioning me, @charlesBochet.

Indeed, I think we should make the text "Advanced:" a true HTML <label> element. I don't believe the whole container should be clickable, as clicking on a blank space would update the toggle, which might seem strange.
The issue is that the <Toggle /> component is only made of <div> and not a proper <input> element, so using a <label> would do nothing. I had this component on my list of accessibility things to discuss.

See https://github.com/twentyhq/twenty/blob/05e8f8a0b1fd4c0b1e53c289baba3d073565b61a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx

What do you think we should do? I'm happy to discuss short-term/mid-term solutions.

[charlesBochet]

@Vardhaman619 could you update our Toggle component to include a
Take inspiration from chakra ui regarding the html structure

It looks to me that they have an invisible input

[Devessier]

Please note that the styles applied to hide the input are to make it visible only for screen readers (the tool used by people with disabilities to visit websites).

These styles are now normalized and everybody uses the same to hide an element for people not using a screen reader:

// In Tailwind:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Some resources :

• https://webaim.org/techniques/css/invisiblecontent/
• https://tailwindcss.com/docs/screen-readers

[charlesBochet]

We can introduce a component in this case, let's put it in an accessibility folder in twenty-ui

[Devessier]

Chakra UI has two components : VisibilityHidden and VisibilityHiddenInput. (https://v2.chakra-ui.com/docs/components/visually-hidden/usage#visually-hidden-input)

Their VisibilityHidden component renders a <span> as it's usually used to provide little indications to the users, like a hidden label explaining what shows an icon.

[Devessier]

I'm working on it.

[Devessier]

Thank you a lot for your contribution, @Vardhaman619. It was a critical bug fix, and I handled the update.

[oss-gg]

Awarding Vardhaman619: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/Vardhaman619