From 616e2952623a9339fed909b11667a99d76ae88ef Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Sun, 8 Sep 2024 17:49:02 -0700
Subject: [PATCH] Improve searchbox accessibility (#760)

* Set field key for search result options label

* Add playwright test

* Add role attr to search dialog
---
 browser_tests/nodeSearchBox.spec.ts               | 10 ++++++++++
 src/components/searchbox/NodeSearchBox.vue        |  1 +
 src/components/searchbox/NodeSearchBoxPopover.vue |  5 ++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/browser_tests/nodeSearchBox.spec.ts b/browser_tests/nodeSearchBox.spec.ts
index ebe93c5aeb..c53fa7b9ed 100644
--- a/browser_tests/nodeSearchBox.spec.ts
+++ b/browser_tests/nodeSearchBox.spec.ts
@@ -76,6 +76,16 @@ test.describe('Node search box', () => {
       'added-node-no-connection.png'
     )
   })
+
+  test('Has correct aria-labels on search results', async ({ comfyPage }) => {
+    const node = 'Load Checkpoint'
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.fillAndSelectFirstNode(node)
+    const firstResult = comfyPage.page
+      .locator('li.p-autocomplete-option')
+      .first()
+    await expect(firstResult).toHaveAttribute('aria-label', node)
+  })
 })
 
 test.describe('Release context menu', () => {
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 0a42baf66e..5d8f4b5391 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -40,6 +40,7 @@
       auto-option-focus
       force-selection
       multiple
+      :optionLabel="'display_name'"
     >
       <template v-slot:option="{ option }">
         <div class="option-container">
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index ce84a2088e..c52d7c0825 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -6,7 +6,10 @@
       :dismissable-mask="dismissable"
       @hide="clearFilters"
       :pt="{
-        root: { class: 'invisible-dialog-root' },
+        root: {
+          class: 'invisible-dialog-root',
+          role: 'search'
+        },
         mask: { class: 'node-search-box-dialog-mask' },
         transition: {
           enterFromClass: 'opacity-0 scale-75',