BUG: Homepage Recent News blog posts are not keyboard accessible
- Dominant language
- MDX
- Stars
- 64
- Forks
- 203
- Avg merge
- 5d 22h
- Merged PRs (30d)
- 8
Description
**Describe the bug**
On the homepage `Recent News` section, blog post entries are mouse-only because each post title is rendered as a clickable `
` instead of a semantic link/button. Keyboard users cannot focus or open the post titles. The `View All` control in the same section is also rendered as an `` with `onClick` but no `href`, so it is not exposed with proper link semantics and is skipped during keyboard navigation.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to 'https://kubeedge.io/'
2. Press `Tab` to move through interactive elements on the homepage
3. Scroll to the `Recent News` section and observe that focus reaches author links, but does not reach `View All` or the blog post titles
4. Try to open a homepage blog post using only the keyboard
**Expected behavior**
`View All` should be a real semantic link/button, and each homepage blog post title/card should be keyboard-focusable and keyboard-activatable using semantic navigation markup.
**Screenshots**
N/A. This is primarily a keyboard navigation and DOM semantics issue.
**Desktop (please complete the following information):**
- OS: Windows
- Browser: Chromium-based browser
- Version: N/A
**Smartphone (please complete the following information):**
- Device: N/A
- OS: N/A
- Browser: N/A
- Version: N/A
**Additional context**
Current implementation in `src/components/blogPost/index.js` uses:
- `
history.push("blog")}>` for `View All` with no `href`
- clickable `` for each post title
Built homepage DOM verification:
- post title nodes in `.blogPostContainer .right h3` have `tabIndex = -1`
- no post title `
` elements are rendered in the blog cards
- `View All` has no `href`, and real keyboard tab traversal skips both `View All` and the post titles
Steps to reproduce the behavior:
1. Go to 'https://kubeedge.io/'
2. Press `Tab` to move through interactive elements on the homepage
3. Scroll to the `Recent News` section and observe that focus reaches author links, but does not reach `View All` or the blog post titles
4. Try to open a homepage blog post using only the keyboard
`View All` should be a real semantic link/button, and each homepage blog post title/card should be keyboard-focusable and keyboard-activatable using semantic navigation markup.
N/A. This is primarily a keyboard navigation and DOM semantics issue.
- OS: Windows
- Browser: Chromium-based browser
- Version: N/A
- Device: N/A
- OS: N/A
- Browser: N/A
- Version: N/A
Current implementation in `src/components/blogPost/index.js` uses:
- `
Built homepage DOM verification:
- post title nodes in `.blogPostContainer .right h3` have `tabIndex = -1`
- no post title `
- `View All` has no `href`, and real keyboard tab traversal skips both `View All` and the post titles
Contributor guide
Assessment
This issue has not been assessed yet.