[A11Y]: Improve keyboard navigation and screen reader support for Roadmap section

### What changes are you proposing?
Improve accessibility of the Roadmap page (`/roadmap`) so it works correctly with keyboard and screen readers.

- Replace clickable `div` elements with proper `` elements in `components/roadmap/RoadmapPill.tsx`
- Add visible keyboard focus styles (focus ring)
- Add basic ARIA attributes for expandable items (`aria-expanded`, `aria-controls`, `aria-label`)

### Why do we need this improvement?
The current Roadmap implementation is not accessible.

- Roadmap items cannot be focused using the keyboard
- There is no visible focus ring when navigating with `Tab`
- Screen readers do not announce whether a section is open or closed

This makes the page difficult to use for users relying on assistive technology.

### How will this change help?
- Keyboard users can navigate and interact with roadmap items
- Screen reader users get clear state information
- Improves overall usability and accessibility of the page

### How could it be implemented?
- Update `RoadmapItem.tsx` and `RoadmapPill.tsx`
- Use standard `` elements instead of `div`
- Use `React.useId()` for unique IDs
- Add Tailwind focus styles such as `focus:ring`

### Screenshots
**Current behavior (no focus ring when using keyboard):**

### Breaking changes
No.

### Checklist
- [x] I have checked for similar issues
- [x] I have read the Contributing Guidelines

### Would you like to help fix this issue?
- [x] Yes, I am interested in working on this
- [ ] No, I am just reporting the issue

cc @asyncapi/maintainers

Start at the /roadmap page and read components/roadmap/RoadmapItem.tsx and components/roadmap/RoadmapPill.tsx to trace the expandable items. Verify keyboard focus, button semantics, React.useId()-based relationships, ARIA state announcements, and Tailwind focus styles. Done means roadmap items are keyboard-operable and their expanded state is clear to screen readers.

Written by the indexing model from the issue text.