fix(button,card,fab,inline-editable): provides context to AT users wh…

…en loading (#7257)

**Related Issue:** #6534 

## Summary
Adds context for AT users when `loading` prop is set to `true` in the
following components.

-  calcite-button 
-  calcite-fab
-  calcite-inline-editable ( when `afterConfirm( )` is defined)

packages/calcite-components/src/components/button/button.e2e.ts

@@ -143,6 +143,13 @@ describe("calcite-button", () => {
     disabled("calcite-button");
   });
 
+  it("should have aria-live attribute set to polite by default", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-button>Continue</calcite-button>`);
+    const button = await page.find("calcite-button >>> button");
+    expect(button.getAttribute("aria-live")).toBe("polite");
+  });
+
   it("should update childElType when href changes", async () => {
     const page = await newE2EPage({ html: `<calcite-button>Continue</calcite-button>` });
     const link = await page.find("calcite-button");

packages/calcite-components/src/components/button/button.tsx

@@ -257,7 +257,8 @@ export class Button
 
     return (
       <Tag
-        aria-label={getLabelText(this)}
+        aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
+        aria-live="polite"
         class={{
           [CSS.buttonPadding]: noStartEndIcons,
           [CSS.buttonPaddingShrunk]: !noStartEndIcons,

packages/calcite-components/src/components/card/card.e2e.ts

@@ -116,4 +116,16 @@ describe("calcite-card", () => {
   describe("translation support", () => {
     t9n("calcite-card");
   });
+
+  it("should have aria-live attribute set to polite on loader container when loading", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <calcite-card selectable loading>
+      <img slot="thumbnail" src="${placeholder}" alt="Test image" />
+      </calcite-card>
+    `);
+
+    const loaderContainer = await page.find("calcite-card >>> .calcite-card-loader-container");
+    expect(loaderContainer.getAttribute("aria-live")).toBe("polite");
+  });
 });

packages/calcite-components/src/components/card/card.tsx

@@ -130,7 +130,7 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
     return (
       <div class={{ "calcite-card-container": true, inline: thumbnailInline }}>
         {this.loading ? (
-          <div class="calcite-card-loader-container">
+          <div aria-live="polite" class="calcite-card-loader-container">
             <calcite-loader label={this.messages.loading} />
           </div>
         ) : null}