fix: Make the entire advanced mode toggle container clickable (#7761)

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

---------

Co-authored-by: Devessier <baptiste@devessier.fr>

packages/twenty-ui/src/accessibility/components/VisibilityHidden.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { VISIBILITY_HIDDEN } from '@ui/accessibility/utils/visibility-hidden';
+
+const StyledSpan = styled.span`
+  ${VISIBILITY_HIDDEN}
+`;
+
+export const VisibilityHidden = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <StyledSpan>{children}</StyledSpan>;
+};

packages/twenty-ui/src/accessibility/components/VisibilityHiddenInput.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { VISIBILITY_HIDDEN } from '@ui/accessibility/utils/visibility-hidden';
+
+// eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled
+export const VisibilityHiddenInput = styled.input`
+  ${VISIBILITY_HIDDEN}
+`;

packages/twenty-ui/src/accessibility/index.ts

@@ -0,0 +1,3 @@
+export * from './components/VisibilityHidden';
+export * from './components/VisibilityHiddenInput';
+export * from './utils/visibility-hidden';

packages/twenty-ui/src/accessibility/utils/visibility-hidden.ts

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+
+export const VISIBILITY_HIDDEN = css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+`;

packages/twenty-ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './accessibility';
 export * from './components';
 export * from './display';
 export * from './layout';