refactor(chip)!: make label property required and value optional (#10787

)

**Related Issue:** #8696

## Summary

- Make the `label` property required to ensure it is provided to a11y
assistive technologies.
- Make the `value` property optional in favor of `label`.

BREAKING CHANGE: The `label` property is now required and `value` is
optional.

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

@@ -475,7 +475,7 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
         }}
         key="queue-count"
       >
-        <calcite-chip scale={this.scale} value={queueText}>
+        <calcite-chip label={queueText} scale={this.scale} value={queueText}>
           {queueText}
         </calcite-chip>
       </div>

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

@@ -91,7 +91,11 @@ export class Chip extends LitElement implements InteractiveComponent, LoadableCo
   /** Specifies the kind of the component, which will apply to border and background if applicable. */
   @property({ reflect: true }) kind: Extract<"brand" | "inverse" | "neutral", Kind> = "neutral";
 
-  /** Accessible name for the component. */
+  /**
+   * Accessible name for the component.
+   *
+   * @required
+   */
   @property() label: string;
 
   /** Use this property to override individual strings used by the component. */
@@ -124,11 +128,7 @@ export class Chip extends LitElement implements InteractiveComponent, LoadableCo
     SelectionMode
   > = "none";
 
-  /**
-   * The component's value.
-   *
-   * @required
-   */
+  /** The component's value. */
   @property() value: any;
 
   // #endregion

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

@@ -1447,6 +1447,7 @@ export class Combobox
           iconFlipRtl={item.iconFlipRtl}
           id={item.guid ? `${chipUidPrefix}${item.guid}` : null}
           key={itemLabel}
+          label={label}
           messageOverrides={{ dismissLabel: messages.removeTag }}
           onFocusIn={() => (this.activeChipIndex = i)}
           oncalciteChipClose={() => this.calciteChipCloseHandler(item)}
@@ -1480,6 +1481,7 @@ export class Combobox
             !compactSelectionDisplay
           ),
         }}
+        label={label}
         ref={setAllSelectedIndicatorChipEl}
         scale={scale}
         title={label}
@@ -1503,6 +1505,7 @@ export class Combobox
             compactSelectionDisplay
           ),
         }}
+        label={label}
         scale={scale}
         title={label}
         value=""
@@ -1555,6 +1558,7 @@ export class Combobox
           chip: true,
           [CSS.chipInvisible]: chipInvisible,
         }}
+        label={label}
         ref={setSelectedIndicatorChipEl}
         scale={scale}
         title={label}
@@ -1596,6 +1600,7 @@ export class Combobox
           chip: true,
           [CSS.chipInvisible]: chipInvisible,
         }}
+        label={label}
         scale={scale}
         title={label}
         value=""

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

@@ -389,6 +389,8 @@ export class Rating
   // #region Rendering
 
   override render(): JsxNode {
+    const countString = this.count?.toString();
+
     return (
       <InteractiveContainer disabled={this.disabled}>
         <span class="wrapper">
@@ -442,9 +444,9 @@ export class Rating
             )}
 
             {(this.count || this.average) && this.showChip ? (
-              <calcite-chip scale={this.scale} value={this.count?.toString()}>
+              <calcite-chip label={countString} scale={this.scale} value={countString}>
                 {!!this.average && <span class="number--average">{this.average.toString()}</span>}
-                {!!this.count && <span class="number--count">({this.count?.toString()})</span>}
+                {!!this.count && <span class="number--count">({countString})</span>}
               </calcite-chip>
             ) : null}
           </fieldset>

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

@@ -401,13 +401,20 @@ export class Table extends LitElement implements LoadableComponent {
       <div class={CSS.selectionArea}>
         <calcite-chip
           kind={this.selectedCount > 0 ? "brand" : "neutral"}
+          label={selectionText}
           scale={this.scale}
           value={selectionText}
         >
           {selectionText}
         </calcite-chip>
         {outOfViewCount > 0 && (
-          <calcite-chip icon="hide-empty" scale={this.scale} title={outOfView} value={outOfView}>
+          <calcite-chip
+            icon="hide-empty"
+            label={outOfView}
+            scale={this.scale}
+            title={outOfView}
+            value={outOfView}
+          >
             {localizedOutOfView}
           </calcite-chip>
         )}