SearchableSelect LabelledBy Attribute (#583)

viamrobotics · Sep 27, 2024 · 991e60d · 991e60d
1 parent 804a562
commit 991e60d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

diff --git a/packages/core/src/lib/context-menu/context-menu.svelte b/packages/core/src/lib/context-menu/context-menu.svelte
@@ -20,7 +20,7 @@ export let id: string;
 /** Accessible label of the menu. */
 export let label: string | undefined = undefined;
 
-/** ID of the element ID that labels the menu. */
+/** ID of the element that labels the menu. */
 export let labelledBy: string | undefined = undefined;
 
 /** Additional CSS classes to pass to the menu. */

diff --git a/packages/core/src/lib/select/searchable-select.svelte b/packages/core/src/lib/select/searchable-select.svelte
@@ -73,6 +73,9 @@ export let otherOptionPrefix = '';
 /** Error message ID, if any. */
 export let errorID = '';
 
+/** ID of the element that labels the SearchableSelect. */
+export let labelledBy: string | undefined = undefined;
+
 /**
  * Notify the parent of a value change, after Enter key or blur.
  *
@@ -328,6 +331,7 @@ const handleKeydown = createHandleKey({
   aria-multiselectable={multiple}
   aria-activedescendant={activeID}
   aria-errormessage={errorID}
+  aria-labelledby={labelledBy}
   on:focus={handleFocus}
   on:blur={handleBlur}
   on:keydown={handleKeydown}