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

…group context (#7415) **Related Issue:** #6904 ## Summary - Adds `label` prop to `calcite-action-group` - Adds `actionsEndGroupLabel` prop to `calcite-action-bar` - Adds `actionsEndGroupLabel` prop to `calcite-action-pad` - Refactor `calcite-action-group` css for additional element - Add test
Esri · Aug 23, 2023 · b34f36d · b34f36d
1 parent 450e7b5
commit b34f36d
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 32 deletions.
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -70,6 +70,11 @@ export class ActionBar
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * Specifies the accessible label for the last action-group.
+   */
+  @Prop() actionsEndGroupLabel: string;
+
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */
@@ -372,7 +377,17 @@ export class ActionBar
   // --------------------------------------------------------------------------
 
   renderBottomActionGroup(): VNode {
-    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
+    const {
+      expanded,
+      expandDisabled,
+      el,
+      position,
+      toggleExpand,
+      scale,
+      layout,
+      messages,
+      actionsEndGroupLabel,
+    } = this;
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
@@ -392,6 +407,7 @@ export class ActionBar
     return (
       <calcite-action-group
         class={CSS.actionGroupEnd}
+        label={actionsEndGroupLabel}
         hidden={this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)}
         layout={layout}
         scale={scale}

diff --git a/packages/calcite-components/src/components/action-bar/usage/With-grouping.md b/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>

diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/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");
   });

diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/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

diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/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,
@@ -22,7 +22,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";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 
@@ -58,6 +58,11 @@ export class ActionGroup
     this.menuOpen = false;
   }
 
+  /**
+   * Specifies the label of the component. Required for accessibility.
+   */
+  @Prop() label: string;
+
   /**
    * Indicates the layout of the component.
    *
@@ -202,10 +207,10 @@ export class ActionGroup
 
   render(): VNode {
     return (
-      <Fragment>
+      <div aria-label={this.label} class={CSS.container} role="group">
         <slot />
         {this.renderMenu()}
-      </Fragment>
+      </div>
     );
   }
 

diff --git a/packages/calcite-components/src/components/action-group/resources.ts b/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",
+};
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -58,6 +58,11 @@ export class ActionPad
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * Specifies the accessible label for the last action-group.
+   */
+  @Prop() actionsEndGroupLabel: string;
+
   /**
    * When `true`, the expand-toggling behavior is disabled.
    */
@@ -250,7 +255,17 @@ export class ActionPad
   // --------------------------------------------------------------------------
 
   renderBottomActionGroup(): VNode {
-    const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this;
+    const {
+      expanded,
+      expandDisabled,
+      messages,
+      el,
+      position,
+      toggleExpand,
+      scale,
+      layout,
+      actionsEndGroupLabel,
+    } = this;
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
@@ -268,7 +283,12 @@ export class ActionPad
     ) : null;
 
     return expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
+      <calcite-action-group
+        class={CSS.actionGroupEnd}
+        label={actionsEndGroupLabel}
+        layout={layout}
+        scale={scale}
+      >
         <slot name={SLOTS.expandTooltip} onSlotchange={this.handleTooltipSlotChange} />
         {expandToggleNode}
       </calcite-action-group>

diff --git a/packages/calcite-components/src/components/action-pad/usage/With-grouping.md b/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>

diff --git a/packages/calcite-components/src/components/shell/usage/Advanced.md b/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>

diff --git a/packages/calcite-components/src/demos/action.html b/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>