fix(list): Add live region for dynamically changing list items

packages/calcite-components/src/components/list/assets/list/t9n/messages.json

@@ -0,0 +1,4 @@
+{
+  "filterEnabled": "Filter enabled.",
+  "total": "Total items: {count}."
+}

packages/calcite-components/src/components/list/assets/list/t9n/messages_en.json

@@ -0,0 +1,4 @@
+{
+  "filterEnabled": "Filter enabled.",
+  "total": "Total items: {count}."
+}

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

@@ -1,4 +1,4 @@
-import { accessible, hidden, renders, focusable, disabled, defaults } from "../../tests/commonTests";
+import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
@@ -88,6 +88,10 @@ describe("calcite-list", () => {
     hidden("calcite-list");
   });
 
+  describe.skip("translation support", () => {
+    t9n("calcite-list");
+  });
+
   describe("accessible", () => {
     accessible(html`<calcite-list>
       <calcite-list-item label="candy" description="kingdom">

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

@@ -45,6 +45,15 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { HandleNudge } from "../handle/interfaces";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages,
+} from "../../utils/t9n";
+import { ListMessages } from "./assets/list/t9n";
+import { NumberingSystem, numberStringFormatter } from "../../utils/locale";
 import { ListDragDetail } from "./interfaces";
 
 /**
@@ -58,8 +67,11 @@ import { ListDragDetail } from "./interfaces";
   tag: "calcite-list",
   styleUrl: "list.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class List implements InteractiveComponent, LoadableComponent, SortableComponent {
+export class List
+  implements InteractiveComponent, LoadableComponent, SortableComponent, T9nComponent
+{
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -137,6 +149,30 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
    */
   @Prop({ reflect: true }) loading = false;
 
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: Partial<ListMessages>;
+
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: ListMessages;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
+
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   */
+  @Prop() numberingSystem: NumberingSystem;
+
   /**
    * One of the items within the list can be opened.
    *
@@ -299,25 +335,17 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
       return;
     }
 
+    connectMessages(this);
     this.connectObserver();
     this.updateListItems();
     this.setUpSorting();
     connectInteractive(this);
     this.setParentList();
   }
 
-  disconnectedCallback(): void {
-    if (dragActive(this)) {
-      return;
-    }
-
-    this.disconnectObserver();
-    disconnectSortableComponent(this);
-    disconnectInteractive(this);
-  }
-
-  componentWillLoad(): void {
+  async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
+    await setUpMessages(this);
   }
 
   componentDidRender(): void {
@@ -328,12 +356,32 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
     setComponentLoaded(this);
   }
 
+  disconnectedCallback(): void {
+    if (dragActive(this)) {
+      return;
+    }
+
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
+    disconnectInteractive(this);
+    disconnectMessages(this);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
   //
   // --------------------------------------------------------------------------
 
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleChange(): void {
+    updateMessages(this, this.effectiveLocale);
+  }
+
+  @State() defaultMessages: ListMessages;
+
   @Element() el: HTMLCalciteListElement;
 
   @State() assistiveText: string;
@@ -409,6 +457,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
             {this.assistiveText}
           </span>
         ) : null}
+        {this.renderItemAriaLive()}
         {loading ? <calcite-scrim class={CSS.scrim} loading={loading} /> : null}
         <table
           aria-busy={toAriaBoolean(loading)}
@@ -461,6 +510,45 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo
   //
   // --------------------------------------------------------------------------
 
+  private renderItemAriaLive(): VNode {
+    const {
+      messages,
+      enabledListItems,
+      parentListEl,
+      effectiveLocale,
+      numberingSystem,
+      filterEnabled,
+      filterText,
+      filteredData,
+    } = this;
+
+    numberStringFormatter.numberFormatOptions = {
+      locale: effectiveLocale,
+      numberingSystem,
+    };
+
+    return !parentListEl ? (
+      <div aria-live="polite" class={CSS.assistiveText}>
+        {filterEnabled && filterText && filteredData?.length ? (
+          <div key="aria-filter-enabled">{messages.filterEnabled}</div>
+        ) : null}
+        <div key="aria-item-count">
+          {messages.total.replace(
+            "{count}",
+            numberStringFormatter.localize(enabledListItems.length.toString())
+          )}
+        </div>
+        {enabledListItems.length ? (
+          <ol key="aria-item-list">
+            {enabledListItems.map((item) => (
+              <li>{item.label}</li>
+            ))}
+          </ol>
+        ) : null}
+      </div>
+    ) : null;
+  }
+
   private connectObserver(): void {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }

t9nmanifest.txt

@@ -21,6 +21,7 @@ packages\calcite-components\src\components\input-number\assets\input-number\t9n
 packages\calcite-components\src\components\input-text\assets\input-text\t9n
 packages\calcite-components\src\components\input-time-picker\assets\input-time-picker\t9n
 packages\calcite-components\src\components\input-time-zone\assets\input-time-zone\t9n
+packages\calcite-components\src\components\list\assets\list\t9n
 packages\calcite-components\src\components\list-item\assets\list-item\t9n
 packages\calcite-components\src\components\menu\assets\menu\t9n
 packages\calcite-components\src\components\menu-item\assets\menu-item\t9n