Add ESLint rule to prevent onClick handlers on div elements

[dhruvisompura]

Problem

We currently have multiple instances in the codebase where onClick handlers are attached to <div> elements, which is not semantically correct and creates accessibility/UI issues. These elements should either use proper semantic HTML (like <button>) or have appropriate ARIA roles and keyboard event handlers.

Using clickable divs without proper accessibility attributes:

• Prevents keyboard navigation (which can cause issues like a keyboard trap)
• Breaks screen reader functionality
• Violates WCAG accessibility guidelines

Some instances of clickable divs in the codebase:

• src/vs/workbench/contrib/welcomeGettingStarted/browser/positronWelcomeMenuButton.tsx
• src/vs/workbench/browser/parts/positronTopActionBar/components/topActionBarCommandCenter.tsx

Solution

We could consider adding eslint-plugin-jsx-a11y to prevent new instances of clickable divs from being added to the codebase.

Based off the docs we can add the following rules:

jsx-a11y/no-static-element-interactions

• Prevents onClick/onMouseDown/etc. on non-interactive elements without proper ARIA roles
• Catches: <div onClick={...}> without role attribute
• Forces developers to use semantic HTML or add proper accessibility attributes

jsx-a11y/click-events-have-key-events

• Ensures elements with onClick also support keyboard navigation
• Catches: Elements with onClick but no onKeyDown/onKeyPress handlers
• Ensures keyboard users can interact with clickable elements

We would just modify the eslint.config.js and add the following under rules:

'jsx-a11y/no-static-element-interactions': 'error', 
'jsx-a11y/click-events-have-key-events': 'error',    

Once the rule is added, we can verify it works by seeing if the above two examples are caught by the linter. Given that it looks like we only have two clickables div, we should fix them when we add this rule.