feat(action-bar, action-pad, action-group): Add label properties for group context

packages/calcite-components/src/components/action-bar/usage/With-grouping.md

@@ -2,12 +2,12 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 
 ```html
 <calcite-action-bar>
-  <calcite-action-group>
+  <calcite-action-group label="Manage Item">
     <calcite-action text="Add" icon="plus"></calcite-action>
     <calcite-action text="Save" icon="save"></calcite-action>
   </calcite-action-group>
 
-  <calcite-action-group>
+  <calcite-action-group label="Item types">
     <calcite-action text="Layers" icon="layers"></calcite-action>
     <calcite-action text="Basemaps" icon="layer-basemap"></calcite-action>
   </calcite-action-group>

packages/calcite-components/src/components/action-group/action-group.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 
 const actionGroupHTML = `<calcite-action-group scale="l">
       <calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
@@ -58,6 +58,17 @@ describe("calcite-action-group", () => {
     expect(await menu.getProperty("overlayPositioning")).toBe("fixed");
   });
 
+  it("should honor label", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-action-group label="test">
+    <calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
+    <calcite-action id="banana" slot="menu-actions" text="Banana" icon="banana"></calcite-action>
+    </calcite-action-group>`);
+    await page.waitForChanges();
+    const container = await page.find(`calcite-action-group >>> .${CSS.container}`);
+    expect(await container.getProperty("ariaLabel")).toBe("test");
+  });
+
   describe("translation support", () => {
     t9n("calcite-action-group");
   });

packages/calcite-components/src/components/action-group/action-group.scss

@@ -16,6 +16,10 @@
   --calcite-action-group-columns: 3;
 }
 
+.container {
+  @apply flex flex-col;
+}
+
 :host([columns="1"]) {
   --calcite-action-group-columns: 1;
 }
@@ -39,11 +43,16 @@
   @apply pt-0;
 }
 
-:host([layout="horizontal"]) {
+:host([layout="horizontal"]),
+:host([layout="horizontal"]) .container {
   @apply flex-row;
 }
 
 :host([layout="grid"]) {
+  @apply grid;
+}
+
+:host([layout="grid"]) .container {
   @apply bg-background
   grid
   place-content-stretch

packages/calcite-components/src/components/action-group/action-group.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Fragment, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
+import { Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
 import { CalciteActionMenuCustomEvent } from "../../components";
 import {
   ConditionalSlotComponent,
@@ -23,7 +23,7 @@ import {
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Columns, Layout, Scale } from "../interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
-import { ICONS, SLOTS } from "./resources";
+import { ICONS, SLOTS, CSS } from "./resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
 
 /**
@@ -58,6 +58,11 @@ export class ActionGroup
     this.menuOpen = false;
   }
 
+  /**
+   * Specifies the label of the component.
+   */
+  @Prop() label: string;
+
   /**
    * Indicates the layout of the component.
    *
@@ -207,10 +212,10 @@ export class ActionGroup
 
   render(): VNode {
     return (
-      <Fragment>
+      <div aria-label={this.label} class={CSS.container} role="group">
         <slot />
         {this.renderMenu()}
-      </Fragment>
+      </div>
     );
   }
 

packages/calcite-components/src/components/action-group/resources.ts

@@ -6,3 +6,7 @@ export const SLOTS = {
 export const ICONS = {
   menu: "ellipsis",
 };
+
+export const CSS = {
+  container: "container",
+};

packages/calcite-components/src/components/action-pad/usage/With-grouping.md

@@ -2,7 +2,7 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 
 ```html
 <calcite-action-pad>
-  <calcite-action-group>
+  <calcite-action-group label="Manage Item">
     <calcite-action text="Home" icon="home"></calcite-action>
     <calcite-action text="Styles" icon="add-in-edit"></calcite-action>
   </calcite-action-group>

packages/calcite-components/src/components/shell/usage/Advanced.md

@@ -4,12 +4,12 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
 <calcite-shell>
   <calcite-shell-panel slot="panel-start" position="start" display-mode="float">
     <calcite-action-bar slot="action-bar">
-      <calcite-action-group>
+      <calcite-action-group label="Manage item">
         <calcite-action text="Add" icon="plus"></calcite-action>
         <calcite-action text="Save" disabled icon="save"></calcite-action>
         <calcite-action text="Layers" active indicator icon="layers"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group>
+      <calcite-action-group label="Item types">
         <calcite-action text="Add" icon="plus"></calcite-action>
         <calcite-action text="Layers" indicator icon="layers"></calcite-action>
       </calcite-action-group>
@@ -30,12 +30,12 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
 
    <calcite-shell-panel slot="panel-end" position="end" display-mode="float" height-scale="l">
       <calcite-action-bar slot="action-bar">
-        <calcite-action-group>
+        <calcite-action-group label="Manage item">
           <calcite-action text="Add" active icon="plus"></calcite-action>
           <calcite-action text="Save" disabled icon="save"></calcite-action>
           <calcite-action text="Layers" icon="layers"></calcite-action>
         </calcite-action-group>
-        <calcite-action-group>
+        <calcite-action-group label="Item types">
           <calcite-action text="Add" icon="plus"></calcite-action>
           <calcite-action text="Save" disabled icon="save"></calcite-action>
           <calcite-action text="Layers" icon="layers"></calcite-action>

packages/calcite-components/src/demos/action.html

@@ -315,7 +315,7 @@
           alignment center when enclosed within group (grid layout, text-enabled)
         </div>
         <div class="child">
-          <calcite-action-group layout="grid">
+          <calcite-action-group layout="grid" label="Shapes">
             <calcite-action alignment="center" scale="s" appearance="solid" icon="polygon" text="polygon" text-enabled>
             </calcite-action>
             <calcite-action
@@ -336,7 +336,7 @@
       <div class="parent">
         <div class="child right-aligned-text">alignment center when enclosed within group (grid layout, no text)</div>
         <div class="child">
-          <calcite-action-group layout="grid">
+          <calcite-action-group layout="grid" label="More shapes">
             <calcite-action alignment="center" scale="s" appearance="solid" icon="polygon"></calcite-action>
             <calcite-action alignment="center" scale="s" appearance="solid" icon="rectangle"></calcite-action>
             <calcite-action alignment="center" scale="s" appearance="solid" icon="trash"></calcite-action>
@@ -428,11 +428,11 @@
         <div class="child-action-bar">
           <div>grouping</div>
           <calcite-action-bar>
-            <calcite-action-group>
+            <calcite-action-group label="Item things">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" icon="save"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group>
+            <calcite-action-group label="Layer things">
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
           </calcite-action-bar>
@@ -450,12 +450,12 @@
         <div class="child-action-bar">
           <div>tall container</div>
           <calcite-action-bar>
-            <calcite-action-group>
+            <calcite-action-group label="Manage">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group>
+            <calcite-action-group label="Tinker">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" active icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
@@ -531,11 +531,11 @@
         <div class="child-action-bar" style="flex: 1">
           <div>grouping</div>
           <calcite-action-bar layout="horizontal">
-            <calcite-action-group>
+            <calcite-action-group label="Fiddle">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" icon="save"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group>
+            <calcite-action-group label="Tasks">
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
           </calcite-action-bar>
@@ -553,12 +553,12 @@
         <div class="child-action-bar" style="flex: 1">
           <div>tall container</div>
           <calcite-action-bar layout="horizontal">
-            <calcite-action-group>
+            <calcite-action-group label="Tweak">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group>
+            <calcite-action-group label="Daddle">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" active icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
@@ -580,12 +580,12 @@
         <div class="child-action-bar" style="flex: 1">
           <div>Full width</div>
           <calcite-action-bar layout="horizontal" style="width: 100%">
-            <calcite-action-group>
+            <calcite-action-group label="Poke around">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group>
+            <calcite-action-group label="Mess with">
               <calcite-action text="Add" icon="plus"> </calcite-action>
               <calcite-action text="Save" active icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
@@ -609,23 +609,23 @@
 
         <div class="child-action-bar">
           <calcite-action-pad scale="s">
-            <calcite-action-group>
+            <calcite-action-group label="test">
               <calcite-action scale="s" text="Undo" icon="undo"> </calcite-action>
               <calcite-action scale="s" text="Cool" icon="redo"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group scale="s">
+            <calcite-action-group label="test2" scale="s">
               <calcite-action scale="s" text="Add" icon="trash"> </calcite-action>
             </calcite-action-group>
           </calcite-action-pad>
         </div>
 
         <div class="child-action-bar">
           <calcite-action-pad scale="m">
-            <calcite-action-group>
+            <calcite-action-group label="Revert">
               <calcite-action scale="m" text="Undo" icon="undo"> </calcite-action>
               <calcite-action scale="m" text="Cool" icon="redo"> </calcite-action>
             </calcite-action-group>
-            <calcite-action-group scale="m">
+            <calcite-action-group label="Add things" scale="m">
               <calcite-action scale="m" text="Add" icon="trash"> </calcite-action>
             </calcite-action-group>
           </calcite-action-pad>