Skip to content

BUG: Homepage Recent News blog posts are not keyboard accessible #832

Description

@RedZapdos123

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:

  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:

  • <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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions