Describe the bug
On the homepage Recent News section, blog post entries are mouse-only because each post title is rendered as a clickable <h3> 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 <a> 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:
- Go to 'https://kubeedge.io/'
- Press
Tab to move through interactive elements on the homepage
- Scroll to the
Recent News section and observe that focus reaches author links, but does not reach View All or the blog post titles
- 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:
<a onClick={() => history.push("blog")}> for View All with no href
- clickable
<h3 onClick={...}> for each post title
Built homepage DOM verification:
- post title nodes in
.blogPostContainer .right h3 have tabIndex = -1
- no post title
<a href> 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
Describe the bug
On the homepage
Recent Newssection, blog post entries are mouse-only because each post title is rendered as a clickable<h3>instead of a semantic link/button. Keyboard users cannot focus or open the post titles. TheView Allcontrol in the same section is also rendered as an<a>withonClickbut nohref, so it is not exposed with proper link semantics and is skipped during keyboard navigation.To Reproduce
Steps to reproduce the behavior:
Tabto move through interactive elements on the homepageRecent Newssection and observe that focus reaches author links, but does not reachView Allor the blog post titlesExpected behavior
View Allshould 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):
Smartphone (please complete the following information):
Additional context
Current implementation in
src/components/blogPost/index.jsuses:<a onClick={() => history.push("blog")}>forView Allwith nohref<h3 onClick={...}>for each post titleBuilt homepage DOM verification:
.blogPostContainer .right h3havetabIndex = -1<a href>elements are rendered in the blog cardsView Allhas nohref, and real keyboard tab traversal skips bothView Alland the post titles