Merge pull request #27 from David-H-Afonso/fix/radio-name-aria-issues-11-13

Issues 13 & 11

Author: David-H-Afonso

src/components/Home/components/SelectiveExportModal.tsx

@@ -127,7 +127,13 @@ const SelectiveExportModal: React.FC<Props> = ({ isOpen, onClose, preSelectedGam
 
 								return (
 									<div key={game.id} className={`sem__per-game-item ${hasOverride ? 'sem__per-game-item--overridden' : ''}`}>
-										<button type='button' className='sem__per-game-header' onClick={() => togglePerGameExpand(game.id)}>
+										<button
+											type='button'
+											id={`sem-game-header-${game.id}`}
+											className='sem__per-game-header'
+											aria-expanded={isExpanded}
+											aria-controls={`sem-game-body-${game.id}`}
+											onClick={() => togglePerGameExpand(game.id)}>
 											<span className='sem__per-game-arrow'>{isExpanded ? '▾' : '▸'}</span>
 											<span className='sem__per-game-name'>{game.name}</span>
 											<span className='sem__per-game-badge'>{hasOverride ? 'Override active' : 'Using global'}</span>
@@ -146,15 +152,19 @@ const SelectiveExportModal: React.FC<Props> = ({ isOpen, onClose, preSelectedGam
 										</button>
 
 										{isExpanded && (
-											<div className='sem__per-game-body'>
-												<PropertyConfigPanel
-													panelMode='export'
-													config={gameConfig}
-													onChange={(cfg) => updatePerGameConfig(game.id, cfg as GameExportConfig)}
-													headingLabel={`Override for: ${game.name}`}
-												/>
-											</div>
-										)}
+										<div
+											className='sem__per-game-body'
+											role='region'
+											aria-labelledby={`sem-game-header-${game.id}`}
+											id={`sem-game-body-${game.id}`}>
+											<PropertyConfigPanel
+												panelMode='export'
+												config={gameConfig}
+												onChange={(cfg) => updatePerGameConfig(game.id, cfg as GameExportConfig)}
+												headingLabel={`Override for: ${game.name}`}
+											/>
+										</div>
+									)}
 									</div>
 								)
 							})}

src/components/Home/components/shared/PropertyConfigPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useId } from 'react'
 import { useGameStatus, useGamePlatform, useGamePlayWith, useGamePlayedStatus } from '@/hooks'
 import { GAME_PROPERTY_FIELDS } from '@/models/api/ImportExport'
 import type { ConfigurableGameProperty, GameImportConfig, GameExportConfig, ImportPropertyOverride, ExportPropertyOverride } from '@/models/api/ImportExport'
@@ -21,6 +21,7 @@ interface PropertyConfigPanelProps {
 }
 
 const PropertyConfigPanel: React.FC<PropertyConfigPanelProps> = ({ panelMode, config, onChange, headingLabel }) => {
+	const radioGroupId = useId()
 	const { fetchActiveStatusList } = useGameStatus()
 	const { fetchList: fetchPlatforms } = useGamePlatform()
 	const { fetchOptions: fetchPlayWithList } = useGamePlayWith()
@@ -233,15 +234,15 @@ const PropertyConfigPanel: React.FC<PropertyConfigPanelProps> = ({ panelMode, co
 			{/* Mode toggle */}
 			<div className='pcp__mode-toggle'>
 				<label className={`pcp__mode-btn ${config.mode === 'simple' ? 'is-active' : ''}`}>
-					<input type='radio' name={`pcp-mode-${headingLabel ?? 'global'}`} checked={config.mode === 'simple'} onChange={() => handleModeToggle('simple')} />
+					<input type='radio' name={radioGroupId} checked={config.mode === 'simple'} onChange={() => handleModeToggle('simple')} />
 					{panelMode === 'import' ? 'As Imported (all)' : 'As Stored (all)'}
 				</label>
 				<label className={`pcp__mode-btn ${config.mode === 'customCleared' ? 'is-active' : ''}`}>
-					<input type='radio' name={`pcp-mode-${headingLabel ?? 'global'}`} checked={config.mode === 'customCleared'} onChange={() => handleModeToggle('customCleared')} />
+					<input type='radio' name={radioGroupId} checked={config.mode === 'customCleared'} onChange={() => handleModeToggle('customCleared')} />
 					Custom Cleared
 				</label>
 				<label className={`pcp__mode-btn ${config.mode === 'custom' ? 'is-active' : ''}`}>
-					<input type='radio' name={`pcp-mode-${headingLabel ?? 'global'}`} checked={config.mode === 'custom'} onChange={() => handleModeToggle('custom')} />
+					<input type='radio' name={radioGroupId} checked={config.mode === 'custom'} onChange={() => handleModeToggle('custom')} />
 					Custom (per property)
 				</label>
 			</div>