fix(chip): Ensure Chip displays without Chip Group label in Custom El…

…ement (#6858) **Related Issue:** #6856 ## Summary Shifts responsibility of setting `aria-labelledby` to a parent Chip Group, to prevent the component from failing from lack of parent label. I wonder if our `renders()` test helper could add a check for rendering component within a Custom Element.
Esri · Apr 25, 2023 · 8bf16b9 · 8bf16b9
1 parent 56b1d4d
commit 8bf16b9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx
@@ -166,8 +166,6 @@ export class Chip
 
   private closeButtonEl: HTMLButtonElement;
 
-  private parentGroupEl: HTMLCalciteChipGroupElement;
-
   private mutationObserver = createObserver("mutation", () => this.updateHasText());
 
   // --------------------------------------------------------------------------
@@ -198,7 +196,6 @@ export class Chip
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    this.parentGroupEl = this.el.parentElement as HTMLCalciteChipGroupElement;
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
@@ -384,7 +381,6 @@ export class Chip
           aria-checked={this.interactive ? toAriaBoolean(this.selected) : undefined}
           aria-disabled={disableInteraction ? toAriaBoolean(this.disabled) : undefined}
           aria-label={this.label}
-          aria-labelledby={this.parentGroupEl.label}
           class={{
             [CSS.container]: true,
             [CSS.textSlotted]: this.hasText,

diff --git a/src/demos/chip.html b/src/demos/chip.html
@@ -119,7 +119,6 @@
   <body>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Chip</h1>
-
       <!-- Header -->
       <div class="parent">
         <div class="child"></div>
@@ -1014,6 +1013,20 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
           </calcite-tooltip>
         </div>
       </div>
+      <div class="parent">
+        <div class="child right-aligned-text">Rendered programmatically</div>
+        <div class="child">
+          <div id="shadowEl"></div>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
+  <script>
+    const chipHTML = `<calcite-chip appearance="outline" kind="neutral" icon="layers" value="layers">Layers</calcite-chip>`;
+
+    const shadowEl = document.getElementById("shadowEl");
+    const shadow = shadowEl.attachShadow({ mode: "open" });
+
+    shadow.innerHTML = chipHTML;
+  </script>
 </html>