Skip to content

Commit 8e8f365

Browse files
Edward Zarecorclaude
andcommitted
docs(ActionRow): document role=toolbar and aria-label for button group usage
Without guidance, consumers using ActionRow to group interactive controls have no nudge to add ARIA grouping semantics. The added JSDoc shows the recommended pattern (role="toolbar" + aria-label) and notes that both are already accepted via HTMLAttributes — no new props needed. Addresses WCAG 4.1.2 Name, Role, Value and 1.3.1 Info and Relationships. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 3493d3e commit 8e8f365

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

src/ActionRow/index.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
11
import React from 'react';
22
import classNames from 'classnames';
33

4+
/**
5+
* Layout utility that arranges action controls in a horizontal row or vertical stack.
6+
*
7+
* When ActionRow groups interactive controls (buttons, links), add `role="toolbar"`
8+
* and `aria-label` so assistive technology users can identify the group and
9+
* distinguish multiple ActionRows on the same page:
10+
*
11+
* ```jsx
12+
* <ActionRow role="toolbar" aria-label="Form actions">
13+
* <Button variant="tertiary">Cancel</Button>
14+
* <Button variant="primary">Submit</Button>
15+
* </ActionRow>
16+
* ```
17+
*
18+
* Both props are accepted via the standard HTML attributes spread; no extra
19+
* prop definitions are required.
20+
*/
421
interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
522
/** Specifies the base element */
623
as?: React.ElementType;

0 commit comments

Comments
 (0)