소스 검색

refac: aria label model item

Timothy Jaeryang Baek 2 달 전
부모
커밋
9c49d9e641
2개의 변경된 파일6개의 추가작업 그리고 5개의 파일을 삭제
  1. 4 4
      cypress/e2e/chat.cy.ts
  2. 2 1
      src/lib/components/chat/ModelSelector/ModelItem.svelte

+ 4 - 4
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

+ 2 - 1
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'