fix(action-bar): no longer delegates focus when clicked on non-focusa…

…ble region (#7310)

**Related Issue:** #6462 

## Summary

This PR will fix focusing `calcite-action` in `calcite-action-bar` when
user clicks on non-focusable area. Neither the collapse button nor
slotted `calcite-action` will be focused when clicked on non-focusable
area.

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

@@ -3,6 +3,7 @@ import { html } from "../../../support/formatting";
 import { accessible, defaults, focusable, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
 import { overflowActionsDebounceInMs } from "./utils";
+import { getFocusedElementProp } from "../../tests/utils";
 
 describe("calcite-action-bar", () => {
   describe("renders", () => {
@@ -247,6 +248,21 @@ describe("calcite-action-bar", () => {
         focusTargetSelector: "calcite-action"
       }
     );
+
+    it("should not focus any action element when clicked on non-focusable region", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html` <calcite-action-bar layout="horizontal" style="width: 100%">
+        <calcite-action-group> <calcite-action text="Add" icon="plus"> </calcite-action> </calcite-action-group
+      ></calcite-action-bar>`);
+
+      const actionBarElRect = await page.evaluate(() => {
+        const actionBarEl = document.querySelector("calcite-action-bar");
+        return actionBarEl.getBoundingClientRect().toJSON();
+      });
+
+      await page.mouse.click(actionBarElRect.right / 2, actionBarElRect.y + actionBarElRect.bottom / 2);
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).not.toBe("CALCITE-ACTION");
+    });
   });
 
   describe("slots", () => {

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

@@ -16,10 +16,16 @@
 
 :host([layout="vertical"]) {
   @apply flex-col;
+  .action-group--bottom {
+    margin-block-start: auto;
+  }
 }
 
 :host([layout="horizontal"]) {
   @apply flex-row;
+  .action-group--bottom {
+    @apply ms-auto;
+  }
 }
 
 :host([layout="vertical"][overflow-actions-disabled]) {
@@ -53,5 +59,5 @@
 }
 
 .action-group--bottom {
-  @apply flex-grow justify-end;
+  @apply justify-end;
 }

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

@@ -17,7 +17,7 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent
 } from "../../utils/conditionalSlot";
-import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
+import { focusFirstTabbable, getSlotted, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
   componentFocusable,
   LoadableComponent,
@@ -53,14 +53,20 @@ import {
 @Component({
   tag: "calcite-action-bar",
   styleUrl: "action-bar.scss",
-  shadow: {
-    delegatesFocus: true
-  },
+  shadow: true,
   assetsDirs: ["assets"]
 })
 export class ActionBar
   implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent
 {
+  //--------------------------------------------------------------------------
+  //
+  //  Element
+  //
+  //--------------------------------------------------------------------------
+
+  @Element() el: HTMLCalciteActionBarElement;
+
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -157,8 +163,6 @@ export class ActionBar
   //
   // --------------------------------------------------------------------------
 
-  @Element() el: HTMLCalciteActionBarElement;
-
   mutationObserver = createObserver("mutation", () => {
     const { el, expanded } = this;
     toggleChildActionText({ el, expanded });
@@ -245,7 +249,7 @@ export class ActionBar
   async setFocus(): Promise<void> {
     await componentFocusable(this);
 
-    this.el?.focus();
+    focusFirstTabbable(this.el);
   }
 
   // --------------------------------------------------------------------------