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>
This commit is contained in:
committed by
GitHub
parent
1a0b387282
commit
1466d44b57
@ -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;
|
||||
`;
|
||||
Reference in New Issue
Block a user