AI tool generated our new component library. Then the accessibility audit came back with 143 issues

회사 이름은 말 못 하지만... big portal company, React + TS. We had a deadline (always deadline) for new design system components. Management bought an AI tool that generates components from Figma, and the team was told: use it, ship faster.

We shipped faster. 진짜 빨랐어요. 3 weeks instead of 8.

Then the accessibility audit. 143 issues on the first 12 components. Some examples:

• Buttons were divs. <div onClick={...}> with no role, no tabIndex, no keyboard handler. Cannot reach with Tab. Cannot press with Enter or Space.
• Focus outline removed globally. *:focus { outline: none; } in the generated base CSS. Keyboard users cannot see where they are.
• Icon buttons with no label. Screen reader says "button" and nothing else. 32 of them.
• Modal with no focus trap. Tab goes behind the dialog. Escape does nothing.
• Placeholder used as label in every input. Disappears when you type. Also low contrast grey.
• Custom select built from divs, no listbox role, no arrow key support. Native select would be fine...

What we did

npm i -D eslint-plugin-jsx-a11y @axe-core/playwright

• eslint-plugin-jsx-a11y in CI. click-events-have-key-events and no-static-element-interactions alone found 60+.
• axe checks in Playwright for every Storybook story:

import { test, expect } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'

test('primary button has no a11y violations', async ({ page }) => {
  await page.goto('/iframe.html?id=button--primary')
  const results = await new AxeBuilder({ page }).analyze()
  expect(results.violations).toEqual([])
})

• Replaced div buttons with <button type="button">. Native <dialog> for the modal, native select where the design allowed it.
• Focus style back: :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

Fixing took 4 weeks. So total 7 weeks instead of 8. AI saved us 1 week, and we almost shipped components that many people cannot use at all.

I am not against the tool... the theme tokens it made were okay. But "looks finished" is not finished. And nobody in management asked "can a blind person use this". 솔직히 좀 지쳤어요. 야근 3주. ㅠㅠ