@gurupanguji

Technical Specification: Semantic Lists for Navigation and Feeds (#212)

Overview

This specification details the conversion of grouped elements (social links, blog feeds) from generic sibling elements into semantic <ul> and <li> structures. This improves screen reader experience by announcing the number of items in a group and providing list navigation commands.

Technical Details

Location: _includes/social-footer.html, index.html, _layouts/post.html, reviews/index.html, assets/css/style.css Target: <div class="social-links"> <a class="social-icon">...</a> ... </div> Replacement:

<ul class="social-links">
  <li><a class="social-icon">...</a></li>
  ...
</ul>

Implementation Note: The shared footer should live in _includes/social-footer.html so homepage, archive, reviews, and posts all use the same link set and icon sizing. CSS Update: Add list-style: none; padding: 0; margin: 0; to the shared .social-links rule in assets/css/style.css to maintain layout.

2. Homepage Blog Feed

Location: index.html Target: <div id="feed-container" class="feed-timeline"> Replacement:

<ul id="feed-container" class="feed-timeline">
  <li class="feed-day-group">
    ...
    <ul class="feed-day-posts">
      <li><a class="feed-post-link">...</a></li>
    </ul>
  </li>
</ul>

Verification Requirements