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. -->
111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
import { definePlugin } from '@oxlint/plugins';
|
|
|
|
import {
|
|
rule as componentPropsNaming,
|
|
RULE_NAME as componentPropsNamingName,
|
|
} from './rules/component-props-naming';
|
|
import {
|
|
rule as effectComponents,
|
|
RULE_NAME as effectComponentsName,
|
|
} from './rules/effect-components';
|
|
import {
|
|
rule as enforceModuleBoundaries,
|
|
RULE_NAME as enforceModuleBoundariesName,
|
|
} from './rules/enforce-module-boundaries';
|
|
import {
|
|
rule as folderStructure,
|
|
RULE_NAME as folderStructureName,
|
|
} from './rules/folder-structure';
|
|
import {
|
|
rule as graphqlResolversShouldBeGuarded,
|
|
RULE_NAME as graphqlResolversShouldBeGuardedName,
|
|
} from './rules/graphql-resolvers-should-be-guarded';
|
|
import {
|
|
rule as injectWorkspaceRepository,
|
|
RULE_NAME as injectWorkspaceRepositoryName,
|
|
} from './rules/inject-workspace-repository';
|
|
import {
|
|
rule as matchingStateVariable,
|
|
RULE_NAME as matchingStateVariableName,
|
|
} from './rules/matching-state-variable';
|
|
import {
|
|
rule as maxConstsPerFile,
|
|
RULE_NAME as maxConstsPerFileName,
|
|
} from './rules/max-consts-per-file';
|
|
import {
|
|
rule as noDataMutationInFastInstanceCommand,
|
|
RULE_NAME as noDataMutationInFastInstanceCommandName,
|
|
} from './rules/no-data-mutation-in-fast-instance-command';
|
|
import {
|
|
rule as noDirectAtomFamilyInSelector,
|
|
RULE_NAME as noDirectAtomFamilyInSelectorName,
|
|
} from './rules/no-direct-atom-family-in-selector';
|
|
import {
|
|
rule as noHardcodedColors,
|
|
RULE_NAME as noHardcodedColorsName,
|
|
} from './rules/no-hardcoded-colors';
|
|
import {
|
|
rule as noJotaiStoreInSelector,
|
|
RULE_NAME as noJotaiStoreInSelectorName,
|
|
} from './rules/no-jotai-store-in-selector';
|
|
import {
|
|
rule as noNavigatePreferLink,
|
|
RULE_NAME as noNavigatePreferLinkName,
|
|
} from './rules/no-navigate-prefer-link';
|
|
import {
|
|
rule as noStateUseref,
|
|
RULE_NAME as noStateUserefName,
|
|
} from './rules/no-state-useref';
|
|
import {
|
|
rule as noStorybookA11yDisable,
|
|
RULE_NAME as noStorybookA11yDisableName,
|
|
} from './rules/no-storybook-a11y-disable';
|
|
import {
|
|
rule as preferWorkspaceScopedRepository,
|
|
RULE_NAME as preferWorkspaceScopedRepositoryName,
|
|
} from './rules/prefer-workspace-scoped-repository';
|
|
import {
|
|
rule as restApiMethodsShouldBeGuarded,
|
|
RULE_NAME as restApiMethodsShouldBeGuardedName,
|
|
} from './rules/rest-api-methods-should-be-guarded';
|
|
import {
|
|
rule as sortCssPropertiesAlphabetically,
|
|
RULE_NAME as sortCssPropertiesAlphabeticallyName,
|
|
} from './rules/sort-css-properties-alphabetically';
|
|
import {
|
|
rule as styledComponentsPrefixedWithStyled,
|
|
RULE_NAME as styledComponentsPrefixedWithStyledName,
|
|
} from './rules/styled-components-prefixed-with-styled';
|
|
import {
|
|
rule as upgradeCommandFilename,
|
|
RULE_NAME as upgradeCommandFilenameName,
|
|
} from './rules/upgrade-command-filename';
|
|
|
|
export default definePlugin({
|
|
meta: { name: 'twenty' },
|
|
rules: {
|
|
[componentPropsNamingName]: componentPropsNaming,
|
|
[effectComponentsName]: effectComponents,
|
|
[enforceModuleBoundariesName]: enforceModuleBoundaries,
|
|
[folderStructureName]: folderStructure,
|
|
[graphqlResolversShouldBeGuardedName]: graphqlResolversShouldBeGuarded,
|
|
[injectWorkspaceRepositoryName]: injectWorkspaceRepository,
|
|
[matchingStateVariableName]: matchingStateVariable,
|
|
[maxConstsPerFileName]: maxConstsPerFile,
|
|
[noDataMutationInFastInstanceCommandName]:
|
|
noDataMutationInFastInstanceCommand,
|
|
[noDirectAtomFamilyInSelectorName]: noDirectAtomFamilyInSelector,
|
|
[noHardcodedColorsName]: noHardcodedColors,
|
|
[noJotaiStoreInSelectorName]: noJotaiStoreInSelector,
|
|
[noNavigatePreferLinkName]: noNavigatePreferLink,
|
|
[noStateUserefName]: noStateUseref,
|
|
[noStorybookA11yDisableName]: noStorybookA11yDisable,
|
|
[preferWorkspaceScopedRepositoryName]: preferWorkspaceScopedRepository,
|
|
[restApiMethodsShouldBeGuardedName]: restApiMethodsShouldBeGuarded,
|
|
[sortCssPropertiesAlphabeticallyName]: sortCssPropertiesAlphabetically,
|
|
[styledComponentsPrefixedWithStyledName]:
|
|
styledComponentsPrefixedWithStyled,
|
|
[upgradeCommandFilenameName]: upgradeCommandFilename,
|
|
},
|
|
});
|