E0d/fix actionrow a11y

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
+<ActionRow role="group" aria-label="Form actions">
+  <Button variant="tertiary">Cancel</Button>
+  <Button variant="primary">Submit</Button>
+</ActionRow>
+```
+
+Both attributes are passed through to the underlying element via the standard HTML attributes spread.
+
 ## Basic Usage
 
 ```jsx live

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
+ * <ActionRow role="toolbar" aria-label="Form actions">
+ *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="primary">Submit</Button>
+ * </ActionRow>
+ * ```
+ *
+ * Both props are accepted via the standard HTML attributes spread; no extra
+ * prop definitions are required.
+ */
 interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
   /** Specifies the base element */
   as?: React.ElementType;
@@ -32,7 +49,7 @@ function ActionRow({
 }
 
 function ActionRowSpacer() {
-  return <span className="pgn__action-row-spacer" />;
+  return <span className="pgn__action-row-spacer" aria-hidden="true" />;
 }
 
 ActionRow.Spacer = ActionRowSpacer;

src/Alert/__snapshots__/Alert.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`<Alert /> renders with button and dismissible props 1`] = `
       className="pgn__alert-actions pgn__action-row"
     >
       <span
+        aria-hidden="true"
         className="pgn__action-row-spacer"
       />
       <button
@@ -56,6 +57,7 @@ exports[`<Alert /> renders with button prop 1`] = `
       className="pgn__alert-actions pgn__action-row"
     >
       <span
+        aria-hidden="true"
         className="pgn__action-row-spacer"
       />
       <button
@@ -87,6 +89,7 @@ exports[`<Alert /> renders with dismissible prop 1`] = `
       className="pgn__alert-actions pgn__action-row"
     >
       <span
+        aria-hidden="true"
         className="pgn__action-row-spacer"
       />
       <button
@@ -155,6 +158,7 @@ exports[`<Alert /> renders with stacked prop 1`] = `
       className="pgn__alert-actions pgn__action-row"
     >
       <span
+        aria-hidden="true"
         className="pgn__action-row-spacer"
       />
       <button