Accessibility

The AI button is a native <button> that follows the WAI-ARIA Button pattern and meets WCAG 2.1 AA. Its distinguishing trait — the label collapses out of view at rest and reveals on interaction — is safe for assistive technology because the label is always in the DOM: it is the button’s accessible name whether the button is collapsed or expanded. The three things to get right are a meaningful label, a decorative icon hidden from assistive technology, and enough contrast for both the glyph and the label.

For designers

• The label doubles as the accessible name, so it must stand alone as a meaningful announcement of the control’s purpose (the concierge greeting “Hi, I’m Concierge” identifies the assistant). A screen-reader user hears the label with no visual context, so avoid opaque or truncated wording. Source: WCAG 2.4.4 Link Purpose.
• The reveal is not hover-only: keyboard focus and press expand the button too, so sighted keyboard and touch users can read the label. Don’t gate the label behind pointer hover alone. Source: WCAG 1.4.13 Content on Hover or Focus.
• The glyph must keep at least 3:1 contrast against the fill in every state and on both brands, and the expanded label must meet 4.5:1 as normal text. The Lexus copper fill in particular needs its label checked against the gradient’s lightest stop. Source: WCAG 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast.
• The focus ring must stay visible over both light and dark surfaces — don’t override it. Source: WCAG 2.4.7 Focus Visible.
• The rested circle is 40 × 40, clearing the target-size minimum, so the collapsed control is safe to tap. Source: WCAG 2.5.8 Target Size (Minimum).
• The expand / collapse animation rides the design-system transition-duration tokens, which collapse to ~0 under prefers-reduced-motion: reduce. Source: WCAG 2.3.3 Animation from Interactions.

For developers

The AI button is a native <button>, so it is focusable and keyboard-operable (Enter / Space) with no extra wiring — never style a <div> or <a> to stand in for it. It takes its accessible name from the visible label text, which is always present in the DOM, so no aria-label is required; the decorative glyph carries aria-hidden="true" to stay out of the accessibility tree. Disabled is the native disabled attribute, which also suppresses the expand. The per-element roles, names, and states are in the Labelling elements section below.

Labelling elements

Give every element the role, name, and state assistive technology needs.

Button

The native <button> carries its own role and keyboard operation. Its accessible name comes from the label child — no aria-label needed as long as the label describes the action. Add type="button" so it doesn’t submit a surrounding form.

Icon

The glyph is decorative — mark it aria-hidden="true" so it isn’t announced separately.

Label

The visible label is the accessible name and stays in the DOM even when visually collapsed, so screen readers always announce it. Keep it meaningful on its own.

Disabled

Use the native disabled attribute — not an .is-disabled class — so the control is announced as unavailable and skipped in the tab order.

Source: WCAG 4.1.2 Name, Role, Value.