From 991e60d29523441fb802c51bbc63c0cd16e7864b Mon Sep 17 00:00:00 2001
From: Zack Porter <121693134+zaporter-work@users.noreply.github.com>
Date: Fri, 27 Sep 2024 13:06:45 -0400
Subject: [PATCH] SearchableSelect LabelledBy Attribute (#583)

---
 packages/core/package.json                             | 2 +-
 packages/core/src/lib/context-menu/context-menu.svelte | 2 +-
 packages/core/src/lib/select/searchable-select.svelte  | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 07367f1b..8b8edb8e 100644
--- 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
index b29dce63..38273cd8 100644
--- 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
index 94f23f41..33a2cb80 100644
--- 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}