fix(usage): make sorting and api expansion keyboard accessible

src/components/usage/ApiDetailsCard.tsx

@@ -74,6 +74,7 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
               <button
                 key={key}
                 type="button"
+                aria-pressed={sortKey === key}
                 className={`${styles.apiSortBtn} ${sortKey === key ? styles.apiSortBtnActive : ''}`}
                 onClick={() => handleSort(key)}
               >
@@ -82,58 +83,69 @@ export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardP
             ))}
           </div>
           <div className={styles.apiList}>
-            {sorted.map((api) => (
-              <div key={api.endpoint} className={styles.apiItem}>
-                <div className={styles.apiHeader} onClick={() => toggleExpand(api.endpoint)}>
-                  <div className={styles.apiInfo}>
-                    <span className={styles.apiEndpoint}>{api.endpoint}</span>
-                    <div className={styles.apiStats}>
-                      <span className={styles.apiBadge}>
-                        <span className={styles.requestCountCell}>
-                          <span>
-                            {t('usage_stats.requests_count')}: {api.totalRequests.toLocaleString()}
-                          </span>
-                          <span className={styles.requestBreakdown}>
-                            (<span className={styles.statSuccess}>{api.successCount.toLocaleString()}</span>{' '}
-                            <span className={styles.statFailure}>{api.failureCount.toLocaleString()}</span>)
-                          </span>
-                        </span>
-                      </span>
-                      <span className={styles.apiBadge}>
-                        {t('usage_stats.tokens_count')}: {formatCompactNumber(api.totalTokens)}
-                      </span>
-                      {hasPrices && api.totalCost > 0 && (
+            {sorted.map((api, index) => {
+              const isExpanded = expandedApis.has(api.endpoint);
+              const panelId = `api-models-${index}`;
+
+              return (
+                <div key={api.endpoint} className={styles.apiItem}>
+                  <button
+                    type="button"
+                    className={styles.apiHeader}
+                    onClick={() => toggleExpand(api.endpoint)}
+                    aria-expanded={isExpanded}
+                    aria-controls={panelId}
+                  >
+                    <div className={styles.apiInfo}>
+                      <span className={styles.apiEndpoint}>{api.endpoint}</span>
+                      <div className={styles.apiStats}>
                         <span className={styles.apiBadge}>
-                          {t('usage_stats.total_cost')}: {formatUsd(api.totalCost)}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                  <span className={styles.expandIcon}>
-                    {expandedApis.has(api.endpoint) ? '▼' : '▶'}
-                  </span>
-                </div>
-                {expandedApis.has(api.endpoint) && (
-                  <div className={styles.apiModels}>
-                    {Object.entries(api.models).map(([model, stats]) => (
-                      <div key={model} className={styles.modelRow}>
-                        <span className={styles.modelName}>{model}</span>
-                        <span className={styles.modelStat}>
                           <span className={styles.requestCountCell}>
-                            <span>{stats.requests.toLocaleString()}</span>
+                            <span>
+                              {t('usage_stats.requests_count')}: {api.totalRequests.toLocaleString()}
+                            </span>
                             <span className={styles.requestBreakdown}>
-                              (<span className={styles.statSuccess}>{stats.successCount.toLocaleString()}</span>{' '}
-                              <span className={styles.statFailure}>{stats.failureCount.toLocaleString()}</span>)
+                              (<span className={styles.statSuccess}>{api.successCount.toLocaleString()}</span>{' '}
+                              <span className={styles.statFailure}>{api.failureCount.toLocaleString()}</span>)
                             </span>
                           </span>
                         </span>
-                        <span className={styles.modelStat}>{formatCompactNumber(stats.tokens)}</span>
+                        <span className={styles.apiBadge}>
+                          {t('usage_stats.tokens_count')}: {formatCompactNumber(api.totalTokens)}
+                        </span>
+                        {hasPrices && api.totalCost > 0 && (
+                          <span className={styles.apiBadge}>
+                            {t('usage_stats.total_cost')}: {formatUsd(api.totalCost)}
+                          </span>
+                        )}
                       </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            ))}
+                    </div>
+                    <span className={styles.expandIcon}>
+                      {isExpanded ? '▼' : '▶'}
+                    </span>
+                  </button>
+                  {isExpanded && (
+                    <div id={panelId} className={styles.apiModels}>
+                      {Object.entries(api.models).map(([model, stats]) => (
+                        <div key={model} className={styles.modelRow}>
+                          <span className={styles.modelName}>{model}</span>
+                          <span className={styles.modelStat}>
+                            <span className={styles.requestCountCell}>
+                              <span>{stats.requests.toLocaleString()}</span>
+                              <span className={styles.requestBreakdown}>
+                                (<span className={styles.statSuccess}>{stats.successCount.toLocaleString()}</span>{' '}
+                                <span className={styles.statFailure}>{stats.failureCount.toLocaleString()}</span>)
+                              </span>
+                            </span>
+                          </span>
+                          <span className={styles.modelStat}>{formatCompactNumber(stats.tokens)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
         </>
       ) : (

src/components/usage/ModelStatsCard.tsx

@@ -55,6 +55,8 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
 
   const arrow = (key: SortKey) =>
     sortKey === key ? (sortDir === 'asc' ? ' ▲' : ' ▼') : '';
+  const ariaSort = (key: SortKey): 'none' | 'ascending' | 'descending' =>
+    sortKey === key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
 
   return (
     <Card title={t('usage_stats.models')}>
@@ -65,21 +67,51 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
           <table className={styles.table}>
             <thead>
               <tr>
-                <th className={styles.sortableHeader} onClick={() => handleSort('model')}>
-                  {t('usage_stats.model_name')}{arrow('model')}
+                <th className={styles.sortableHeader} aria-sort={ariaSort('model')}>
+                  <button
+                    type="button"
+                    className={styles.sortHeaderButton}
+                    onClick={() => handleSort('model')}
+                  >
+                    {t('usage_stats.model_name')}{arrow('model')}
+                  </button>
                 </th>
-                <th className={styles.sortableHeader} onClick={() => handleSort('requests')}>
-                  {t('usage_stats.requests_count')}{arrow('requests')}
+                <th className={styles.sortableHeader} aria-sort={ariaSort('requests')}>
+                  <button
+                    type="button"
+                    className={styles.sortHeaderButton}
+                    onClick={() => handleSort('requests')}
+                  >
+                    {t('usage_stats.requests_count')}{arrow('requests')}
+                  </button>
                 </th>
-                <th className={styles.sortableHeader} onClick={() => handleSort('tokens')}>
-                  {t('usage_stats.tokens_count')}{arrow('tokens')}
+                <th className={styles.sortableHeader} aria-sort={ariaSort('tokens')}>
+                  <button
+                    type="button"
+                    className={styles.sortHeaderButton}
+                    onClick={() => handleSort('tokens')}
+                  >
+                    {t('usage_stats.tokens_count')}{arrow('tokens')}
+                  </button>
                 </th>
-                <th className={styles.sortableHeader} onClick={() => handleSort('successRate')}>
-                  {t('usage_stats.success_rate')}{arrow('successRate')}
+                <th className={styles.sortableHeader} aria-sort={ariaSort('successRate')}>
+                  <button
+                    type="button"
+                    className={styles.sortHeaderButton}
+                    onClick={() => handleSort('successRate')}
+                  >
+                    {t('usage_stats.success_rate')}{arrow('successRate')}
+                  </button>
                 </th>
                 {hasPrices && (
-                  <th className={styles.sortableHeader} onClick={() => handleSort('cost')}>
-                    {t('usage_stats.total_cost')}{arrow('cost')}
+                  <th className={styles.sortableHeader} aria-sort={ariaSort('cost')}>
+                    <button
+                      type="button"
+                      className={styles.sortHeaderButton}
+                      onClick={() => handleSort('cost')}
+                    >
+                      {t('usage_stats.total_cost')}{arrow('cost')}
+                    </button>
                   </th>
                 )}
               </tr>

src/pages/UsagePage.module.scss

@@ -451,6 +451,11 @@
     background: var(--bg-tertiary);
     color: var(--text-primary);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 1px;
+  }
 }
 
 .apiSortBtnActive {
@@ -474,16 +479,27 @@
 }
 
 .apiHeader {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   transition: background-color 0.15s ease;
 
   &:hover {
     background-color: var(--bg-tertiary);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: -2px;
+  }
 }
 
 .apiInfo {
@@ -588,7 +604,6 @@
   }
 
   th.sortableHeader {
-    cursor: pointer;
     user-select: none;
     transition: color 0.15s ease;
 
@@ -606,6 +621,25 @@
   }
 }
 
+.sortHeaderButton {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+    border-radius: $radius-sm;
+  }
+}
+
 .modelCell {
   font-weight: 500;
   max-width: 240px;