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. -->
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { clsx } from 'clsx';
|
|
|
|
import { handleClickableElementKeyDown } from '@ui/accessibility/utils/handleClickableElementKeyDown';
|
|
import { Loader } from '@ui/feedback/Loader/Loader';
|
|
import { type ThemeColor } from '@ui/theme';
|
|
import { themeCssVariables } from '@ui/theme-constants';
|
|
import { parseThemeColor } from '@ui/utilities';
|
|
import { isDefined } from '@ui/utilities/utils/isDefined';
|
|
|
|
import styles from './Status.module.scss';
|
|
|
|
type StatusProps = {
|
|
className?: string;
|
|
color: ThemeColor;
|
|
isLoaderVisible?: boolean;
|
|
text: string;
|
|
onClick?: () => void;
|
|
weight?: 'regular' | 'medium';
|
|
};
|
|
|
|
export const Status = ({
|
|
className,
|
|
color,
|
|
isLoaderVisible = false,
|
|
text,
|
|
onClick,
|
|
weight = 'regular',
|
|
}: StatusProps) => {
|
|
const parsedColor = parseThemeColor(color);
|
|
|
|
return (
|
|
<h3
|
|
className={clsx(styles.status, styles[weight], className)}
|
|
onClick={onClick}
|
|
tabIndex={isDefined(onClick) ? 0 : undefined}
|
|
onKeyDown={handleClickableElementKeyDown}
|
|
data-loader-visible={isLoaderVisible || undefined}
|
|
style={
|
|
{
|
|
'--status-background': themeCssVariables.tag.background[parsedColor],
|
|
'--status-text-color': themeCssVariables.tag.text[parsedColor],
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<span className={styles.content}>{text}</span>
|
|
{isLoaderVisible ? <Loader color={color} /> : null}
|
|
</h3>
|
|
);
|
|
};
|