Raphaël Bosi
1f6c2b89fd
Builds on twenty-ui's existing runtime axe gate by adding a static
enforcement layer and fixing accessibility gaps in shared components.
Color contrast is intentionally out of scope (still deferred via
`A11Y_DEFER_COLOR_CONTRAST`).
## What changed
- **Static guardrails:** enabled oxlint's `jsx-a11y` plugin
(keyboard-operability rules at `error`), and added a custom
`twenty/no-storybook-a11y-disable` rule that blocks `a11y: { test: 'off'
| 'todo' }` so the axe gate can't be silently disabled again.
- **Focus visibility:** wired the existing `focus-ring` mixin into all
buttons for real `:focus-visible` rings (was `outline: none`).
- **Decorative icons:** `aria-hidden` on icons inside labeled buttons
(added to `IconComponentProps` + render sites).
- **Inputs:** accessible-name support on `SearchInput` and `Checkbox`.
- **Interactive components:** `Tag` renders a real `<button>` when
clickable; the non-semantic clickable `div`s (`Avatar`, `Status`,
`ColorSchemeCard`, `NavigationBarItem`, etc.) are now keyboard-operable
via a shared `handleClickableElementKeyDown` helper, role and accessible
name.
## Notes for reviewers
- Two `oxlint-disable` lines remain on genuine non-interactive capture
wrappers (`CodeEditor`, `OverflowingTextWithTooltip`).
- 8 lint warnings remain by design: conditional-interactivity
`no-static-element-interactions` and legitimate `autoFocus` on
`SearchInput`.
- `NavigationBarItem` gained a required `ariaLabel`; its only consumer
(`MobileNavigationBar`) is updated with translated labels.
## Follow-ups (separate PRs)
- Enforced accessible names on icon-only buttons
(`IconButton`/`LightIconButton`) — breaking, ~128 call sites.
- `aria-activedescendant` wiring for the dropdown/listbox keyboard
layer.
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21848?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
77 lines
2.0 KiB
SCSS
77 lines
2.0 KiB
SCSS
// State rules below only assign CSS custom properties; the actual
|
|
// declarations live on the flat .button class so twenty-front
|
|
// styled(LightButton) overrides keep beating them at (0,1,0) specificity,
|
|
// exactly like the legacy single Linaria class did.
|
|
// Cascade order replicates the legacy Linaria color switch precedence:
|
|
// (active || focus) > disabled > accent base — later rules win.
|
|
|
|
.button {
|
|
align-items: center;
|
|
background: transparent;
|
|
border: var(--light-button-border, none);
|
|
border-radius: var(--t-border-radius-sm);
|
|
box-shadow: var(--light-button-box-shadow, none);
|
|
color: var(--light-button-color);
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-family: var(--t-font-family);
|
|
font-weight: var(--t-font-weight-regular);
|
|
gap: var(--t-spacing-1);
|
|
height: 24px;
|
|
padding: 0 var(--t-spacing-2);
|
|
transition: background 0.1s ease;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: var(
|
|
--light-button-hover-bg,
|
|
var(--t-background-transparent-light)
|
|
);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@include focus-ring;
|
|
|
|
&:active {
|
|
background: var(
|
|
--light-button-active-bg,
|
|
var(--t-background-transparent-medium)
|
|
);
|
|
}
|
|
|
|
&[data-disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.button[data-accent='secondary'] {
|
|
--light-button-color: var(--t-font-color-secondary);
|
|
}
|
|
|
|
.button[data-accent='tertiary'] {
|
|
--light-button-color: var(--t-font-color-tertiary);
|
|
}
|
|
|
|
.button[data-disabled] {
|
|
--light-button-color: var(--t-font-color-extra-light);
|
|
--light-button-hover-bg: transparent;
|
|
--light-button-active-bg: transparent;
|
|
}
|
|
|
|
// active || focus turn the text blue even when disabled, matching the legacy
|
|
// switch where the (active || focus) branch came first.
|
|
.button[data-active],
|
|
.button[data-focus] {
|
|
--light-button-color: var(--t-color-blue);
|
|
}
|
|
|
|
// focus is gated by !disabled in the component, like the legacy call-site.
|
|
.button[data-focus] {
|
|
--light-button-border: 1px solid var(--t-color-blue);
|
|
--light-button-box-shadow: 0 0 0 3px var(--t-color-blue3);
|
|
}
|