diff --git a/src/ActionRow/README.md b/src/ActionRow/README.md index 7ad955b1e70..7ded8cc2f94 100644 --- a/src/ActionRow/README.md +++ b/src/ActionRow/README.md @@ -18,6 +18,21 @@ in a row in a control bar or nav. ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via `flex-direction: column-reverse;`). +## Accessibility + +When ActionRow groups interactive controls (buttons, links), add `role="group"` and `aria-label` +so assistive technology users can identify the group's purpose and distinguish multiple ActionRows +on the same page: + +```jsx live + + + + +``` + +Both attributes are passed through to the underlying element via the standard HTML attributes spread. + ## Basic Usage ```jsx live diff --git a/src/ActionRow/index.tsx b/src/ActionRow/index.tsx index 5a698762f24..9774e6c4748 100644 --- a/src/ActionRow/index.tsx +++ b/src/ActionRow/index.tsx @@ -1,6 +1,23 @@ import React from 'react'; import classNames from 'classnames'; +/** + * Layout utility that arranges action controls in a horizontal row or vertical stack. + * + * When ActionRow groups interactive controls (buttons, links), add `role="toolbar"` + * and `aria-label` so assistive technology users can identify the group and + * distinguish multiple ActionRows on the same page: + * + * ```jsx + * + * + * + * + * ``` + * + * Both props are accepted via the standard HTML attributes spread; no extra + * prop definitions are required. + */ interface ActionRowProps extends React.HTMLAttributes { /** Specifies the base element */ as?: React.ElementType; @@ -32,7 +49,7 @@ function ActionRow({ } function ActionRowSpacer() { - return ; + return