When adding event handlers like `onClick` to non-interactive elements such as `div`, always include appropriate ARIA roles and keyboard event handlers. This prevents accessibility issues and reduces security vulnerabilities by ensuring all interactive elements are properly identified and managed. Non-interactive elements with click handlers but without proper roles can be overlooked in security audits and create potential attack vectors through inconsistent input validation. **Bad:** ```jsx

handleStepClick(index)} > {content}

``` **Good:** ```jsx

handleStepClick(index)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { handleStepClick(index); } }} > {content}

``` Better yet, use a semantic element when possible: ```jsx ``` This approach ensures both accessibility compliance and proper security by ensuring all interactive elements are consistently implemented and validated.