fix: add focus states for keyboard a11y and guard empty excerpt

Addresses QA Agent 2 findings:
- Add :focus outline on title and thumbnail links for keyboard navigation
- Wrap excerpt paragraph in conditional to avoid empty <p> when both
  ai_summary and excerpt are missing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Peptide News Team
2026-04-06 18:55:22 +07:00
parent 203aa46036
commit aad57424c9
2 changed files with 14 additions and 7 deletions

View File

@@ -130,13 +130,14 @@ class Peptide_News_Public {
</a> </a>
</h3> </h3>
<p class="pn-article-excerpt">
<?php <?php
// Prefer AI summary over raw excerpt. // Prefer AI summary over raw excerpt.
$display_text = ! empty( $article->ai_summary ) ? $article->ai_summary : $article->excerpt; $display_text = ! empty( $article->ai_summary ) ? $article->ai_summary : ( $article->excerpt ?? '' );
echo esc_html( $display_text ); if ( ! empty( $display_text ) ) : ?>
?> <p class="pn-article-excerpt">
<?php echo esc_html( $display_text ); ?>
</p> </p>
<?php endif; ?>
<?php if ( ! empty( $article->author ) ) : ?> <?php if ( ! empty( $article->author ) ) : ?>
<span class="pn-author"> <span class="pn-author">

View File

@@ -121,6 +121,12 @@
color: #0073aa; color: #0073aa;
} }
.pn-article-title a:focus,
.pn-article-thumb a:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* ── Excerpt / AI summary ──────────────────────────────────────── */ /* ── Excerpt / AI summary ──────────────────────────────────────── */
.pn-article-excerpt { .pn-article-excerpt {
font-size: 0.875rem; font-size: 0.875rem;