screen reader and keyboard usability pass

frontend/src/components/MultiplayerPanel.tsx

@@ -178,20 +178,23 @@ export default function MultiplayerPanel({ onClose }: { onClose: () => void }) {
               <div className="mp-mode-picker mp-mode-picker-3">
                 <button
                   className={`mp-mode-btn ${mode === 'coop' ? 'mp-mode-active' : ''}`}
+                  aria-pressed={mode === 'coop'}
                   onClick={() => setMode('coop')}
                 >
-                  <IconHeartFilled size={16} />
+                  <IconHeartFilled size={16} aria-hidden="true" />
                   <span>{t('multiplayer.coop')}</span>
                 </button>
                 <button
                   className={`mp-mode-btn ${mode === 'competitive' ? 'mp-mode-active' : ''}`}
+                  aria-pressed={mode === 'competitive'}
                   onClick={() => setMode('competitive')}
                 >
-                  <IconBoltFilled size={16} />
+                  <IconBoltFilled size={16} aria-hidden="true" />
                   <span>{t('multiplayer.race')}</span>
                 </button>
                 <button
                   className={`mp-mode-btn ${mode === 'party' ? 'mp-mode-active' : ''}`}
+                  aria-pressed={mode === 'party'}
                   onClick={(e) => {
                     const wasParty = mode === 'party'
                     setMode('party')
@@ -217,13 +220,14 @@ export default function MultiplayerPanel({ onClose }: { onClose: () => void }) {
                     }
                   }}
                 >
-                  <IconConfettiFilled size={16} />
+                  <IconConfettiFilled size={16} aria-hidden="true" />
                   <span>{t('multiplayer.partyLabel')}</span>
                 </button>
               </div>
               <AnimatePresence>
                 {mode === 'party' && (
                   <motion.button type="button" key="party-sub" ref={partyBtnRef} className="mp-party-sub-selected"
+                    aria-haspopup="listbox" aria-expanded={partyDropOpen}
                     onClick={() => setPartyDropOpen(!partyDropOpen)}
                     initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }}
                     exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.15 }}
@@ -287,8 +291,9 @@ export default function MultiplayerPanel({ onClose }: { onClose: () => void }) {
                   className="btn btn-primary"
                   onClick={() => handleJoin()}
                   disabled={busy || joinCode.length < 4}
+                  aria-label={t('multiplayer.joinRoom')}
                 >
-                  <IconArrowBigRightFilled size={14} />
+                  <IconArrowBigRightFilled size={14} aria-hidden="true" />
                 </button>
               </div>
             </div>