chore(Autocomplete): enable dynamic aria-label value (#2962)

* chore(Autocomplete): enable dynamic value * chore: add changelog
contentful · Jan 9, 2025 · 3c9a565 · 3c9a565
1 parent f0b031c
commit 3c9a565
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/lazy-bees-clap.md b/.changeset/lazy-bees-clap.md
@@ -0,0 +1,5 @@
+---
+"@contentful/f36-autocomplete": patch
+---
+
+Enable dynamic `aria-label` value
diff --git a/packages/components/autocomplete/src/Autocomplete.tsx b/packages/components/autocomplete/src/Autocomplete.tsx
@@ -183,6 +183,13 @@ export interface AutocompleteProps<ItemType>
    * Manually control when the button to clear the input value is shown
    */
   showClearButton?: boolean;
+  /**
+   * Additional aria attributes
+   */
+  aria?: {
+    showListIconLabel?: string;
+    clearSelectionIconLabel?: string;
+  };
 }
 
 function _Autocomplete<ItemType>(
@@ -227,6 +234,10 @@ function _Autocomplete<ItemType>(
     testId = 'cf-autocomplete',
     popoverTestId = 'cf-autocomplete-container',
     showClearButton: showClearButtonProp,
+    aria = {
+      clearSelectionIconLabel: 'Clear',
+      showListIconLabel: 'Show list',
+    },
   } = props;
 
   type GroupType = GenericGroupType<ItemType>;
@@ -410,7 +421,11 @@ function _Autocomplete<ItemType>(
             <IconButton
               {...toggleProps}
               ref={mergeRefs(toggleProps.ref, toggleRef)}
-              aria-label={showClearButton ? 'Clear' : 'Show list'}
+              aria-label={
+                showClearButton
+                  ? aria.clearSelectionIconLabel
+                  : aria.showListIconLabel
+              }
               className={styles.toggleButton}
               variant="transparent"
               icon={showClearButton ? <CloseIcon variant="muted" /> : icon}