メニュー
Guides accessibility review and implementation for FigUI3 web components and playground examples. Use when the user mentions accessibility, a11y, ARIA, screen readers, keyboard navigation, focus rings, labels, roles, disabled states, contrast, dialogs, menus, or form control semantics.
| name | a11y |
| description | Guides accessibility review and implementation for FigUI3 web components and playground examples. Use when the user mentions accessibility, a11y, ARIA, screen readers, keyboard navigation, focus rings, labels, roles, disabled states, contrast, dialogs, menus, or form control semantics. |
Use this skill when adding, reviewing, or debugging accessibility behavior in FigUI3.
button, input, dialog, and real focus behavior where possible.disabled syncs to aria-disabled where the element is not natively disableable.aria-*, role, and tabindex are updated when attributes change dynamically.<dialog is="fig-dialog"> and <dialog is="fig-popup"> preserve native dialog behavior.For non-native interactive custom elements:
const disabled =
this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
if (disabled) {
this.setAttribute("aria-disabled", "true");
this.setAttribute("tabindex", "-1");
} else {
this.removeAttribute("aria-disabled");
this.setAttribute("tabindex", "0");
}
If a component uses roving tabindex, keep inactive and disabled items at tabindex="-1".
Prefer existing token patterns:
&:focus-visible,
&[data-focus-visible] {
outline: 0;
box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
}
If focus lands on a hidden native input, apply the ring to the visible host surface:
fig-button:has(> input:focus-visible) {
outline: 0;
box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
}
role="menu".role="menuitem".aria-disabled="true" and should not be included in roving keyboard focus.<dialog is="fig-dialog"> for dialog workflows.<dialog is="fig-popup"> for anchored popup surfaces.aria-label="Close dialog".close/cancel behavior unless intentionally overridden.When reviewing a11y work, lead with concrete issues:
Include the component and file path for each finding.
Guides CSS rendering and layout performance tests for component UIs. Use when checking selector cost, layout thrash, paint work, animation smoothness, CSS containment, computed styles, or visual regressions caused by CSS changes.
Guides browser-based performance testing for HTML, CSS, JavaScript, and UI interactions. Use when measuring frontend performance, adding Playwright perf tests, checking regressions, profiling load/render/interaction cost, or discussing performance budgets.
Guides JavaScript runtime performance testing for frontend components. Use when profiling event handlers, DOM update loops, memory leaks, timers, animation frames, pointer/keyboard interactions, or regressions in vanilla JS component code.
Guides performance testing for native Web Components and custom elements. Use when measuring custom element registration, upgrade cost, connected/disconnected callbacks, attributeChangedCallback churn, Shadow DOM work, slots, or fig-* component scalability.
Guides CSS and layout tests for FigUI3 components. Use when validating component CSS, nested selectors, tokens, interaction states, computed styles, layout boxes, or visual regressions.
Guides real-browser tests for FigUI3 custom elements. Use when adding or debugging tests for fig-* web components, attribute/property contracts, value synchronization, event payloads, disabled behavior, or custom element registration.