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

@@ -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', () => {

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">

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',