Upload 2 files

前端页面/market/创作者卡片组件.js

@@ -324,9 +324,12 @@ export function createCreatorCard(creatorData, currentUser = null) {
             <div class="creator-card__stats">${stat('likes',t('creator.stats.likes'),creatorData.likes)}${stat('favorites',t('creator.stats.favorites'),creatorData.favorites)}${stat('followers',t('creator.stats.followers'),creatorData.followers)}</div>
             <div class="creator-card__outputs">${stat('toolsCount',t('creator.output.tools'),creatorData.toolsCount,t('creator.output.unit'))}${stat('skillsCount',t('creator.output.skills'),creatorData.skillsCount || 0,t('creator.output.unit'))}${stat('appsCount',t('creator.output.apps'),creatorData.appsCount,t('creator.output.unit'))}</div>
         </div>
-        <button type="button" class="creator-card__toggle" aria-expanded="false" aria-controls="detail-${chartContainerId}">${escapeHtml(t('creator.expand_details'))}<span aria-hidden="true">⌄</span></button>
     `;
-    const toggleButton = summaryView.querySelector('.creator-card__toggle');
+    summaryView.tabIndex = 0;
+    summaryView.setAttribute('role', 'button');
+    summaryView.setAttribute('aria-expanded', 'false');
+    summaryView.setAttribute('aria-controls', `detail-${chartContainerId}`);
+    summaryView.setAttribute('aria-label', `${profileName}: ${t('creator.expand_details')}`);
 
     const jumpToProfile = (e) => {
         e.stopPropagation();
@@ -386,7 +389,7 @@ export function createCreatorCard(creatorData, currentUser = null) {
             const notice = document.createElement('div');
             notice.setAttribute('role', 'status'); notice.textContent = t('auth.session_changed');
             detailView.append(notice); detailView.hidden = false; detailView.style.display = 'block';
-            toggleButton.disabled = true; toggleButton.setAttribute('aria-expanded', 'true');
+            summaryView.setAttribute('aria-disabled', 'true'); summaryView.tabIndex = -1; summaryView.setAttribute('aria-expanded', 'true');
         }
     });
     const current = token => scope.isCurrent() && card.isConnected && detailView.style.display !== 'none' && token === generation;
@@ -603,20 +606,23 @@ export function createCreatorCard(creatorData, currentUser = null) {
             pauseDetails(); detailView.hidden = true; detailView.style.display = "none";
             if (currentExpandedCard === card) currentExpandedCard = null;
         }
-        toggleButton.setAttribute('aria-expanded', String(expanded));
-        toggleButton.firstChild.textContent = t(expanded ? 'creator.collapse_details' : 'creator.expand_details');
+        summaryView.setAttribute('aria-expanded', String(expanded));
+        summaryView.setAttribute('aria-label', `${profileName}: ${t(expanded ? 'creator.collapse_details' : 'creator.expand_details')}`);
         if (expanded) loadCreatorDetails();
     }
     const toggleDetails = () => setExpanded(detailView.hidden);
     summaryView.onclick = event => {
-        if (event.target.closest('button') && !event.target.closest('.creator-card__toggle')) return;
+        if (event.target.closest('button')) return;
         toggleDetails();
     };
     card._closeDetails = () => setExpanded(false);
     const keyHandler = event => {
+        if (event.target === summaryView && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault(); event.stopPropagation(); toggleDetails(); return;
+        }
         if (event.key !== 'Escape' || detailView.hidden || !card.contains(document.activeElement)) return;
         event.preventDefault(); event.stopPropagation();
-        setExpanded(false); toggleButton.focus();
+        setExpanded(false); summaryView.focus();
     };
     card.addEventListener('keydown', keyHandler);
 
@@ -627,7 +633,7 @@ export function createCreatorCard(creatorData, currentUser = null) {
     scope.addCleanup(() => {
         pauseDetails(); stopTrackingRemoval?.(); stopTrackingRemoval = null;
         summaryView.onclick = null; card.removeEventListener('keydown', keyHandler);
-        toggleButton.disabled = true;
+        summaryView.setAttribute('aria-disabled', 'true'); summaryView.tabIndex = -1;
         commentUI?._cleanup?.();
         if (currentExpandedCard === card) currentExpandedCard = null;
         if (resizeSubscribed) window.removeEventListener('resize', resizeHandler);

前端页面/styles/主题基础.css

@@ -1555,8 +1555,6 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 .creator-card__stat-value > span { min-width:0; }
 .creator-card__number { white-space:nowrap; }
 .creator-card__stat small { font-weight:400; font-size:10px; }
-.creator-card__toggle { width:100%; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:6px 10px; border:1px solid var(--rk-border,#454545); border-radius:6px; background:var(--rk-panel,var(--comfy-input-bg,#292929)); color:var(--rk-text,var(--fg-color,#f1f1f1)); font:inherit; font-size:12px; cursor:pointer; }
-.creator-card__toggle[aria-expanded="true"] > span { transform:rotate(180deg); }
 .creator-card button:hover, .creator-tip-board button:hover { text-decoration:underline; }
 .creator-card button:focus-visible, .creator-tip-board button:focus-visible { outline:2px solid var(--rk-focus,#8ab4ff); outline-offset:2px; }
 .creator-card button:disabled { cursor:default; opacity:.65; }
@@ -1706,3 +1704,5 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 @container ranking-posts (max-width: 280px) { .posts-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; } }
 @media (prefers-reduced-motion: reduce) { .posts-skeleton { animation: none; } }
 @media (forced-colors: active) { .posts-card__play { background: Canvas; border: 1px solid CanvasText; } .posts-card__play-icon { border-left-color: CanvasText; } }
+
+.creator-card__summary:focus-visible { outline:2px solid var(--rk-focus,#8ab4ff); outline-offset:-3px; }