Accessibility fix pass for twenty-ui input components (#21776)
Re-enables the live Storybook axe gate across the twenty-ui `input`
domain (17 story files) by removing the inherited `a11y: { test: 'todo'
}` overrides. Pilot for the wider a11y fix pass; other domains follow
the same playbook.
**What changed**
- Accessible names added to icon-only buttons, `Toggle`, `Checkbox`, and
the button groups via small additive `aria-label`/`ariaLabel` props on 8
components. Where this fully fixes the story, the override is dropped so
the full gate applies.
- Color-contrast (design-token level) is deferred — not changed — via a
new shared `A11Y_DEFER_COLOR_CONTRAST` parameter (`@ui/testing`) that
disables only the `color-contrast` rule while every other axe rule stays
enforced. Grep the constant to find all deferrals when tokens are
darkened later.
- `CatalogDecorator`: unique cell ids (clears `duplicate-id-aria`) and
dimension titles switched from empty `h1/h2/h3` to `div` (clears
`empty-heading`). Both help every domain's catalogs.
**Reviewer notes**
- No visual change: edits are aria / id / story-args / axe-config only,
so Argos parity holds.
- Input axe gate goes from 12 failing to 60/60 passing; typecheck and
lint green.
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21776?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. -->
This commit is contained in:
@@ -14,6 +14,7 @@ export type FloatingButtonProps = {
|
||||
className?: string;
|
||||
Icon?: IconComponent;
|
||||
title?: string;
|
||||
ariaLabel?: string;
|
||||
size?: FloatingButtonSize;
|
||||
position?: FloatingButtonPosition;
|
||||
applyShadow?: boolean;
|
||||
@@ -27,6 +28,7 @@ export const FloatingButton = ({
|
||||
className,
|
||||
Icon,
|
||||
title,
|
||||
ariaLabel,
|
||||
size = 'small',
|
||||
position = 'standalone',
|
||||
applyBlur = true,
|
||||
@@ -46,6 +48,7 @@ export const FloatingButton = ({
|
||||
return (
|
||||
<ButtonComponent
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel}
|
||||
className={clsx(styles.button, styles[size], className)}
|
||||
data-position={position}
|
||||
data-apply-blur={applyBlur || undefined}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
||||
import { IconSearch } from '@ui/icon';
|
||||
import {
|
||||
A11Y_DEFER_COLOR_CONTRAST,
|
||||
CatalogDecorator,
|
||||
type CatalogStory,
|
||||
ComponentDecorator,
|
||||
@@ -44,8 +45,7 @@ export const Catalog: CatalogStory<Story, typeof FloatingButton> = {
|
||||
focus: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
// TODO(a11y): violations inherited from deprecated story; fix during a11y pass
|
||||
a11y: { test: 'todo' },
|
||||
a11y: A11Y_DEFER_COLOR_CONTRAST,
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
|
||||
Reference in New Issue
Block a user