fix(frontend): resolve every axe accessibility violation in the component library

Running the stories under axe surfaced real panel defects, not just story cosmetics. FormField never associated its Form.Item label with the wrapped control, so no RHF form field in the panel had a programmatic label; it now generates an id and wires htmlFor. Unnamed controls get accessible names: the prompt and text modal inputs (from the modal title), the client traffic progress bar (used/limit values), the CPU and RAM threshold inputs in the notification groups (event label threaded through the extra renderer), and the JSON editor's contenteditable surface. ConfigBlock's collapse header carried role=button around focusable action buttons; collapsible=header scopes the toggle to the label. Light theme gains contrast-safe tokens shared by the panel and Storybook: darker description, placeholder, error and success text, a darker primary button blue, and a readable gold tag, all meeting the WCAG AA 4.5:1 ratio. The infinity badge swaps a prohibited bare aria-label for role=img.
2026-07-15 00:56:08 +00:00 · 2026-07-14 03:38:14 +02:00
parent df3ba568d1
commit 60316c831f
12 changed files with 42 additions and 11 deletions
@@ -75,6 +75,7 @@ export default function TextModal({ open, onClose, title, content, fileName = ''
        <JsonEditor value={activeContent} readOnly minHeight="240px" maxHeight="60vh" />
      ) : (
        <Input.TextArea
+          aria-label={title}
          value={activeContent}
          readOnly
          autoSize={{ minRows: 10, maxRows: 20 }}