fix(web): accessibility pass to WCAG 2.1 AA (M7)

An axe-core audit of every screen in both themes found low contrast on white
text over the accent and on caption text, track rows using row roles without
cells, and unlabelled progress bars. Accent fills now use a darker token,
caption text meets 4.5:1, track lists are lists and progress bars are labelled.
The queue drawer slides in from the right as designed, takes focus, closes on
Escape and notes that the wave never ends.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/widgets/PlayerBar.tsx

@@ -1,4 +1,4 @@
-import { useState, type CSSProperties } from 'react';
+import { useCallback, useEffect, useId, useRef, useState, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import { Link } from '@tanstack/react-router';
 import { useTranslation } from 'react-i18next';
@@ -35,6 +35,12 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
   const player = usePlayer();
   const st = usePlayerState();
   const [queueOpen, setQueueOpen] = useState(false);
+  const queueButton = useRef<HTMLButtonElement>(null);
+  const queueId = useId();
+  const closeQueue = useCallback(() => {
+    setQueueOpen(false);
+    queueButton.current?.focus(); // фокус — туда, откуда открыли
+  }, []);
   const track = st.track;
 
   if (!track) {
@@ -167,10 +173,12 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
         </button>
         <button
+          ref={queueButton}
           type="button"
           className={cx(s.icon, queueOpen && s.accent)}
           aria-label={t('player.queue')}
           aria-expanded={queueOpen}
+          aria-controls={queueOpen ? queueId : undefined}
           onClick={() => setQueueOpen((v) => !v)}
         >
           <Icon src={queueIcon} size={20} />
@@ -195,23 +203,33 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           style={{ '--pct': `${(st.muted ? 0 : st.volume) * 100}%` } as CSSProperties}
         />
       </div>
-      {queueOpen && <QueueDrawer variant={variant} onClose={() => setQueueOpen(false)} />}
+      {queueOpen && <QueueDrawer id={queueId} variant={variant} onClose={closeQueue} />}
     </footer>
   );
 }
 
 /** Очередь воспроизведения (выдвижная панель справа): что играет и что дальше, клик — перейти к треку. */
-function QueueDrawer({ variant, onClose }: { variant: 'bar' | 'island'; onClose: () => void }) {
+function QueueDrawer({ id, variant, onClose }: { id: string; variant: 'bar' | 'island'; onClose: () => void }) {
   const { t } = useTranslation();
   const player = usePlayer();
   const st = usePlayerState();
   const upcoming = st.queue.slice(st.index, st.index + 40);
+  const close = useRef<HTMLButtonElement>(null);
+  // Клавиатура: при открытии фокус в панель, Escape закрывает.
+  useEffect(() => {
+    close.current?.focus();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
   // Портал: у плеера backdrop-filter, а он делает fixed-потомков относительными к себе.
   return createPortal(
-    <aside className={cx(s.drawer, variant === 'island' && s.drawerIsland)} aria-label={t('player.queue')}>
+    <aside id={id} className={cx(s.drawer, variant === 'island' && s.drawerIsland)} aria-label={t('player.queue')}>
       <div className={s.drawerHead}>
         <span>{t('player.queue')}</span>
-        <button type="button" className={s.icon} aria-label={t('form.close')} onClick={onClose}>
+        <button ref={close} type="button" className={s.icon} aria-label={t('form.close')} onClick={onClose}>
           <Icon src={closeIcon} size={20} />
         </button>
       </div>
@@ -221,6 +239,7 @@ function QueueDrawer({ variant, onClose }: { variant: 'bar' | 'island'; onClose:
             key={`${tr.id}-${k}`}
             type="button"
             className={cx(s.queueRow, k === 0 && s.queueCurrent)}
+            aria-current={k === 0 || undefined}
             onClick={() => player.jump(st.index + k)}
           >
             <Cover album={tr.album} size={40} />
@@ -232,6 +251,7 @@ function QueueDrawer({ variant, onClose }: { variant: 'bar' | 'island'; onClose:
           </button>
         ))}
       </div>
+      {st.wave && <p className={s.drawerNote}>{t('player.queue_wave')}</p>}
     </aside>,
     document.body,
   );