From 9c49d9e641fd41000c0b037f7da21d02d1aaa1fa Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 14 Jul 2025 12:09:08 +0400
Subject: [PATCH] refac: aria label model item

---
 cypress/e2e/chat.cy.ts                                 | 8 ++++----
 src/lib/components/chat/ModelSelector/ModelItem.svelte | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/chat.cy.ts b/cypress/e2e/chat.cy.ts
index 17c4d8e735..8792947992 100644
--- a/cypress/e2e/chat.cy.ts
+++ b/cypress/e2e/chat.cy.ts
@@ -21,14 +21,14 @@ describe('Settings', () => {
 			// Click on the model selector
 			cy.get('button[aria-label="Select a model"]').click();
 			// Select the first model
-			cy.get('button[aria-label="model-item"]').first().click();
+			cy.get('button[aria-roledescription="model-item"]').first().click();
 		});
 
 		it('user can perform text chat', () => {
 			// Click on the model selector
 			cy.get('button[aria-label="Select a model"]').click();
 			// Select the first model
-			cy.get('button[aria-label="model-item"]').first().click();
+			cy.get('button[aria-roledescription="model-item"]').first().click();
 			// Type a message
 			cy.get('#chat-input').type('Hi, what can you do? A single sentence only please.', {
 				force: true
@@ -48,7 +48,7 @@ describe('Settings', () => {
 			// Click on the model selector
 			cy.get('button[aria-label="Select a model"]').click();
 			// Select the first model
-			cy.get('button[aria-label="model-item"]').first().click();
+			cy.get('button[aria-roledescription="model-item"]').first().click();
 			// Type a message
 			cy.get('#chat-input').type('Hi, what can you do? A single sentence only please.', {
 				force: true
@@ -83,7 +83,7 @@ describe('Settings', () => {
 			// Click on the model selector
 			cy.get('button[aria-label="Select a model"]').click();
 			// Select the first model
-			cy.get('button[aria-label="model-item"]').first().click();
+			cy.get('button[aria-roledescription="model-item"]').first().click();
 			// Type a message
 			cy.get('#chat-input').type('Hi, what can you do? A single sentence only please.', {
 				force: true
diff --git a/src/lib/components/chat/ModelSelector/ModelItem.svelte b/src/lib/components/chat/ModelSelector/ModelItem.svelte
index 5f909d2f03..405902fc26 100644
--- a/src/lib/components/chat/ModelSelector/ModelItem.svelte
+++ b/src/lib/components/chat/ModelSelector/ModelItem.svelte
@@ -42,7 +42,8 @@
 </script>
 
 <button
-	aria-label="model-item"
+	aria-roledescription="model-item"
+	aria-label={item.label}
 	class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index ===
 	selectedModelIdx
 		? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'