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>
</h3>
<p class="pn-article-excerpt">
<?php
// Prefer AI summary over raw excerpt.
$display_text = ! empty( $article->ai_summary ) ? $article->ai_summary : $article->excerpt;
echo esc_html( $display_text );
?>
</p>
<?php
// Prefer AI summary over raw excerpt.
$display_text = ! empty( $article->ai_summary ) ? $article->ai_summary : ( $article->excerpt ?? '' );
if ( ! empty( $display_text ) ) : ?>
<p class="pn-article-excerpt">
<?php echo esc_html( $display_text ); ?>
</p>
<?php endif; ?>
<?php if ( ! empty( $article->author ) ) : ?>
<span class="pn-author">

View File

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