diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
index c400d05f22..2df673726a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
@@ -4,6 +4,8 @@ import UsagePrioritySection from '../usage-priority-section'
 
 describe('UsagePrioritySection', () => {
   const onSelect = vi.fn()
+  const getAiCreditsButton = () => screen.getByRole('button', { name: /aiCreditsOption/ })
+  const getApiKeyButton = () => screen.getByRole('button', { name: /apiKeyOption/ })
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -15,7 +17,8 @@ describe('UsagePrioritySection', () => {
       render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
 
       expect(screen.getByText(/usagePriority/))!.toBeInTheDocument()
-      expect(screen.getAllByRole('button')).toHaveLength(2)
+      expect(getAiCreditsButton()).toBeInTheDocument()
+      expect(getApiKeyButton()).toBeInTheDocument()
     })
   })
 
@@ -24,24 +27,21 @@ describe('UsagePrioritySection', () => {
     it('should highlight AI credits option when value is credits', () => {
       render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[0]!.className).toContain('border-components-option-card-option-selected-border')
-      expect(buttons[1]!.className).not.toContain('border-components-option-card-option-selected-border')
+      expect(getAiCreditsButton()).toHaveAttribute('aria-pressed', 'true')
+      expect(getApiKeyButton()).toHaveAttribute('aria-pressed', 'false')
     })
 
     it('should highlight API key option when value is apiKey', () => {
       render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />)
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[0]!.className).not.toContain('border-components-option-card-option-selected-border')
-      expect(buttons[1]!.className).toContain('border-components-option-card-option-selected-border')
+      expect(getAiCreditsButton()).toHaveAttribute('aria-pressed', 'false')
+      expect(getApiKeyButton()).toHaveAttribute('aria-pressed', 'true')
     })
 
     it('should highlight API key option when value is apiKeyOnly', () => {
       render(<UsagePrioritySection value="apiKeyOnly" onSelect={onSelect} />)
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[1]!.className).toContain('border-components-option-card-option-selected-border')
+      expect(getApiKeyButton()).toHaveAttribute('aria-pressed', 'true')
     })
   })
 
@@ -50,7 +50,7 @@ describe('UsagePrioritySection', () => {
     it('should call onSelect with system when clicking AI credits option', () => {
       render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />)
 
-      fireEvent.click(screen.getAllByRole('button')[0]!)
+      fireEvent.click(getAiCreditsButton())
 
       expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.system)
     })
@@ -58,7 +58,7 @@ describe('UsagePrioritySection', () => {
     it('should call onSelect with custom when clicking API key option', () => {
       render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
 
-      fireEvent.click(screen.getAllByRole('button')[1]!)
+      fireEvent.click(getApiKeyButton())
 
       expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.custom)
     })
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
index 19b2ba20a3..b491f07889 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
@@ -26,7 +26,7 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
     <div className="p-1">
       <div className="flex items-center gap-1 rounded-lg p-1">
         <div className="shrink-0 px-0.5 py-1">
-          <span className="i-ri-arrow-up-double-line block h-4 w-4 text-text-tertiary" />
+          <span aria-hidden="true" className="i-ri-arrow-up-double-line block h-4 w-4 text-text-tertiary" />
         </div>
         <div className="flex min-w-0 flex-1 items-center gap-0.5 py-0.5">
           <span className="truncate system-sm-medium text-text-secondary">
@@ -37,22 +37,27 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
           </Infotip>
         </div>
         <div className="flex shrink-0 items-center gap-1">
-          {options.map(option => (
-            <button
-              key={option.key}
-              type="button"
-              className={cn(
-                'shrink-0 rounded-md px-2 py-1 text-center whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-components-button-primary-border focus-visible:outline-hidden disabled:opacity-50',
-                selectedKey === option.key
-                  ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-panel-bg system-xs-medium text-text-primary shadow-xs'
-                  : 'border border-components-option-card-option-border bg-components-option-card-option-bg system-xs-regular text-text-secondary hover:bg-components-option-card-option-bg-hover',
-              )}
-              disabled={disabled}
-              onClick={() => onSelect(option.key)}
-            >
-              {t(option.labelKey, { ns: 'common' })}
-            </button>
-          ))}
+          {options.map((option) => {
+            const selected = selectedKey === option.key
+
+            return (
+              <button
+                key={option.key}
+                type="button"
+                aria-pressed={selected}
+                className={cn(
+                  'shrink-0 rounded-md px-2 py-1 text-center whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-components-button-primary-border focus-visible:outline-hidden disabled:opacity-50',
+                  selected
+                    ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-panel-bg system-xs-medium text-text-primary shadow-xs'
+                    : 'border border-components-option-card-option-border bg-components-option-card-option-bg system-xs-regular text-text-secondary hover:bg-components-option-card-option-bg-hover',
+                )}
+                disabled={disabled}
+                onClick={() => onSelect(option.key)}
+              >
+                {t(option.labelKey, { ns: 'common' })}
+              </button>
+            )
+          })}
         </div>
       </div>
     </div>